快捷導(dǎo)航

Python使用Tkinter制作一個(gè)進(jìn)制轉(zhuǎn)換工具

更新時(shí)間：2024年01月05日 15:44:55 作者：zhouluobo

在平時(shí)工作學(xué)習(xí)當(dāng)中,我們經(jīng)常會編寫一些簡單的 Python GUI 工具,以此來完成各種各樣的自動(dòng)化任務(wù),下面我們就來看看如何使用Python制作一個(gè)進(jìn)制轉(zhuǎn)換工具吧

在平時(shí)工作學(xué)習(xí)當(dāng)中，我們經(jīng)常會編寫一些簡單的 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 ttk
from 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="請選擇待轉(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="請選擇轉(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 屬性

首先我們設(shè)置背景顏色

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

對于整體 container 容器，我們設(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è)置，對于顏色的選擇，可以通過在線的顏色選擇器來選擇

https://tools.kalvinbg.cn/dev/colorPicker

接下來我們進(jìn)行下拉框樣式的設(shè)置，對于下拉框組件，還是有些特殊的

該組件屬于 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)然我們還有更加簡單有效的美化方法，就是使用 ttkbootstrap 庫來進(jìn)行頁面美化

首先通過 pip 安裝 ttkbootstrap 庫

pip install ttkbootstrap

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

import ttkbootstrap as ttk
from 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="請選擇待轉(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="請選擇轉(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)

最終效果如下：