Python GUI 工具 tkinter 介绍

王 茂南
王 茂南
王 茂南
3081
文章
75
评论
2021年7月23日07:45:32
评论 20244字阅读67分28秒
摘要本文将会介绍 Tkinter 模块的使用。Tkinter 模块是 Python 的标准 Tk GUI 工具包的接口。Python 有许多的 GUI 的库，但只有 Tkinter 是唯一一个 Python 内置的标准库。Tkinter 有许多优势，首先他是跨平台的，相同的代码可以在 Windows，macOS，和 Linux 上进行工作。Tkinter 中可视化的组件使用操作系统自带的组件，所以这个应用看上去会比较自然。因此一些简单的任务，可以首先考虑使用 Tkinter 的。

简介

Tkinter 模块是 Python 的标准 Tk GUI 工具包的接口。Python 有许多的 GUI 的库，但只有 Tkinter 是唯一一个 Python 内置的标准库。Tkinter 有许多优势，首先他是跨平台的，相同的代码可以在 Windows，macOS，和 Linux 上进行工作。Tkinter 中可视化的组件使用操作系统自带的组件，所以这个应用看上去会比较自然。

但是 Tkinter 被诟病的一个地方是，他做出来的 GUI 看上去会是比较过时的。如果你想要一个更加 modern 的界面，更加现代化的交互，那么 Tkinter 不是现在你想要的。同时，使用 Tkinter 构建界面会比较麻烦，没有像 Qt Designer 一样的工具可以直接绘制。（关于 QT Designer 的相关教程，可以参考链接，使用 PyQt 快速搭建带有 GUI 的应用（3）–Qt Designer）

尽管界面会有一些不是很美观、同时构建界面不是很便捷。但是因为 Tkinter 内置的库，而且还是跨平台的，所以一些简单的任务，还是可以首先考虑 Tkinter 的。

参考资料

如果想要制作更加复杂的窗口界面，可以尝试使用 PyQt 来进行制作，下面是一些教程：

 

使用 tkinter 制作第一个 Python GUI 应用

Tkinter GUI 的最根本的元素是 window。Windows 会包含所有其他的 GUI 的元素，包括 text boxes，labels，或是 buttons，这些都被称作 widgets（小组件）。

作为第一个例子，我们首先创建一个 window，里面只包含一个组件（widget）。下面是一个完整的代码，我们在每一句后面都添加了注释：

  1. import tkinter as tk
  3. window = tk.Tk() # 首先对 tkinter 的 Tk 进行实例化，创建一个 windows
  5. greeting = tk.Label(text="Hello, Tkinter") # 接着我们创建一个 Label widget
  6. greeting.pack() # 将 widget 添加到 windows。这里使用 pack 添加
  8. window.mainloop() # run event loop

上面运行之后，会出现如下的界面：

Python GUI 工具 tkinter 介绍

上面有两个需要注意的点：

  • 创建了 widget 之后，我们需要将它添加到 window上。这里使用 pack 来添加，后面会介绍其他的方式。
  • 在程序最后，都需要添加 window.mainloop() 。如果我们不添加 window.mainloop() 在程序的最后，那么 Tkinter 应用不会运行，什么也不会显示。这个方法会监听所有的事件，包括鼠标的点击或是键盘摁下。

 

Tkinter 中的 widget 介绍

上面我们介绍了第一个 Tkinter 的例子。这里我们来介绍 Tkinter 中的插件。用户通过这些插件来与程序进行交互。下面是一些可用的插件：

  • Label: A widget used to display text on the screen;
  • Button: A button that can contain text and can perform an action when clicked;
  • Entry: A text entry widget that allows only a single line of text;
  • Text: A text entry widget that allows multiline text entry;
  • Frame: A rectangular region used to group related widgets or provide padding between widgets;

 

使用 Label 显示文字

Label widgets 可以用来显示文本和图片。通过 Label widget 显示的内容是无法被用户修改的，这个只是用来作为显示。

在默认情况下，Label widgets 会以系统默认的颜色来进行显示字体颜色和背景颜色，通常情况下会是文字是黑色，背景色是白色。但是我们可以设置不同的颜色。同时，我们也可以设置 label 的大小，使用 width 和 height 来修改 Label 的宽和高。

  1. label = tk.Label(
  2.     text="Hello, Tkinter",
  3.     foreground="white",  # Set the text color to white
  4.     background="#34A2FE",  # Set the background color to black
  5.     width = 10,
  6.     height= 10
  7. )

