《零基础入门学习Python》第064讲：GUI的终极选择：Tkinter

雨点打透心脏的1/2处 2022-04-08 15:11 114阅读 0赞

大家回顾一下，到目前为止，几乎我们所有的Python代码都是基于文字交互的界面。Python 的 GUI 工具包有很多，之前我们学过的 [EasyGui][] 就是其中最简单的一个，不过呢，[EasyGui][EasyGui 1] 实在是太简单了，因此，它只适合大家接受 GUI 编程的敲门砖，这一次，我们要讲的可不是什么二流货色，这一次我们来讲讲 Tkinter，Tkinter 是什么呢？它有那么 niubi 吗？

Tkinter 是Python 的标准工具库，它实际上是建立在 TK 技术上的，TK 技术最初是为 TCL 所设计的，[TCL ][TCL]是一门有名的工具命令语言，但是由于其可移植性和灵活性非常强，加上非常容易使用，因此，TK 技术被移植到许多脚本语言里，包括大名鼎鼎的 [Perl][] 、[Ruby][] 和 Pytho。Tkinter 是 Python 的默认 GUI 库，所以，像 IDLE 使用的就是 Tkinter 设计出来的，因此，我们直接在 IDLE 中导入 tkinter，就可以使用了。tkinter 模块在默认安装 Python 时就会自动安装。

>>> import tkinter
    >>>

我们现在就来做一个例子，从最简单的例子入手：

import tkinter as tk
    
    app = tk.Tk()
    app.title("GUI Demo")
    
    theLabel = tk.Label(app, text = "我的第二个GUI")
    theLabel.pack()
    
    app.mainloop()

tk.Tk() 就让tk 这个类生成了一个 顶层窗口的实例，top level 级别的窗口，我们也成为 root 窗口（根窗口）；

title ，顾名思义，就是设置窗口的标题；

我们来写一个 theLbel 的变量，这个变量接收 tk.Label()，[Label][] 是一个组件，这个组件实例化之后，赋值到 tk.Label 变量中去，这个组件是放在 app 窗口上的，然后组件显示文字为 “我的第二个GUI程序”。（Label 组件 基本上是最常用的组件了，可以用来显示文本，图像，图标等）

theLabel.pack()：用于自动调节组件自身的尺寸和位置

**app.mainloop()：是窗口的主事件循环，这基本是使用tkinter 的GUI程序的最后一行代码，因为进入了主事件循环之后，就由tkinter接管一切，也就是说，一旦执行了这行代码，就不再由代码做主了，而是由 tkinter 来响应用户的输入（例如，用户按下一个按钮，tkinter就会感受到，然后就会响应你为这个事件安排好的方法，由tkinter来调用你的函数。）**

运行结果如下：（这是拉大之后的效果）

![20181218184356608.png][]

我们接下来继续写一个进阶版的代码：

*学到现在，大家应该知道了，通常如果你想要写一个比较大的程序，那么你应该把代码封装起来，在面向对象的编程语言中，就是封装成类。*

import tkinter as tk
    
    class App:
            def __init__(self, master):
                    frame = tk.Frame(master)
                    frame.pack()
    
                    self.hi_there = tk.Button(frame, text = '打招呼', fg = 'blue')
                    self.hi_there.pack()
    
    root = tk.Tk()
    app = App(root)
    
    root.mainloop()

我们把 GUI 封装成类，类名为 App。首先，我们要实例化 tk.Tk()，创建一个 root 窗口，这里我们直接命名变量为 root，然后实例化 App，把 root 作为参数，最后就是 root.mainloop() 主事件循环。

因此我们知道在 类 App 里，需要使用构造函数来写入参数，我们开始写 \_\_init\_\_() 方法，传入的参数我们给 master，我们使用[ tk.Frame][tk.Frame] 框架，那么框架是什么呢？框架一般是用于在复杂的布局里面，将这些组件进行分组。然后使用 pack() 方法字典自动调整位置，暂时我们还不要人为干预，等会我们再操作。接下来，创建一个 按钮 组件，使用tk.Button() 方法，这个按钮就放在 frame 框架中，按钮文本为 “打招呼”，fg（Foreground） 设置前景色，另外，bg 设置背景色。self.hi\_there.pack() 就是自动调整按钮的位置。

运行结果如下：

![20181218193743371.png][]

我们点击按钮，但是没有任何响应，这是因为我们还没有给它写响应的代码。

这里我们就来写一个 点击按钮会执行的代码：

import tkinter as tk
    
    class App:
            def __init__(self, master):
                    frame = tk.Frame(master)
                    frame.pack()
    
                    self.hi_there = tk.Button(frame, text = '打招呼', fg = 'blue', command = self.say_hi)
                    self.hi_there.pack()
    
            def say_hi(self):
                    print('你好，来自江南的你！')
    
    root = tk.Tk()
    app = App(root)
    
    root.mainloop()

我们写了一个 say\_hi() 的方法，一定记得，在 tk.Button() 中加多一个参数 command，command = 你点击按钮之后要执行的函数名。

我们再次运行代码，当我们按下 “打招呼” 按钮时，在 IDLE 窗口中就会打印 ：

>>> 
    =============== RESTART: C:\Users\tk1.py ===============
    你好，来自江南的你！
    你好，来自江南的你！
    你好，来自江南的你！
    你好，来自江南的你！

接下来，有人就会有进一步的要求了，你这个 按钮 的位置总是显示在最上边，可以修改它的位置吗？

可以的，因为这里的 pack() 方法 是自动会调整对应的组件或者框架的位置，默认是调整在 最上边（top），它一共有4个位置：**`'left'`, `'right'`, `'top'`, `'bottom'`**

例如，我们改一下代码：

frame.pack(side='left')

或者

frame.pack(side=tk.LEFT)  #不建议

![20181218193841412.png][]

我们还不想让这个按钮挨着边，我们可以通过设置 pack() 方法的 padx 和 pady 参数来实现：

frame.pack(side='left', padx = 10, pady = 10)

![20181218193928977.png][]

今天这就是所有的内容了，主要就是接触一下 tkinter，下一节课开始我们就来仔细讲解每个组件的功能以及如何使用。

[EasyGui]: https://blog.csdn.net/qq_41556318/article/details/84318433
[EasyGui 1]: https://blog.csdn.net/qq_41556318/article/details/84433698
[TCL]: https://baike.baidu.com/item/TCL%E8%AF%AD%E8%A8%80/8377624?fr=aladdin
[Perl]: https://baike.baidu.com/item/perl/851577?fr=aladdin
[Ruby]: https://baike.baidu.com/item/Ruby/11419?fr=aladdin
[Label]: https://blog.csdn.net/qq_41556318/article/details/85079411
[20181218184356608.png]: /images/20220404/bdb4a13d318c4d12b8b0625c6b9d10d8.png
[tk.Frame]: https://blog.csdn.net/qq_41556318/article/details/85108440
[20181218193743371.png]: /images/20220404/d49c0d3d9d964fb8964633b21bff6692.png
[20181218193841412.png]: /images/20220404/cda7542e04ba453391082553a3c7bebd.png
[20181218193928977.png]: /images/20220404/1bc07aae6a714f8bb25b9de44bdb8d3e.png