Tcl/Tk 小部件

最后修改于 2023 年 10 月 18 日

在本 Tcl/Tk 教程中，我们将介绍一些基本的 Tk 小部件。我们有一个 checkbutton（复选框）、label（标签）、scale（滑块）和 listbox（列表框）小部件的示例。

小部件是 GUI 应用程序的基本构建块。多年来，一些小部件已成为所有操作系统平台上所有工具包的标准。例如，按钮、复选框或滚动条。其中一些可能具有不同的名称。例如，复选框在 Tk 中被称为复选按钮。Tk 有一小组小部件，涵盖了基本的编程需求。更专业的小部件可以作为自定义小部件创建。

复选按钮

checkbutton（复选按钮）是一个具有两种状态的小部件：开启和关闭。开启状态由一个复选标记可视化。它用于表示某个布尔属性。checkbutton 小部件提供一个带有文本标签的复选框。

check_button.tcl

#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# This program toggles the title of the
# window with the checkbutton widget.
#
# Author: Jan Bodnar
# Website: www.zetcode.com


frame .fr
pack .fr -fill both -expand 1
checkbutton .fr.cb -text "Show title" -command onClick  \
    -onvalue true -offvalue false -variable selected
.fr.cb select 
place .fr.cb -x 50 -y 50 

proc onClick {} {

    global selected

    if {$selected==true} {
    
        wm title . checkbutton
    } else {
        wm title . ""
    }
}


wm title . checkbutton
wm geometry . 350x250+300+300

在我们的示例中，我们在窗口上放置一个复选按钮。复选按钮显示/隐藏窗口的标题。

checkbutton .fr.cb -text "Show title" -command onClick  \
    -onvalue true -offvalue false -variable selected

checkbutton 命令创建一个复选按钮小部件。-text 选项指定小部件显示的文本。当我们点击小部件时，onClick 过程被执行。当 checkbutton 被选中时，selected 变量的值为 true。否则，它的值为 false。

.fr.cb select

最初，标题显示在标题栏中。所以在开始时，我们使用 select 命令使小部件被选中。

place .fr.cb -x 50 -y 50

我们将复选按钮小部件放置在框架上，坐标为 x=50 和 y=50。

if {$selected==true} {

    wm title . checkbutton
} else {
    wm title . ""
}

在 onClick 过程中，我们根据 selected 变量显示或隐藏标题。

#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we use a label
# widget to show an image.
#
# Author: Jan Bodnar
# Website: www.zetcode.com

package require Img


frame .fr
pack .fr
image create photo img -file "tatras.jpg"
label .fr.lbl -image img
pack .fr.lbl

wm title . label
wm geometry . +300+300

我们的示例在窗口上显示一个图像。

package require Img

默认情况下，label 小部件只能显示一组有限的图像类型。要显示 JPG 图像，我们必须使用 Img 包。

image create photo img -file "tatras.jpg"

我们从文件系统上的图像创建一个照片图像。

label .fr.lbl -image img

photoimage 被提供给标签小部件的 image 参数。

pack .fr.lbl

图像被打包到框架中。

wm geometry . +300+300

我们指定 x 和 y 坐标。这些用于在屏幕上定位一个窗口。我们省略了窗口的大小。打包管理器会将窗口大小设置为图像的大小。

滑块

scale（滑块）是一个小部件，允许用户通过在有界间隔内滑动旋钮来图形化地选择一个值。我们的例子将在标签小部件中显示一个选定的数字。

scale.tcl

#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we show how to
# use the scale widget.
#
# Author: Jan Bodnar
# Website: www.zetcode.com


frame .fr
pack .fr -fill both -expand 1

scale .fr.scl -orient horizontal -from 0 -to 100 \
    -length 150  -variable val -showvalue 0
place .fr.scl -x 50 -y 50 

label .fr.lbl -textvariable val
place .fr.lbl -x 80 -y 110

wm title . scale
wm geometry . 350x250+300+300

在上面的脚本中，我们有两个小部件。一个滑块和一个标签。滑块小部件的值显示在标签小部件中。

scale .fr.scl -orient horizontal -from 0 -to 100 \
    -length 150  -variable val -showvalue 0

创建了 scale 小部件。-orient 选项使小部件水平。我们使用 -from 和 -to 选项提供下限和上限。当前选择的数字存储在 val 变量中。默认情况下，滑块小部件也显示选定的数字。使用 -showvalue 选项，我们隐藏它。

label .fr.lbl -textvariable val

创建了一个 label（标签）小部件。它将显示前面提到的 val 变量。

列表框

listbox（列表框）是一个显示对象列表的小部件。它允许用户选择一个或多个项目。

listbox.tcl

#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we show how to
# use the listbox widget.
#
# Author: Jan Bodnar
# Website: www.zetcode.com


frame .fr
pack .fr -fill both -expand 1

listbox .fr.lb 
.fr.lb insert end "Scarlett Johansson" "Rachel Weiss" "Winona Ryder" \
    "Jessica Alba" 

bind .fr.lb <<ListboxSelect>> { setLabel [%W curselection]}

place .fr.lb -x 20 -y 20 

label .fr.lbl 
place .fr.lbl -x 20 -y 210

wm title . listbox
wm geometry . 350x250+300+300

proc setLabel { idx } {

    set val [.fr.lb get $idx]
    .fr.lbl configure -text $val

}

在我们的示例中，我们在 listbox 中显示一个女演员列表。当前选择的女演员显示在标签小部件中。

listbox .fr.lb

使用 listbox 命令创建一个 listbox（列表框）小部件。

.fr.lb insert end "Scarlett Johansson" "Rachel Weiss" "Winona Ryder" \
    "Jessica Alba"

在这里，我们将四个女演员插入到小部件中。

bind .fr.lb <<ListboxSelect>> { setLabel [%W curselection]}

当我们选择列表框中的一个项目时，会生成 <<ListboxSelect>> 事件。我们将 setLabel 过程绑定到此事件。我们还向该过程发送一个参数。当前选定值的索引。%W curselection 返回索引。%W 是相关小部件的句柄，curselection 是在该小部件上执行的命令。

proc setLabel { idx } {

    set val [.fr.lb get $idx]
    .fr.lbl configure -text $val

}

在 setLabel 过程中，我们根据我们获得的索引找出值。该值稍后会显示在标签小部件中。

在本 Tcl/Tk 教程中，我们介绍了几个 Tk 小部件。

电子书

Tcl/Tk 小部件

复选按钮

标签

滑块

列表框