最终的显示效果如下所示：

Python GUI 工具 tkinter 介绍

我们看到，上面将 width 和 height 都设置为 10，但是最终的形状不是正方形。这是因为这里宽和高都是字符单位。（This is because the width and height are measured in text units.）

  • 一个水平单位的宽度是由「0」的宽度决定的；
  • 一个垂直单位的高度是有「0」的高度决定的；

如果要修改 Label 的中的 text 的内容，可以直接指定 text 来进行修改，下面是一个简单的例子。

  1. self.tmpLabel2['text'] = '修改后的名称'

 

使用 Button 显示可点击按钮

Button 可以用来显示可点击的按钮。他可以在设置用定义一个函数，每当点击这个 Button 都可以触发这个函数。我们可以理解 Button 就是一个可以点击的 Label，创建的方式就和上面创建 Label 的方式是一样的。

  1. button = tk.Button(
  2.     text="Click me!",
  3.     width=25,
  4.     height=5,
  5.     background="blue",
  6.     foreground="yellow",
  7. )

当我们点击此时的 Button 的时候，会有一个动画效果：

Python GUI 工具 tkinter 介绍

 

使用 Entry 获得用户的输入

当我们需要从用户处获得一些文本的时候，例如姓名，或是邮件地址，我们需要使用 Entry 这个组件。他可以显示一个小的文本框，用户可以在其中进行打字。创建 Entry 的方式和上面创建 Label 和 Button 的方式非常的相似。

  1. window = tk.Tk() # 首先对 tkinter 的 Tk 进行实例化，创建一个 windows
  3. label = tk.Label(text="Name")
  4. entry = tk.Entry()
  6. label.pack() # 将 widget 添加到 windows。这里使用 pack 添加
  7. entry.pack()
  9. window.mainloop() # run event loop
Python GUI 工具 tkinter 介绍

我们可以通过下面的三种方式，来丢 Entry 中的内容进行修改和操作：

  1. Retrieving text with .get()，例如上面可以使用 entry.get 来获得 Entry 中的内容。
  2. Deleting text with .delete()，这里 delete 的输入是一个或多个整数。
    1. 若是 entry.delete(0)，则表示删除第一个字符；
    2. 若是 entry.delete(0,4)，则表示删除前四个字符；
    3. 若是 entry.delete(0, tk.END)，则表示删除所有的字符；
  3. Inserting text with .insert()
    1. entry.insert(0, "Python")，在指定位置插入字符；
    2. 我们可以使用 insert 来设置 Entry 的默认的显示内容；

 

使用 Text 获得用户的多行输入

Text widgets 可以用来输入文本，就像上面介绍的 Entry 一样。但是 Entry 和 Text 不同在于，Text可以包含多行的文本。使用 Text，用户可以输入一整个段落。就像 Entry 一样，Text 也有三个主要的功能，分别如下所示，这里的使用与上面的 Entry 会稍有不同：

  1. Retrieve text with .get()
    1. 因为 Text 可以输入多行多列的内容，所以这里 get会有多个参数；
    2. 例如，text_box.get("1.0")，表示 first character on the first line；
    3. 例如，text_box.get("2.4")，表示 the fourth character on the second line；
    4. 例如，text_box.get("1.0", "1.5")，表示第一行的第一个字符到第四个字符（这里 end index 要比最后一个 index 要大 1）。
  2. Delete text with .delete()
    1. 例如，text_box.delete("1.0", tk.END)，表示整个 Text 的框的清空。
  3. Insert text with .insert()
    1. 例如，text_box.insert(tk.END, "\nPut me on a new line!")，表示在末尾添加一个新的一行。

下面我们来使用 Text 来创建一个 Text 来做一个简单的例子。

  1. text_box = tk.Text()
  2. text_box.pack()

这时候默认情况下，使用 Text 会创建出一个更大的空间。

Python GUI 工具 tkinter 介绍

 

使用 Frame 将 Widget 分配到 Frame

Frame widgets 是用来组织我们在一个应用中的 widget 的布局的。（Frame widgets are important for organizing the layout of your widgets in an application.）

首先我们看一下 Frame 是如何工作的，如何可以将 widget 分配给 Frame。下面我们创建一个空的 Frame 并将其分配到主应用程序的窗口。

  1. window = tk.Tk() # 首先对 tkinter 的 Tk 进行实例化，创建一个 windows
  3. frame = tk.Frame()
  4. frame.pack()
  6. window.mainloop() # run event loop

