用Tkinter构建简易图形用户界面

2022-12-21

字数统计: 1.6k字 | 阅读时长: 7分

前言

介绍如何使用Tkinter构建一个简易的图形用户界面。

在使用Python方便我们的日常工作时，我们可能希望将脚本、程序打包起来，方便我们在多端使用或供他人使用。对于那些不了解如何使用命令行程序的用户而言，设计一个可用的图形用户界面就十分重要。

Tkinter

如果你还不知道什么是Tkinter：

Tkinter（即 tk interface）是 Python 标准 GUI 库，简称 “Tk”；从本质上来说，它是对 TCL/TK 工具包的一种 Python 接口封装。Tkinter 是 Python 自带的标准库，因此无须另行安装，它支持跨平台运行，不仅可以在 Windows 平台上运行，还支持在 Linux 和 Mac 平台上运行。

你可能会注意到 tkinter 下的 ttk 组件库，它们似乎拥有着与tkinter相似的组件：

tkinter中的窗口小部件高度易于配置。您几乎可以完全控制它们的外观：边框宽度，字体，图像，颜色等。
ttk小部件使用样式定义外观，因此，如果要使用非标准按钮，则需要花费更多的工作。 ttk小部件的文档也很少。理解底层的主题和布局引擎(小部件本身中的布局，而不是pack，grid和place)是一个挑战。

总的来说，如果想使GUI程序更加美观，更现代，ttk组件库能够帮到你，但本篇作为 silencezheng.top 的第一篇tkinter相关文章，将不会谈论这一组件库。

写本篇文章的目的在于讲述如何快速的为Python程序制作一个“单页GUI”，不会涉及过多的技术细节，仅要求读者对于GUI程序的基本组件和设计逻辑有一个基本的了解。

设计界面布局

有许多可视化布局工具可供使用，这里我推荐一个在线布局工具：https://www.pytk.net/tkinter-helper/

当然，如果不想使用这个工具（或者以后它需要付费了），只要有一个合理的代码框架也可以很容易的对界面布局进行设计，下面我提供一个左右布局（包含两个Frame）的代码框架。

# author: SilenceZheng66
from tkinter import *

class WinGUI(Tk):
    def __init__(self):
        super().__init__()
        self.__win()
        self.tk_frame_left = Frame_left(self)
        self.tk_frame_right = Frame_right(self)

    def __win(self):
        self.title("Tkinter Demo")
        # 设置窗口大小、居中
        width = 810
        height = 600
        screenwidth = self.winfo_screenwidth()
        screenheight = self.winfo_screenheight()
        geometry = '%dx%d+%d+%d' % (width, height, (screenwidth - width) / 2, (screenheight - height) / 2)
        self.geometry(geometry)
        self.resizable(width=False, height=False)
    
class Frame_left(Frame):
    def __init__(self,parent):
        super().__init__(parent)
        self.__frame()
    def __frame(self):
        self.place(x=0, y=0, width=400, height=599)

class Frame_right(Frame):
    def __init__(self,parent):
        super().__init__(parent)
        self.__frame()
    def __frame(self):
        self.place(x=410, y=0, width=400, height=599)

class Win(WinGUI):
    def __init__(self):
        super().__init__()
        self.__event_bind()

    def __event_bind(self):
        pass
        
if __name__ == "__main__":
    win = Win()
    win.mainloop()

效果如下：

设计一个简易的文件编辑器

做事情需要有目标，下面我们的目标就是以方才提供的布局为蓝本，设计一个文件编辑器。

左侧Frame用来提供输入和功能按钮，右侧Frame用来显示内容。

输入和功能区域

我们希望可以提供两种打开文本文件的方式，输入路径或通过文件选择器进行选择。这使用到四个组件：Label、Entry、Button和Filedailog，但我们先关注前三个。

另外，我们希望提供编辑和保存两个功能按钮，这方便我们对文本文件进行编辑操作。

我习惯直接上代码，在代码中注释思路，这里我们仅关注左侧Frame部分。当然这一部分没什么可说的，相信读者看一眼就能明白。

