文 | 周蘿卜

來源：Python 技術「

在平時工作學習當中，我們經常會編寫一些簡單的 Python GUI 工具，以此來完成各種各樣的自動化任務，比如批量處理文件，批量處理圖片等等。當我們進行這些工具的編寫之時，往往只關注了功能的實現，而忽略了頁面的美化，這也使得在人們的眼中，Python 構建的 GUI 程序都是比較 low 的，今天我們先忽略掉功能，著眼于頁面的美化，來看看純 Python 的編寫的 GUI 程序也可以很美觀！

頁面布局

我們首先完成一個基本的 GUI 布局

假設我們想要做一個進制轉換的工具，那么大致的布局如下圖：

上圖是完全通過 Python 自帶的 GUI 庫 tkinter 來編寫的

部分代碼如下

from tkinter import ttkfrom tkinter import *class Transform():    def __init__(self): self.root = Tk() self.root.title("進制轉換工具") self.root.geometry("600x280") self.root.resizable(False, False) self.var = StringVar() self.values = ['2', '8', '10', '16', '32', '36', '58', '62'] self.myWidget() self.myLayout()    def myWidget(self): self.container = Frame(self.root)        # 轉換設置區域 self.lf_group1 = LabelFrame(master=self.container, text="轉換設置") self.cb = Checkbutton(self.lf_group1, text="是否自動轉換") self.cb.invoke() self.bt = Button(self.lf_group1, text='轉換') self.en = Entry(self.lf_group1, text='warning')        # 進制選擇區域 self.lf_group2 = LabelFrame(master=self.container, text="進制選擇") self.lb1 = Label(self.lf_group2, text="請選擇待轉換的進制") self.cbo1 = ttk.Combobox(            master=self.lf_group2,            values=self.values        ) self.cbo1.set(self.values[2]) self.lb2 = Label(self.lf_group2, text="請選擇轉換后的進制") self.cbo2 = ttk.Combobox(            master=self.lf_group2,            values=self.values,        ) self.cbo2.set(self.values[0])        # 進制輸出區域 self.txt = Text(master=self.container, height=5, width=50)    def myLayout(self): self.container.pack(side=LEFT, fill=BOTH, expand=YES, padx=5) self.lf_group1.pack(fill=X, side=TOP) self.lf_group2.pack(fill=X, pady=10, side=TOP) self.cb.pack(side=LEFT, expand=YES, padx=5, fill=X) self.bt.pack(side=LEFT, expand=YES, padx=5, fill=X) self.en.pack(side=LEFT, expand=YES, padx=5, fill=X) self.lb1.pack(side=LEFT, expand=YES, padx=5) self.cbo1.pack(side=LEFT, expand=YES, pady=5) self.lb2.pack(side=LEFT, expand=YES, padx=5) self.cbo2.pack(side=LEFT, expand=YES, pady=5) self.txt.pack(side=LEFT, anchor=NW, pady=5, fill=BOTH, expand=YES)    def run(self): self.container.mainloop()if __name__ == '__main__':    trans = Transform()    trans.run()

代碼并不復雜，布局也是使用的最基本的 pack 方式，整個 GUI 程序雖然看起來比較整齊，但是顏色單調，各個組件也不是十分美觀，下面我們就來進行美化

頁面美化

我們首先通過手工設置 CSS 的方式來美化頁面，這里主要用到了 tkonter 庫的 config 屬性

首先我們設置背景顏色

self.container.config(bg='#073642')

對于整體 container 容器，我們設置背景色為#073642

接下來再分別設置各個組件的樣式

self.lf_group1.config(bg='#073642', fg="white")self.lf_group2.config(bg='#073642', fg="white")self.cb.config(bg='#073642', selectcolor='#073642', activebackground='#073642',               activeforeground='#073642', fg="white")self.bt.config(bg="azure3")self.en.config(highlightbackground="#0b5162", highlightcolor="#0b5162",               insertofftime=500, insertontime=500, fg="Gainsboro", insertbackground="Gainsboro", bg="#073642", highlightthickness=2, relief="solid")self.lb1.config(bg='#073642', activebackground='#073642',                activeforeground='#073642', fg="white")self.lb2.config(bg='#073642', activebackground='#073642',                activeforeground='#073642', fg="white")self.txt.config(insertofftime=500, insertontime=500, fg="Gainsboro", insertbackground="Gainsboro",                wrap="none", bg='#073642')

