跳转至

§3.2 功能类控件

字数 1952 个   代码 111 行   图片 40 张   阅读时间 8 分钟   访问量

一、功能类控件简述

1.1 什么是功能类控件

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

目前 maliang 内置的功能类控件有 Button、Switch、ToggleButton、CheckBox、RadioBox、UnderlineButton、HighlightButton、IconButton、Slider、SegmentedButton 和 OptionButton。

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

1.2 与信息类控件的差异

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

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

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

二、功能类控件详述

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

2.1 Button

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

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

1
2
3
4
5
6
7
8
9
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

maliang.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 maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

maliang.Switch(cv, (20, 20), command=print)
maliang.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 maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

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

root.mainloop()

效果如下：

图3 开关按钮控件

图3 开关按钮控件

2.4 CheckBox

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

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

root.mainloop()

效果如下：

图4 复选框控件

图4 复选框控件

2.5 RadioBox

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

下面是一个简单的示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

rb1 = maliang.RadioBox(cv, (20, 20), command=print)
maliang.Text(cv, (60, 35), text="RadioBox", anchor="w")
rb2 = maliang.RadioBox(cv, (20, 120), command=print, default=True)
maliang.Text(cv, (60, 135), text="RadioBox", anchor="w")

maliang.RadioBox.group(rb1, rb2)#(1)!

root.mainloop()

  1. 实际上你也可以这样写：

    rb1.group(rb2)

效果如下：

图5 单选框控件

图5 单选框控件

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

2.6 Slider

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

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

1
2
3
4
5
6
7
8
9
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

maliang.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 maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

maliang.SegmentedButton(cv, (20, 20), text=("Option 1", "Option 2", "Option 3"))

root.mainloop()

效果如下：

图7 分段按钮控件

图7 分段按钮控件

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

2.8 OptionButton

选项按钮控件，相当于折叠版的 SegmentedButton。它和 SegmentedButton 一样，只不过它的内容只有在点击按钮时才会展示出来，选择内容之后又会消失。

下面是一个简单的示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

maliang.OptionButton(cv, (20, 100), text=("Option 1", "Option 2", "Option 3"))
maliang.OptionButton(cv, (200, 100), text=("Option 1", "Option 2", "Option 3"))

root.mainloop()

效果如下：

图8 选项按钮控件

图8 选项按钮控件

三、典型自定义控件

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

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

特别注意：可能的变动

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

3.1 UnderlineButton

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

下面是一个简单的示例：

1
2
3
4
5
6
7
8
9
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

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

root.mainloop()

效果如下：

图9 下划线按钮控件

3.2 HighlightButton

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

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

下面是一个简单的示例：

1
2
3
4
5
6
7
8
9
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

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

root.mainloop()

效果如下：

图10 高亮按钮控件

3.3 IconButton

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

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

1
2
3
4
5
6
7
8
9
import maliang

root = maliang.Tk()
cv = maliang.Canvas(auto_zoom=True)
cv.place(width=1280, height=720)

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

root.mainloop()

效果如下：

图11 图标按钮控件

图11 图标按钮控件