一个空的 Frame 是不可见的。Frame 是其他的组件的容器。你可以分配一个组件到 Frame 中。我们可以创建两个 Label，添加到 Frame 中去。

  1. frame = tk.Frame()
  3. label_a = tk.Label(master=frame, text="I'm in Frame A")
  4. label_b = tk.Label(master=frame, text="I'm in Frame B")
  5. label_a.pack()
  6. label_b.pack()
  8. frame.pack()

上面我们介绍的四个组件，Label, Button, Entry, and Text，都有一个 master 属性。我们可以使用 master 来安排各个组件之间的布局。 Frame 移动之后，Frame 中的所有组件都会一起进行移动。

Python GUI 工具 tkinter 介绍

 

调整 Frame 的外观

Frame widgets 可以通过调整 relief 属性来创建一个 border。relief 可以按照下面的值来进行设置：

  • tk.FLAT: Has no border effect (the default value).
  • tk.SUNKEN: Creates a sunken effect.
  • tk.RAISED: Creates a raised effect.
  • tk.GROOVE: Creates a grooved border effect.
  • tk.RIDGE: Creates a ridged effect.

为了能让 border 有作用，我们需要设置 borderwidth，让他的值大于1。下面我们依次来看一下上面五种不同的效果：

Python GUI 工具 tkinter 介绍

我们对着上面的图像，简单解释一下这五种属性值的不同效果：

  • tk.FLAT creates a frame that appears to be flat.
  • tk.SUNKEN adds a border that gives the frame the appearance of being sunken into the window.
  • tk.RAISED gives the frame a border that makes it appear to protrude from the screen.
  • tk.GROOVE adds a border that appears as a sunken groove around an otherwise flat frame.
  • tk.RIDGE gives the appearance of a raised lip around the edge of the frame.

 

关于组件命名的约定

当我们创建一个组件的时候，我们可以使用任意的名称。但是一个比较好的做法是，我们将组件的名称也设置为与其组件有关的名称。例如，一个 Label 组件是用来显示用户的名称，我们可以使用 label_user_name 来进行命名。

如果不想使用全名，我们可以按照下面的约定使用一些名称的缩写，当然这个也是一种约定，还是以方便阅读代码为主：

Python GUI 工具 tkinter 介绍

 

Tkinter 中的布局介绍

在上面我们使用 pack 来调整 GUI 的布局。（Application layout in Tkinter is controlled with geometry managers）在 Tkinter 中，除了可以使用 pack 来调整 GUI 的布局之外，还有下面的两种方式来进行调整。

  • .place()
  • .grid()

我们会对上面的三种布局进行一一的介绍。实际在使用的时候，还是.grid()的布局方式使用得会更多一些。

 

使用 pack 来进行布局

.pack() uses a packing algorithm to place widgets in a Frame or window in a specified order. For a given widget, the packing algorithm has two primary steps:

  1. Compute a rectangular area called a parcel that's just tall (or wide) enough to hold the widget and fills the remaining width (or height) in the window with blank space.
  2. Center the widget in the parcel unless a different location is specified.

下面简单来看一个 pack 的例子。这里我们在 pack 里设置参数 fill。这个表示 tk.X 表示从水平方向进行填充。需要注意的 pack 会自动把水平的内容全部填充满。

  1. import tkinter as tk
  3. window = tk.Tk() # 首先对 tkinter 的 Tk 进行实例化，创建一个 windows
  5. frame1 = tk.Frame(master=window, height=100, bg="red")
  6. frame1.pack(fill=tk.X)
  8. frame2 = tk.Frame(master=window, height=50, bg="yellow")
  9. frame2.pack(fill=tk.X)
  11. frame3 = tk.Frame(master=window, height=25, bg="blue")
  12. frame3.pack(fill=tk.X)
  14. window.mainloop() # run event loop

可以看到，当我们水平拉伸的时候，会自动填充满。

Python GUI 工具 tkinter 介绍

这里 pack 除了可以水平进行布局之外，还可以垂直进行布局。pack 有下面的一些选项可以选择。

  • tk.TOP
  • tk.BOTTOM
  • tk.LEFT
  • tk.RIGHT

