誰說Python寫GUI程式醜？那是你不會美化！-Python教學-PHP中文網

誰說Python寫GUI程式醜？那是你不會美化！

王林

發布： 2023-04-11 13:52:03

轉載

1939 人瀏覽過

誰說Python寫GUI程式醜？那是你不會美化！

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

頁面佈局

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

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

誰說Python寫GUI程式醜？那是你不會美化！

上圖是完全透過Python 自帶的GUI 函式庫tkinter 來寫的。

部分程式碼如下:

from tkinter import ttk
from 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 來設置，對於顏色的選擇，可以透過線上的顏色選擇器來選擇。

該元件屬於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 程式的樣式就設定完成了，來看下最終的效果:

誰說Python寫GUI程式醜？那是你不會美化！

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

使用 ttkbootstrap 美化頁面

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

首先透過pip 安裝ttkbootstrap 函式庫:

pip install ttkbootstrap

登入後複製

然後在專案中引用該函式庫:

import ttkbootstrap as ttk
from 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)

登入後複製

最終效果如下：

誰說Python寫GUI程式醜？那是你不會美化！