文 | 周蘿卜

來源：Python 技術(shù)「

在平時(shí)工作學(xué)習(xí)當(dāng)中，我們經(jīng)常會(huì)編寫一些簡(jiǎn)單的 Python GUI 工具，以此來完成各種各樣的自動(dòng)化任務(wù)，比如批量處理文件，批量處理圖片等等。當(dāng)我們進(jìn)行這些工具的編寫之時(shí)，往往只關(guān)注了功能的實(shí)現(xiàn)，而忽略了頁面的美化，這也使得在人們的眼中，Python 構(gòu)建的 GUI 程序都是比較 low 的，今天我們先忽略掉功能，著眼于頁面的美化，來看看純 Python 的編寫的 GUI 程序也可以很美觀！

頁面布局

我們首先完成一個(gè)基本的 GUI 布局

假設(shè)我們想要做一個(gè)進(jìn)制轉(zhuǎn)換的工具，那么大致的布局如下圖：

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

部分代碼如下

from tkinter import ttkfrom tkinter import *class Transform():    def __init__(self): self.root = Tk() self.root.title("進(jìn)制轉(zhuǎn)換工具") 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)        # 轉(zhuǎn)換設(shè)置區(qū)域 self.lf_group1 = LabelFrame(master=self.container, text="轉(zhuǎn)換設(shè)置") self.cb = Checkbutton(self.lf_group1, text="是否自動(dòng)轉(zhuǎn)換") self.cb.invoke() self.bt = Button(self.lf_group1, text='轉(zhuǎn)換') self.en = Entry(self.lf_group1, text='warning')        # 進(jìn)制選擇區(qū)域 self.lf_group2 = LabelFrame(master=self.container, text="進(jìn)制選擇") self.lb1 = Label(self.lf_group2, text="請(qǐng)選擇待轉(zhuǎn)換的進(jìn)制") self.cbo1 = ttk.Combobox(            master=self.lf_group2,            values=self.values        ) self.cbo1.set(self.values[2]) self.lb2 = Label(self.lf_group2, text="請(qǐng)選擇轉(zhuǎn)換后的進(jìn)制") self.cbo2 = ttk.Combobox(            master=self.lf_group2,            values=self.values,        ) self.cbo2.set(self.values[0])        # 進(jìn)制輸出區(qū)域 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()

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

頁面美化

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

首先我們?cè)O(shè)置背景顏色

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

對(duì)于整體 container 容器，我們?cè)O(shè)置背景色為#073642

接下來再分別設(shè)置各個(gè)組件的樣式

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 來設(shè)置，對(duì)于顏色的選擇，可以通過在線的顏色選擇器來選擇

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

該組件屬于 ttk 組件，所以設(shè)置樣式需要通過主題來進(jìn)行，代碼如下

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 程序的樣式就設(shè)置完成了，來看下最終的效果

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

使用 ttkbootstrap 美化頁面

當(dāng)然我們還有更加簡(jiǎn)單有效的美化方法，就是使用 ttkbootstrap 庫來進(jìn)行頁面美化

首先通過 pip 安裝 ttkbootstrap 庫

pip install ttkbootstrap

然后在項(xiàng)目中引用該庫

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

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

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="轉(zhuǎn)換設(shè)置", padding=10 )    color_group.pack(fill=X, side=TOP) self.cb = ttk.Checkbutton(color_group, text="是否自動(dòng)轉(zhuǎn)換", variable=self.cbvar) self.cb.invoke() self.bt = ttk.Button(color_group, text='轉(zhuǎn)換', 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="進(jìn)制選擇", 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="請(qǐng)選擇待轉(zhuǎn)換的進(jìn)制")    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="請(qǐng)選擇轉(zhuǎn)換后的進(jìn)制")    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 樣式要更加美觀，同時(shí)也更加便捷！