默认情况，是使用tk.TOP来进行布局的。他会将一个新的组件布局到最顶部。例如使用 tk.LEFT 可以将所有的组件，从左到右进行布局。这个时候需要使用 fill=tk.Y，来使得水平方向可以进行填充。

  1. import tkinter as tk
  3. window = tk.Tk() # 首先对 tkinter 的 Tk 进行实例化，创建一个 windows
  5. frame1 = tk.Frame(master=window, width=200, height=100, bg="red")
  6. frame1.pack(fill=tk.Y, side=tk.LEFT)
  8. frame2 = tk.Frame(master=window, width=100, bg="yellow")
  9. frame2.pack(fill=tk.Y, side=tk.LEFT)
  11. frame3 = tk.Frame(master=window, width=50, bg="blue")
  12. frame3.pack(fill=tk.Y, side=tk.LEFT)
  14. window.mainloop() # run event loop

可以看到最终的布局，是从左到右进行布局的。

Python GUI 工具 tkinter 介绍

关于 fill，我们还可以设置 tk.BOTH。同时我们将 expand 设置为 True。（Just like when you set fill=tk.X to make the frames responsive when you resized the window horizontally, you can set fill=tk.Y to make the frames responsive when you resize the window vertically. To make the layout truly responsive, you can set an initial size for your frames using the width and height attributes. Then, set the fill keyword argument of .pack() to tk.BOTH and set the expand keyword argument to True.）

Python GUI 工具 tkinter 介绍

 

使用 place 来进行布局

我们可以使用 place 来控制详细的位置。使用 place 来进行控制的时候，我们必须给出两个参数，分别是 x 和 y，分别表示 x 和 y 的坐标。（Both x and y are measured in pixels, not text units.）

这里 x 和 y 是相对于左上角的位置。x 可以理解为距离窗口左侧的距离，y 可以理解为距离窗口上册的距离。

  1. import tkinter as tk
  3. window = tk.Tk() # 首先对 tkinter 的 Tk 进行实例化，创建一个 windows
  5. frame = tk.Frame(master=window, width=250, height=150)
  6. frame.pack()
  8. label1 = tk.Label(master=frame, text="I'm at (0, 0)", bg="red")
  9. label1.place(x=0, y=0)
  11. label2 = tk.Label(master=frame, text="I'm at (75, 75)", bg="yellow")
  12. label2.place(x=75, y=75)
  14. window.mainloop() # run event loop

下面是简单的使用 place 的效果：

Python GUI 工具 tkinter 介绍

但是.place() 不经常被使用，他有下面两个缺点：

  1. Layout can be difficult to manage with .place(). This is especially true if your application has lots of widgets.
  2. Layouts created with .place() are not responsive. They don't change as the window is resized. (窗口大小改变之后，布局不会改变，不是响应式的)

 

使用 grid 来进行布局

在实际使用之中，.grid() 是经常被使用的。他可以完成所有 .pack() 的工作。.grid() 将一个 window 或是 Frame 分成多个行和列。我们可以指定组件（widget）在具体哪一行，哪一列。下面我们创建一个 3 × 3 的网格，将 Label widgets 放在每一个网格里面。同时，我们可以使用下面两个参数控制 grid 之间的间距。（在 pack 中，同样也有这两个参数，我们在下面的例子中进行说明）

  1. padx adds padding in the horizontal direction.
  2. pady adds padding in the vertical direction.
  1. import tkinter as tk
  3. window = tk.Tk()
  6. for i in range(3):
  7.     for j in range(3):
  8.         frame = tk.Frame(
  9.             master=window,
  10.             relief=tk.RAISED,
  11.             borderwidth=1
  12.         )
  13.         frame.grid(row=i, column=j, padx=5, pady=5)
  14.         label = tk.Label(master=frame, text=f"Row {i}\nColumn {j}")
  15.         label.pack(padx=5, pady=5)
  17. window.mainloop()

在上面的代码中，我们有 9 个 frame，每一个 frame 我们使用 grid 来给出具体的位置。最后将 Label 使用 pack 到 指定的 frame 上面。关于 grid 的使用，可以看下面例子中登录界面的构造。

最后可以出现如下所示的 GUI 界面：

Python GUI 工具 tkinter 介绍

上面的窗口不是自适应的，当我们放大窗口之后，这些 Label 还是在原始的位置。我们可以使用.columnconfigure() 和 .rowconfigure() 来进行窗口的自适应调整。关于这两个方法有下面三个参数可以进行设置：

  1. The index of the grid column or row that you want to configure (or a list of indices to configure multiple rows or columns at the same time)
  2. A keyword argument called weight that determines how the column or row should respond to window resizing, relative to the other columns and rows. 默认 weight 是 0，也就是不会随着窗口的变化而变化。If every column and row is given a weight of 1, then they all grow at the same rate.
  3. A keyword argument called minsize that sets the minimum size of the row height or column width in pixels

