跳转至

§3.2 功能类控件

字数 1843 个   代码 98 行   图片 36 张   阅读时间 7 分钟   访问量

一、功能类控件简述

1.1 什么是功能类控件

从名字上就可以看出，它们是自带了一定功能的控件，相比于信息类控件，它们除了可以展示一定的信息之外，还可以通关相关互动改变相应的信息。

目前 tkt 内置的功能类控件有 Button、Switch、ToggleButton、CheckButton、RadioButton、UnderlineButton、HighlightButton、IconButton、Slider 和 SegmentedButton。

虽然看起来很多，但在后续章节中学习了自定义控件后，我们将会了解到实际上其中有很多的类都是大同小异的。

1.2 与信息类控件的差异

功能类控件与信息类控件最大的差异就是，其功能类 Feature 的复杂度不同，有些信息类控件，如 Text 和 Image，甚至都没有功能类，也就是说，它们不具备任何交互。可以说，功能类控件的核心就是其功能类。

猜你想问：什么是功能类 Feature ？

在前面的选读章节 §1.3 框架概述 中有提到，tkt 的一个控件由四大基础部分组成，即 Shape、Image、Text 和 Feature。它们分别负责图形部分、图像部分、文本部分和功能部分。

二、功能类控件详述

下面的都是经典的基本控件，在各大 UI 框架都能见到它们的身影，而这里是 tkt 对它们的一个简单实现。

2.1 Button

Button 是按钮控件，可以用于执行某些函数。

下面是一个简单的示例，创建了一个文本内容为 "Button"，且在点击后会在终端输出 "Click" 的按钮：

1
2
3
4
5
6
7
8
9
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.Button(cv, (20, 20), text="Button", command=lambda: print("Click"))

root.mainloop()

效果如下：

图1 按钮控件

图1 按钮控件

2.2 Switch

Switch 是开关控件，既可以直观地看到状态，又可以直接操作来改变状态。我们可以使用其 get 和 set 方法来获取和设置其状态。

下面的示例创建了两个开关控件，并给它们绑定了函数 print，当它被点击时会在终端输出当前的状态：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.Switch(cv, (20, 20), command=print)
tkt.Switch(cv, (120, 20), command=print, default=True)

root.mainloop()

效果如下：

图2 开关控件

图2 开关控件

特别注意：default 参数和 set 方法

我们查阅文档可以注意到，开关控件包含一个名为 default 的初始化参数，可以设定其初始状态。于是我们可以使用两种方式来设置开关控件的初始状态，其一是利用 default 参数，其二是利用 set 方法。

若没有指定 set 方法的 callback 参数，那么这两种方式并没有差异。当 callback 被设置为 True，那么调用 set 方法的同时将调用控件绑定的关联函数，不管当前状态与设置的是否相同。反之，则只会改变控件的外观和状态，且仅在修改的状态与当前不同时执行。

后面有许多控件也有类似的设定，就不再赘述。

2.3 ToggleButton

ToggleButton 被称为开关按钮控件，它本质和上面的开关控件一样，只是外观不同罢了。

下面是一个简单的示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.ToggleButton(cv, (20, 20), text="ToggleButton", command=print)
tkt.ToggleButton(cv, (20, 120), text="ToggleButton", command=print, default=True)

root.mainloop()

效果如下：

图3 开关按钮控件

图3 开关按钮控件

2.4 CheckButton

CheckButton 是复选框控件，但 tkt 的复选框控件可能和其它 UI 框架里面的复选框控件不同，其它的 UI 框架的复选框一般都是带文本的，但 tkt 的复选框真的就只有一个框。这样用户可以灵活放置复选框对应文本的位置。

下面的示例是复选框配上文本控件的效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.CheckButton(cv, (20, 20), command=print)
tkt.Text(cv, (60, 35), text="CheckButton", anchor="w")
tkt.CheckButton(cv, (20, 120), command=print, default=True)
tkt.Text(cv, (60, 135), text="CheckButton", anchor="w")

root.mainloop()

效果如下：