# author: SilenceZheng66
class Frame_left(Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.__frame()
        self.tk_input_open_file = self.__tk_input_open_file()
        self.tk_label_open_file = self.__tk_label_open_file()
        self.tk_button_open_file = self.__tk_button_open_file()
        self.tk_button_edit_file = self.__tk_button_edit_file()
        self.tk_button_save_file = self.__tk_button_save_file()

    def __frame(self):
        self.place(x=0, y=0, width=400, height=599)

    def __tk_input_open_file(self):
        ipt = Entry(self)
        ipt.place(x=100, y=60, width=140, height=24)
        return ipt

    def __tk_label_open_file(self):
        label = Label(self, text="打开文件", anchor="center")
        label.place(x=10, y=60, width=69, height=24)
        return label

    def __tk_button_open_file(self):
        btn = Button(self, text="打开")
        btn.place(x=260, y=60, width=80, height=24)
        return btn

    def __tk_button_edit_file(self):
        btn = Button(self, text="编辑")
        btn.place(x=100, y=100, width=80, height=24)
        return btn

    def __tk_button_save_file(self):
        btn = Button(self, text="保存")
        btn.place(x=260, y=100, width=80, height=24)
        return btn

效果如下：

内容显示区域

我们使用带滚动条的文本组件ScrolledText来实现这部分内容：

# author: SilenceZheng66
class Frame_right(Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.__frame()
        self.tk_text_workplace = self.__tk_text_workplace()

    def __frame(self):
        self.place(x=410, y=0, width=400, height=599)

    def __tk_text_workplace(self):
        sct = ScrolledText(self)
        # 注意这里的起始坐标是相对于Frame的，故应设置为（0，0）
        sct.place(x=0, y=0, width=400, height=599)
        return sct

效果如下：

绑定事件

到这里，界面的主体框架就已经实现了，最后一步就是将按钮和事件进行绑定，并添加上一定的逻辑。

# author: SilenceZheng66
class Win(WinGUI):
    def __init__(self):
        super().__init__()
        self.__event_bind()

    def __event_bind(self):
        # 绑定按钮事件
        self.tk_frame_left.tk_button_open_file.bind("<Button-1>", self.__do_open_file)
        self.tk_frame_left.tk_button_edit_file.bind("<Button-1>", self.__do_edit_file)
        self.tk_frame_left.tk_button_save_file.bind("<Button-1>", self.__do_save_file)

    def __do_edit_file(self, event):
        # 切换文本编辑区的可用状态

        # 获取编辑区状态
        state = self.tk_frame_right.tk_text_workplace.cget('state')
        if state == 'disabled':
            self.tk_frame_right.tk_text_workplace.config(state='normal')
        else:
            self.tk_frame_right.tk_text_workplace.config(state='disabled')

    def __do_save_file(self, event):
        # 保存文件
        pass

    def __do_open_file(self, event):
        # 获取文件路径
        if self.tk_frame_left.tk_input_open_file.get() != "":
            file_path = self.tk_frame_left.tk_input_open_file.get()
        else:
            file_path = tkinter.filedialog.askopenfilename()
        # 判断路径有效
        # 打开文件
        pass

界面美化

简易界面不代表完全没有美化，适当的颜色变化可以显著提高界面的可用性，方便用户操作。下面是部分代码示例：

# author: SilenceZheng66
def __tk_input_open_file(self):
    ipt = Entry(self)
    ipt.place(x=100, y=60, width=140, height=24)
    # 选中文本时的前景、背景色
    ipt.config(selectforeground='green', selectbackground='red')
    return ipt

def __tk_button_open_file(self):
    btn = Button(self, text="打开")
    btn.place(x=260, y=60, width=80, height=24)
    # 鼠标点击按钮时，按钮的文本颜色
    btn.config(activeforeground='yellow')
    return btn

效果如下：

这里没有过多调整组件背景颜色是由于MacOS下很多组件的背景调色会失效，比如Button。有一个库叫tkmacosx可以解决。

后记

首发于 silencezheng.top，转载请注明出处。