为了看出效果，我们只对第一行和第一列进行自适应的设置：

  1. import tkinter as tk
  3. window = tk.Tk()
  5. window.columnconfigure(0, weight=1, minsize=75)
  6. window.rowconfigure(0, weight=1, minsize=50)
  8. for i in range(3):
  9.     for j in range(3):
  10.         frame = tk.Frame(
  11.             master=window,
  12.             relief=tk.RAISED,
  13.             borderwidth=1
  14.         )
  15.         frame.grid(row=i, column=j, padx=5, pady=5)
  16.         label = tk.Label(master=frame, text=f"Row {i}\nColumn {j}")
  17.         label.pack(padx=5, pady=5)
  19. window.mainloop()

最终的效果如下图所示：

Python GUI 工具 tkinter 介绍

如果我们对所有行和列都进行自适应：

  1. import tkinter as tk
  3. window = tk.Tk()
  5. window.columnconfigure(0, weight=1, minsize=75)
  6. window.rowconfigure(0, weight=1, minsize=50)
  8. window.columnconfigure(1, weight=1, minsize=75)
  9. window.rowconfigure(1, weight=1, minsize=50)
  11. window.columnconfigure(2, weight=1, minsize=75)
  12. window.rowconfigure(2, weight=1, minsize=50)
  15. for i in range(3):
  16.     for j in range(3):
  17.         frame = tk.Frame(
  18.             master=window,
  19.             relief=tk.RAISED,
  20.             borderwidth=1
  21.         )
  22.         frame.grid(row=i, column=j, padx=5, pady=5)
  23.         label = tk.Label(master=frame, text=f"Row {i}\nColumn {j}")
  24.         label.pack(padx=5, pady=5)
  26. window.mainloop()

会有如下的效果：

Python GUI 工具 tkinter 介绍

 

进一步理解 gird 布局-固定位置

在 grid 中， 有一个 sticky 的参数，可以设置组件的位置。都可以接受下面的参数：

  • "n" or "N" to align to the top-center part of the cell
  • "e" or "E" to align to the right-center side of the cell
  • "s" or "S" to align to the bottom-center part of the cell
  • "w" or "W" to align to the left-center side of the cell

这里除了可以接受一个参数之外，还可以接受多个字母的组合：

  • You can specify "ns" to force the widget to fill the cell in the vertical direction；
  • You can specify "ew" to fill the cell in the horizontal direction；
  • To fill the entire cell, set sticky to "nsew"；

这里我们创建一个 1 × 4 的网格，来看一下上面的效果：

  1. import tkinter as tk
  3. window = tk.Tk()
  5. window.rowconfigure([0], weight=1, minsize=100)
  6. window.columnconfigure([0, 1, 2, 3], weight=1, minsize=100)
  8. label1 = tk.Label(text="1", bg="black", fg="white")
  9. label2 = tk.Label(text="2", bg="black", fg="white")
  10. label3 = tk.Label(text="3", bg="black", fg="white")
  11. label4 = tk.Label(text="4", bg="black", fg="white")
  13. label1.grid(row=0, column=0, sticky='w')
  14. label2.grid(row=0, column=1, sticky="ew")
  15. label3.grid(row=0, column=2, sticky="ns")
  16. label4.grid(row=0, column=3, sticky="nsew")
  18. window.mainloop()

可以出现下面的效果，其中：

  • Label 1 是靠在左侧；
  • Label 2 是填充了整个的水平的方向；
  • Label 3 是填充了整个垂直的方向；
  • Label 4 是填充满了整个 cell；
Python GUI 工具 tkinter 介绍

 

Tkinter 程序可交互设计

上面我们已经知道了如何创建一个窗口，并且知道了如何添加一些组件，同时来控制整个应用的布局。下面我们会来介绍如何使得这些组件可以进行交互。

Using Events and Event Handlers

当我们使用 Tkinter 的应用的时候，我们会在最后使用 window.mainloop() 来开始 event loop。在 event loop 的时候，我们的应用会检查是否有 event （事件）发生，如果检测到一些事件发生，那么一些代码会执行。在 Tkinter 中，我们写的函数 event handlers 来响应相关的 event。