都是通過 config 來設置，對于顏色的選擇，可以通過在線的顏色選擇器來選擇

https://tools.kalvinbg.cn/dev/colorPicker 接下來我們進行下拉框樣式的設置，對于下拉框組件，還是有些特殊的

該組件屬于 ttk 組件，所以設置樣式需要通過主題來進行，代碼如下

combostyle = ttk.Style()combostyle.theme_create('combostyle', parent='alt',                        settings={'TCombobox':                            {'configure':                                { 'foreground': 'white', 'selectbackground': '#073642',  # 選擇后的背景顏色 'fieldbackground': '#073642',  # 下拉框顏色 'background': '#073642',  # 下拉按鈕背景顏色 "font": 10,  # 字體大小                                }}}                        )combostyle.theme_use('combostyle')

這樣我們整體 GUI 程序的樣式就設置完成了，來看下最終的效果

可以明顯看出，顏值那是提升了好幾個檔次！

使用 ttkbootstrap 美化頁面

當然我們還有更加簡單有效的美化方法，就是使用 ttkbootstrap 庫來進行頁面美化

首先通過 pip 安裝 ttkbootstrap 庫

pip install ttkbootstrap

然后在項目中引用該庫

import ttkbootstrap as ttkfrom ttkbootstrap.constants import *class MainCreator(ttk.Window): def __init__(self): super().__init__("進制轉換工具", themename="solar", resizable=(False, False)) # 設置一個主題

此時當我們完成組件的布局的時候，頁面整體風格也就變成了主題solar的樣式了，當然我們還是可以為不同的組件添加bootstyle屬性來達到更多樣式效果

def create_frame(self): """Create all the frame widgets""" container = ttk.Frame(self)    container.pack(side=LEFT, fill=BOTH, expand=YES, padx=5)    color_group = ttk.Labelframe(        master=container, text="轉換設置", padding=10 )    color_group.pack(fill=X, side=TOP) self.cb = ttk.Checkbutton(color_group, text="是否自動轉換", variable=self.cbvar) self.cb.invoke() self.bt = ttk.Button(color_group, text='轉換', bootstyle='success') self.en = ttk.Entry(color_group, text='warning', bootstyle='warning') self.cb.pack(side=LEFT, expand=YES, padx=5, fill=X) self.bt.pack(side=LEFT, expand=YES, padx=5, fill=X) self.en.pack(side=LEFT, expand=YES, padx=5, fill=X)    cr_group = ttk.Labelframe(        master=container, text="進制選擇", padding=10 )    cr_group.pack(fill=X, pady=10, side=TOP)    values = ['2', '8', '10', '16', '32', '36', '58', '62']    cr3 = ttk.Label(cr_group, text="請選擇待轉換的進制")    cr3.pack(side=LEFT, expand=YES, padx=5) self.cbo1 = ttk.Combobox(        master=cr_group,        values=values,    ) self.cbo1.pack(side=LEFT, expand=YES, pady=5) self.cbo1.set(values[2])    cr5 = ttk.Label(cr_group, text="請選擇轉換后的進制")    cr5.pack(side=LEFT, expand=YES, padx=5) self.cbo2 = ttk.Combobox(        master=cr_group,        values=values,    ) self.cbo2.pack(side=LEFT, expand=YES, pady=5) self.cbo2.set(values[0]) self.txt = ttk.Text(master=container, height=5, width=50, wrap="none") self.txt.pack(side=LEFT, anchor=NW, pady=5, fill=BOTH, expand=YES)

最終效果如下：

可以看出，使用該庫的整體效果還是要比我們手工添加 CSS 樣式要更加美觀，同時也更加便捷！