图4 复选框控件

图4 复选框控件

2.5 RadioButton

与复选框控件对应的就是 RadioButton 单选框控件，与复选框控件类似，但是它的目前情况有些尴尬，因为无法判断哪些单选框是绑定在一起的，所以需要用户自己去绑定相关函数来完成单选框的功能。目前单选框只提供了一个外观，说简单点就是存在一定问题，有待优化。

下面是一个简单的示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.RadioButton(cv, (20, 20), command=print)
tkt.Text(cv, (60, 35), text="RadioButton", anchor="w")
tkt.RadioButton(cv, (20, 120), command=print, default=True)
tkt.Text(cv, (60, 135), text="RadioButton", anchor="w")

root.mainloop()

效果如下：

图5 单选框控件

图5 单选框控件

如果觉得单选框这个不好操作，可以尝试选择使用功能类似的分段按钮控件。

2.6 Slider

Slider 滑动条控件，用于直观的调整处在某个范围的数据，并实时地看到反馈。

下面这个示例就可以在调节的同时在终端看到当前滑动条的值：

1
2
3
4
5
6
7
8
9
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.Slider(cv, (20, 20), default=0.5, command=print)

root.mainloop()

效果如下：

图6 滑动条控件

图6 滑动条控件

2.7 SegmentedButton

分段按钮控件，某些情况下可以作为单选框控件的平替。作用和单选框控件类似，只是外观不大相同，这里就不再赘述。

下面是一个简单的示例：

1
2
3
4
5
6
7
8
9
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.SegmentedButton(cv, (20, 20), texts=("Option 1", "Option 2", "Option 3"))

root.mainloop()

效果如下：

图7 分段按钮控件

图7 分段按钮控件

除了上面的示例代码演示的效果之外，我们还可以尝试设置分段按钮控件的其它参数，如将参数 layout 设置为 "vertical"，你就可以得到一个纵向布局的分段按钮控件。

三、典型自定义控件

下面的这些控件属于对 Button 的一个二次修改得到的，属于简单自定义控件，比较典型，这里单独拿出来说明。

不过这里不会详述它们是怎么自定义出来的，只是在这里做一个分类，把它们当作和其它控件一样普通的控件就行。关于自定义控件，后续章节会做详细讲解。

特别注意：可能的变动

下面的这三个控件不属于基本的控件，在 tkt 正式版后可能会被移动到 tkt 控件扩展包！tkt 自身应只包括标准的基本控件，而非主流的控件应被单独成为一个包，以免过多不常用的控件的代码及其样式数据占用了空间。

3.1 UnderlineButton

此控件是为了实现网页链接那样的效果而做的，一般搭配文本控件来使用。

下面是一个简单的示例：

1
2
3
4
5
6
7
8
9
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.UnderlineButton(cv, (20, 20), text="UnderlineButton", anchor="nw")

root.mainloop()

效果如下：

图8 下划线按钮控件

3.2 HighlightButton

bug：字体大小缩放在窗口缩放后表现不正常

此控件单纯只是自定义控件的一个演示，存在一定的问题，不过具有一定的参考意义。

下面是一个简单的示例：

1
2
3
4
5
6
7
8
9
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.HighlightButton(cv, (20, 20), text="HighlightButton", anchor="nw")

root.mainloop()

效果如下：

图9 高亮按钮控件

3.3 IconButton

IconButton 是图标按钮控件，它本质上是一个便捷类，可以十分方便地将图标和文本融合到一个按钮里面。

下面是一个简单的示例，这个示例中使用到的图片仍是 tkt 的 Logo，你也可以使用自己的图片文件：

1
2
3
4
5
6
7
8
9
import tkintertools as tkt

root = tkt.Tk()
cv = tkt.Canvas(root, zoom_item=True)
cv.place(width=1280, height=720)

tkt.IconButton(cv, (20, 20), text="IconButton", image=tkt.PhotoImage(file="./logo.png").resize(32, 32))

root.mainloop()

效果如下：

图10 图标按钮控件

图10 图标按钮控件