例如下面是一个简单的例子，我们创建一个函数（event handlers）来处理event。

  1. import tkinter as tk
  3. # Create a window object
  4. window = tk.Tk()
  6. # Create an event handler
  7. def handle_keypress(event):
  8.     """Print the character associated to the key pressed"""
  9.     print(event.char)
  11. # Run the event loop
  12. window.mainloop()

 

.bind() -指定触发条件和触发函数

上面我们定义了一个函数，那么什么时候会调用此函数呢。我们使用 .bind() 来将一个函数与组件进行绑定。例如下面我们将其与 keypress 进行绑定。当我们按下键盘的时候，会进行打印。

  1. import tkinter as tk
  3. window = tk.Tk()
  5. def handle_keypress(event):
  6.     """Print the character associated to the key pressed"""
  7.     print(event.char)
  9. # Bind keypress event to handle_keypress()
  10. window.bind("<Key>", handle_keypress)
  12. window.mainloop()

.bind() 也需要两个参数的输入：

  1. An event that's represented by a string of the form "<event_name>", where event_name can be any of Tkinter's events (一个 Tkinter 中对应的 event，可以理解为触发下面函数的条件。这里是键盘上输入任何字母进行触发)
  2. An event handler that's the name of the function to be called whenever the event occurs (自定义函数的名称)

上面我们将其绑定在 windows 上面。我们也可以将其绑定在任意的组件上面。下面我们将其绑定在 Button 上面。

  1. import tkinter as tk
  3. window = tk.Tk()
  5. def handle_click(event):
  6.     print("The button was clicked!")
  8. button = tk.Button(text="Click me!")
  9. button.bind("<Button-1>", handle_click)
  10. button.pack()
  12. window.mainloop()

我们这里使用 "<Button-1>" 进行触发函数。这里 "<Button-1>" 表示鼠标左键点击。关于鼠标的 event 有以下几个：

  • "<Button-1>" for the left mouse button.
  • "<Button-2>" for the middle mouse button.
  • "<Button-3>" for the right mouse button.

关于更多的 event，可以查看下面的链接，Tkinter 8.5 reference: a GUI for Python

 

command的使用-Button 触发

每一个 Button 组件有一个 command 的属性，我们可以指定一个函数。每当这个按钮被点击的时候，这个函数都会被触发。

下面我们创建一个小的应用。一个窗口中间有一个数字，左侧和右侧都有一个 Button，点击左侧的按钮，中间的数字减一，点击右侧的按钮，中间的数字加一。

我们首先做出窗口的样子：

  1. import tkinter as tk
  3. window = tk.Tk()
  5. window.rowconfigure(0, minsize=50, weight=1)
  6. window.columnconfigure([0, 1, 2], minsize=50, weight=1)
  8. btn_decrease = tk.Button(master=window, text="-")
  9. btn_decrease.grid(row=0, column=0, sticky="nsew")
  11. lbl_value = tk.Label(master=window, text="0")
  12. lbl_value.grid(row=0, column=1)
  14. btn_increase = tk.Button(master=window, text="+")
  15. btn_increase.grid(row=0, column=2, sticky="nsew")
  17. window.mainloop()

效果图如下所示：

Python GUI 工具 tkinter 介绍

下面我们给这两个 Button 设置相应的函数，这里的函数需要有两个功能：

  • 获得 Label 的值；
  • 修改 Label 的值；

首先我们看一下加号按键函数的定义，每次点击加号，Label 数字都会增加1。

  1. def increase():
  2.     value = int(lbl_value["text"])
  3.     lbl_value["text"] = f"{value + 1}"

同样，减号也可以使用同样方式来进行定义：

  1. def decrease():
  2.     value = int(lbl_value["text"])
  3.     lbl_value["text"] = f"{value - 1}"

在定义好这两个函数之后，我们需要将其与 Button 进行绑定。直接在 Button 上使用 command 即可。

  1. btn_decrease = tk.Button(master=window, text="-", command=decrease)
  2. btn_increase = tk.Button(master=window, text="+", command=increase)

最后的效果如下所示：

Python GUI 工具 tkinter 介绍

