在 Go 中使用 Tk 构建 GUI
By Yunjin Lee
views ...
Python 内置了 Tkinter 等 GUI 库。近期，Go 语言也开发了 CGo-Free, Cross Platform Tk 库，以便在 Go 语言中使用 Tcl/Tk。今天我们将探讨其基础用法。
构建 Hello, Tk
首先，我们从一个简单的“Hello, TK!”示例开始。
1package main
2
3import tk "modernc.org/tk9.0"
4
5func main() {
6 tk.Pack(
7 tk.TButton(
8 tk.Txt("Hello, TK!"),
9 tk.Command(func() {
10 tk.Destroy(tk.App)
11 })),
12 tk.Ipadx(10), tk.Ipady(5), tk.Padx(15), tk.Pady(10),
13 )
14 tk.App.Wait()
15}
我们将仔细研究上述示例代码和执行结果。
如果您有使用 Python Tk 的经验，您将理解小部件被打包到窗口内或直接打包到窗口下级的结构。根据小部件的类型，其中可能包含标签等。
Ipadx 和 Ipady 是 Internal padding 的缩写，用于调整内部小部件的边距。在此示例中，按钮的边距得到了调整。
该库中存在一个 Window 结构体，并且一个名为 App 的变量管理着最顶层窗口。这在库内部已预先定义。因此，tk.App.Destroy() 函数负责关闭最顶层窗口，从而终止 tk.App.Wait()。
现在，我们将查看 GitLab _examples 文件夹中的几个示例。
处理 SVG 文件
以下是将 SVG 文件显示在 Label 小部件中的示例。
1package main
2
3import . "modernc.org/tk9.0"
4
5// https://en.wikipedia.org/wiki/SVG
6const svg = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
7<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
8<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
9<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
10<g opacity="0.8">
11 <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
12 <circle cx="125" cy="125" r="75" fill="orange" />
13 <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
14 <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
15</g>
16</svg>`
17
18func main() {
19 Pack(Label(Image(NewPhoto(Data(svg)))),
20 TExit(),
21 Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
22 App.Center().Wait()
23}
该库处理 SVG 的方式如下：
- 将 SVG 文件的内容读取为字符串（或像上述示例那样直接包含）。
- 将此内容传递给 Data 函数，将其转换为包含选项的字符串（-data 选项）。
- 转换后的字节值传递给 NewPhoto 函数，返回表示 Tcl/Tk 图像的 Img 结构体指针。
- 经过 Image 函数后，Img 结构体指针转换为添加了 -Image 选项的字符串。
- 将结构体 RAW 值转换为字符串的原因是为了创建 Label 小部件。
ICO 和 PNG 文件也以类似的方式处理。
处理 PNG 文件
1package main
2
3import _ "embed"
4import . "modernc.org/tk9.0"
5
6//go:embed gopher.png
7var gopher []byte
8
9func main() {
10 Pack(Label(Image(NewPhoto(Data(gopher)))),
11 TExit(),
12 Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
13 App.Center().Wait()
14}
PNG 文件的处理过程如下：
- 将嵌入的 gopher.png 转换为包含选项的字符串类型。
- 通过 NewPhoto 函数将其转换为 *Img 类型。
- 经过 Image 函数，转换为 RAW 字符串后，作为 Label 小部件创建。
ICO 文件也以相同的方式处理，与 SVG 格式的区别仅在于 Data 函数的内部处理方式。
现在我们来探讨一下“包含选项的字符串”的本质：
1type rawOption string
前面提到的包含选项的字符串仅仅是格式化后的字符串。
1func (w *Window) optionString(_ *Window) string {
2 return w.String()
3}
optionString 方法是 Window 指针的一个方法，它返回一个字符串。
最后，我们简要探讨 Data 函数的内部结构：
1func Data(val any) Opt {
2 switch x := val.(type) {
3 case []byte:
4 switch {
5 case bytes.HasPrefix(x, pngSig):
6 // ok
7 case bytes.HasPrefix(x, icoSig):
8 b := bytes.NewBuffer(x)
9 img, err := ico.Decode(bytes.NewReader(x))
10 if err != nil {
11 fail(err)
12 return rawOption("")
13 }
14
15 b.Reset()
16 if err := png.Encode(b, img); err != nil {
17 fail(err)
18 return rawOption("")
19 }
20
21 val = b.Bytes()
22 }
23 }
24 return rawOption(fmt.Sprintf(`-data %s`, optionString(val)))
25}
从代码可以看出，对于 ICO 或 PNG 文件，需要进行编码/解码过程。除此之外，在没有特殊转换的情况下，仅将 -data 选项添加到转换为字节类型的字符串中，以表明其是 Data 函数的输出。
通过菜单小部件加载图像
在之前练习的 PNG、ICO 加载示例中添加菜单小部件，可以创建一个显示所需图像的应用程序。
首先，我们来看一个简单的菜单小部件示例。
1package main
2
3import (
4 "fmt"
5 . "modernc.org/tk9.0"
6 "runtime"
7)
8
9func main() {
10 menubar := Menu()
11
12 fileMenu := menubar.Menu()
13 fileMenu.AddCommand(Lbl("New"), Underline(0), Accelerator("Ctrl+N"))
14 fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func() { GetOpenFile() }))
15 Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(1) }))
16 fileMenu.AddCommand(Lbl("Save As..."), Underline(5))
17 fileMenu.AddSeparator()
18 fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
19 Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(4) }))
20 menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
21
22 App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
23 App.Configure(Mnu(menubar), Width("8c"), Height("6c")).Wait()
24}
在此示例中，我们尝试了菜单栏和菜单的创建、文本高亮、Command 选项、快捷键绑定以及应用程序窗口的初始大小设置。
现在，我们将修改 GetOpenFile 指定的 Command 函数，以创建一个加载并显示图像的程序。
程序编写计划如下：
- 仅允许打开 PNG 和 ICO 文件
- 处理文件对话框中选择的文件
- 实现图像显示的小部件
以下是反映这些计划的代码：
1package main
2
3import (
4 "fmt"
5 "log"
6 "os"
7 "runtime"
8 "strings"
9
10 . "modernc.org/tk9.0"
11)
12
13func handleFileOpen() {
14 s := GetOpenFile()
15 for _, photo := range s {
16 formatCheck := strings.Split(photo, ".")
17 format := formatCheck[len(formatCheck)-1]
18
19 if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) {
20 picFile, err := os.Open(photo)
21 if err != nil {
22 log.Println("Error while opening photo, error is: ", err)
23 }
24
25 pictureRawData := make([]byte, 10000*10000)
26 picFile.Read(pictureRawData)
27
28 imageLabel := Label(Image(NewPhoto(Data(pictureRawData))))
29 Pack(imageLabel,
30 TExit(),
31 Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
32 }
33 picFile.Close()
34 }
35}
36
37func main() {
38 menubar := Menu()
39
40 fileMenu := menubar.Menu()
41 fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(handleFileOpen))
42 Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(0) }))
43 fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
44 Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(1) }))
45 menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
46
47 App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
48 App.Configure(Mnu(menubar), Width("10c"), Height("10c")).Wait()
49}
上述代码按以下方式运行：
- 使用 strings 包的字符串比较函数检查文件扩展名。
- 使用 os 包打开、读取并关闭文件。
- 读取的图像将显示为 Label 小部件。
总结
本文探讨了如何利用 Go 语言的 Tcl/Tk 库实现以下内容：
- GUI 应用程序的基本结构
- SVG、PNG、ICO 等多种图像格式的处理
- 小部件的打包和布局管理
- 图像数据处理结构
- 快捷键绑定和小部件命令
Go 语言与 Tcl/Tk 结合使用，可以创建简单而实用的 GUI 程序。在此基础上，您可以尝试开发更复杂的 GUI 应用程序。