最终完整的代码如下所示：

  1. import tkinter as tk
  3. window = tk.Tk()
  5. def increase():
  6.     value = int(lbl_value["text"])
  7.     lbl_value["text"] = f"{value + 1}"
  9. def decrease():
  10.     value = int(lbl_value["text"])
  11.     lbl_value["text"] = f"{value - 1}"
  13. window.rowconfigure(0, minsize=50, weight=1)
  14. window.columnconfigure([0, 1, 2], minsize=50, weight=1)
  16. btn_decrease = tk.Button(master=window, text="-", command=decrease)
  17. btn_decrease.grid(row=0, column=0, sticky="nsew")
  20. lbl_value = tk.Label(master=window, text="0")
  21. lbl_value.grid(row=0, column=1)
  23. btn_increase = tk.Button(master=window, text="+", command=increase)
  24. btn_increase.grid(row=0, column=2, sticky="nsew")
  26. window.mainloop()

 

获得坐标

我们可以使用 x.event 或是 y.event 来获得当前窗口的坐标，但是如果我们在 canvas 中有滚动的时候（scroll down），上面只能获得相对的位置。我们需要使用下面的方法来获得绝对的位置。

  1. x = canvas.canvasx(event.x)
  2. y = canvas.canvasy(event.y)

参考资料，Python, Tkinter: How to get coordinates on scrollable canvas

 

 

使用 Tkinter 完成一个文本编辑器

在这一部分我们会编辑一个文本编辑器，包含创建，打开，编辑和保存 text files 的功能。这个文本编辑器有下面的三个主要的元素：

  1. A Button widget called btn_open for opening a file for editing
  2. A Button widget called btn_save for saving a file
  3. A TextBox widget called txt_edit for creating and editing the text file

这三个部分的分布如下图所示，两个 Button 安排在 window 的左侧，一个 text box 在 window 的右侧（一些其他详细的要求，The whole window should have a minimum height of 800 pixels, and txt_edit should have a minimum width of 800 pixels. The whole layout should be responsive so that if the window is resized, then txt_edit is resized as well. The width of the Frame holding the buttons should not change, however.）：

Python GUI 工具 tkinter 介绍

应用布局的设计

为了设置窗口的窗口的最小大小，我们在.rowconfigure() 和 .columnconfigure() 设置最小值 800。为了使得窗口是响应式的，我们设置  weight 的值是1。下面是关于布局部分的代码：

  1. import tkinter as tk
  3. window = tk.Tk()
  4. window.title("Simple Text Editor")
  6. window.rowconfigure(0, minsize=800, weight=1) # 设置第一行的高度是800
  7. window.columnconfigure(1, minsize=800, weight=1) # 设置第一列的宽度是800
  9. # 定义右侧文本输入区域
  10. txt_edit = tk.Text(window)
  12. # 定义左侧的按钮区域
  13. fr_buttons = tk.Frame(window)
  14. btn_open = tk.Button(master=fr_buttons, text="Open")
  15. btn_save = tk.Button(master=fr_buttons, text="Save As...")
  17. # -------- GUI ---------
  18. fr_buttons.grid(row=0, column=0, sticky="ns") # 设置按钮的布局
  19. txt_edit.grid(row=0, column=1, sticky="nsew") # 设置文本编辑框的布局
  21. btn_open.grid(row=0, column=0, sticky='ew', padx=5, pady=5)
  22. btn_save.grid(row=1, column=0, sticky='ew', padx=5, pady=5)
  24. window.mainloop()

在上面代码中，我们首先定义了不同的组件，接着我们定义了组件之间的布局。最终的效果图如下所示：

Python GUI 工具 tkinter 介绍

打开文件功能的设计

在完成了上面的布局的设计之后，我们需要设计一些功能。首先我们定义一个打开文件的功能，这个需要可以打开一个对话框，可以使得用户进行文件的选择。下面是一个打开文件部分的代码：

  1. 首先调用 askopenfilename 来显示文件选择的对话框；
  2. 接着确认用户是否选择了对应的文件，还是把选择的对话框关闭了；
  3. 在打开文件之前，会对编辑区域的所有内容进行清空；
  4. 接着打开文件，把文件的所有内容插入到编辑器中；
  1. from tkinter.filedialog import askopenfilename
  3. def open_file():
  4.     """Open a file for editing."""
  5.     filepath = askopenfilename(
  6.         filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")]
  7.     )
  8.     if not filepath: # 判断用户是否选择了文件
  9.         return
  10.     txt_edit.delete("1.0", tk.END)  # 清空当前的区域
  11.     with open(filepath, "r") as input_file:
  12.         text = input_file.read()
  13.         txt_edit.insert(tk.END, text)
  14.     window.title(f"Simple Text Editor - {filepath}")

最后将此函数与上面的 Button 进行绑定即可。

  1. btn_open = tk.Button(master=fr_buttons, text="Open", command=open_file)

 

文件保存功能的设计

下面我们设计保存文件的 Button。这个需要也需要打开一个文件的对话框，用户选择哪里进行保存。这个可以使用 tkinter.filedialog 中的 asksaveasfilename 来完成。接着，这个方法需要提取 txt_edit 中的文字内容，将其保存到指定的文件中。

  1. def save_file():
  2.     """Save the current file as a new file."""
  3.     filepath = asksaveasfilename(
  4.         defaultextension="txt",
  5.         filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")],
  6.     )
  7.     if not filepath:
  8.         return
  9.     with open(filepath, "w") as output_file:
  10.         text = txt_edit.get("1.0", tk.END)
  11.         output_file.write(text)
  12.     window.title(f"Simple Text Editor - {filepath}")

同样，我们也要将这个函数绑定到指定的 Button 中去。

  1. btn_save = tk.Button(master=fr_buttons, text="Save As...", command=save_file)

 

文本编辑器完整操作

下面是上面介绍的文本编辑器完整的代码：

  1. import tkinter as tk
  2. from tkinter.filedialog import askopenfilename, asksaveasfilename
  4. def open_file():
  5.     """Open a file for editing."""
  6.     filepath = askopenfilename(
  7.         filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")]
  8.     )
  9.     if not filepath: # 判断用户是否选择了文件
  10.         return
  11.     txt_edit.delete("1.0", tk.END)
  12.     with open(filepath, "r") as input_file:
  13.         text = input_file.read()
  14.         txt_edit.insert(tk.END, text)
  15.     window.title(f"Simple Text Editor - {filepath}")
  17. def save_file():
  18.     """Save the current file as a new file."""
  19.     filepath = asksaveasfilename(
  20.         defaultextension="txt",
  21.         filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")],
  22.     )
  23.     if not filepath:
  24.         return
  25.     with open(filepath, "w") as output_file:
  26.         text = txt_edit.get("1.0", tk.END)
  27.         output_file.write(text)
  28.     window.title(f"Simple Text Editor - {filepath}")
  30. window = tk.Tk()
  31. window.title("Simple Text Editor")
  33. window.rowconfigure(0, minsize=800, weight=1) # 设置第一行的高度是800
  34. window.columnconfigure(1, minsize=800, weight=1) # 设置第一列的宽度是800
  36. # 定义右侧文本输入区域
  37. txt_edit = tk.Text(window)
  39. # 定义左侧的按钮区域
  40. fr_buttons = tk.Frame(window)
  41. btn_open = tk.Button(master=fr_buttons, text="Open", command=open_file)
  42. btn_save = tk.Button(master=fr_buttons, text="Save As...", command=save_file)
  44. # -------- GUI ---------
  45. fr_buttons.grid(row=0, column=0, sticky="ns") # 设置按钮的布局
  46. txt_edit.grid(row=0, column=1, sticky="nsew") # 设置文本编辑框的布局
  48. btn_open.grid(row=0, column=0, sticky='ew', padx=5, pady=5)
  49. btn_save.grid(row=1, column=0, sticky='ew', padx=5, pady=5)
  51. window.mainloop()

最后我们看一下完整的操作流程，这里包括输入文字，保存文件，打开文件：

Python GUI 工具 tkinter 介绍

 

更多关于 tkinter

ImportError: No module named 'Tkinter'

需要安装如下的内容即可：

  1. sudo apt-get install python3-tk

 

设置窗口大小和固定窗口大小

有的时候我们不需要程序是可以自适应窗口大小的，我们可以直接将窗口大小进行固定，如下所是：

  1. mw.geometry("500x500") #You want the size of the app to be 500x500
  2. mw.resizable(0, 0) #Don't allow resizing in the x or y direction

 

Tkinter 更加现代化的界面

直接使用 tkinter 的界面会比较原始，我们可以使用 CustomTkinter 使其变得「现代化」一些。真的是只有一些。

CustomTkinter的大部分用法与 tkinter 是一样的，我们只需要使用他定义好的组件即可。详细的内容可以参考仓库说明，Github-CustomTkinter。

  • 微信公众号
  • 关注微信公众号
  • weinxin
  • QQ群
  • 我们的QQ群号
  • weinxin
王 茂南
  • 本文由 发表于 2021年7月23日07:45:32
  • 转载请务必保留本文链接：https://mathpretty.com/13025.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: