---
id: 974f36e12dfcece861bfda1af9303980
author: Yunjin Lee
title: 'Implementace GUI v Go bez CGo pomocí Tcl/Tk (modernc.org/tk9.0): zarovnání widgetů a vykreslování obrázků'
description: Implementace vytváření oken, rozmísťování widgetů tlačítek a panelu nabídek a vykreslování obrázků SVG/PNG/ICO v jazyce Go pomocí cross-platformní knihovny modernc.org/tk9.0, která nevyžaduje závislosti na CGo.
language: cs
date: 2024-10-22T11:51:27.614782351Z
path: /blog/posts/creating-a-gui-with-tk-in-go-z004dd008
category: gui
lang_canonical:
ko: https://blog.naver.com/bugaku/223629101405
---
Python obsahuje GUI knihovny, jako je Tkinter, přímo ve standardní instalaci.
V poslední době byla pro jazyk Go vyvinuta [CGo-Free, Cross Platform Tk knihovna](https://pkg.go.dev/modernc.org/tk9.0), která umožňuje používat Tcl/Tk. Dnes si ukážeme její základní použití.
## Vytvoření Hello, Tk
Nejprve začneme jednoduchým příkladem 'Hello, TK!'.
```go
package main
import tk "modernc.org/tk9.0"
func main() {
tk.Pack(
tk.TButton(
tk.Txt("Hello, TK!"),
tk.Command(func() {
tk.Destroy(tk.App)
})),
tk.Ipadx(10), tk.Ipady(5), tk.Padx(15), tk.Pady(10),
)
tk.App.Wait()
}
```
---
Podívejme se podrobněji na výše uvedený příklad kódu a jeho výsledek.
Pokud máte zkušenosti s Tk v Pythonu, pravděpodobně chápete strukturu, ve které se widgety umísťují do okna nebo přímo do podřízených částí okna. V závislosti na typu widgetu jsou do něj zahrnuty například popisky (labely).
_Ipadx a Ipady jsou zkratky pro Internal padding, tedy vnitřní odsazení, které upravuje okraje vnitřních widgetů. V tomto příkladu se upravuje okraj tlačítka._
Tato knihovna obsahuje strukturu Window a proměnná App spravuje nejvyšší úroveň okna. Ta je předdefinována uvnitř knihovny. Funkce tk.App.Destroy(), která ukončuje tk.App.Wait(), tedy slouží k zavření okna nejvyšší úrovně.
Nyní se podívejme na několik příkladů ze složky \_examples na GitLabu.
## Zpracování souborů SVG
Následuje příklad zobrazení souboru SVG v label widgetu.
```go
package main
import . "modernc.org/tk9.0"
// https://en.wikipedia.org/wiki/SVG
const svg = `
`
func main() {
Pack(Label(Image(NewPhoto(Data(svg)))),
TExit(),
Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
App.Center().Wait()
}
```
Způsob zpracování SVG v této knihovně je následující:
1. Obsah souboru SVG se načte jako řetězec (nebo se, jako v příkladu výše, vloží přímo do kódu).
2. Tento obsah se předá funkci Data, která jej převede na řetězec obsahující možnosti (volba -data).
3. Převedená data bajtů se předají funkci NewPhoto, která vrátí ukazatel na strukturu Img reprezentující obrázek Tcl/Tk.
4. Při průchodu funkcí Image se ukazatel na strukturu Img převede na řetězec s přidanou volbou -Image.
5. Převod na řetězec obsahující RAW hodnotu struktury je nutný pro vytvoření label widgetu.
Soubory ICO a PNG se zpracovávají podobným způsobem.
## Zpracování souborů PNG
```go
package main
import _ "embed"
import . "modernc.org/tk9.0"
//go:embed gopher.png
var gopher []byte
func main() {
Pack(Label(Image(NewPhoto(Data(gopher)))),
TExit(),
Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
App.Center().Wait()
}
```
Postup zpracování souboru PNG je následující:
1. Vložený soubor gopher.png se převede na řetězec typu obsahujícího možnosti.
2. Funkcí NewPhoto se převede na typ \*Img.
3. Průchodem funkcí Image se převede na řetězec RAW a poté se vytvoří label widget.
Soubor ICO se zpracovává stejným způsobem a jediný rozdíl oproti formátu SVG spočívá ve vnitřním zpracování ve funkci Data.
Podívejme se nyní, co se skrývá za „řetězcem obsahujícím možnosti“:
```go
type rawOption string
```
Výše zmíněný řetězec obsahující možnosti je pouze naformátovaný řetězec.
```go
func (w *Window) optionString(_ *Window) string {
return w.String()
}
```
Metoda optionString je metodou ukazatele Window a vrací řetězec.
Nakonec si stručně prohlédněme vnitřní strukturu funkce Data:
```go
func Data(val any) Opt {
switch x := val.(type) {
case []byte:
switch {
case bytes.HasPrefix(x, pngSig):
// v pořádku
case bytes.HasPrefix(x, icoSig):
b := bytes.NewBuffer(x)
img, err := ico.Decode(bytes.NewReader(x))
if err != nil {
fail(err)
return rawOption("")
}
b.Reset()
if err := png.Encode(b, img); err != nil {
fail(err)
return rawOption("")
}
val = b.Bytes()
}
}
return rawOption(fmt.Sprintf(`-data %s`, optionString(val)))
}
```
Z kódu je vidět, že u souborů ICO nebo PNG je nutný proces kódování a dekódování.
V ostatních případech se bez zvláštní konverze pouze přidá volba -data k řetězci převedenému na bajty, čímž se označí, že jde o výsledek funkce Data.
### Načítání obrázků pomocí widgetu nabídky
Přidáme-li k příkladu načítání souborů PNG a ICO widget nabídky, můžeme vytvořit aplikaci, která zobrazuje požadovaný obrázek.
Nejprve se podívejme na jednoduchý příklad widgetu nabídky.
```go
package main
import (
"fmt"
. "modernc.org/tk9.0"
"runtime"
)
func main() {
menubar := Menu()
fileMenu := menubar.Menu()
fileMenu.AddCommand(Lbl("New"), Underline(0), Accelerator("Ctrl+N"))
fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func() { GetOpenFile() }))
Bind(App, "", Command(func() { fileMenu.Invoke(1) }))
fileMenu.AddCommand(Lbl("Save As..."), Underline(5))
fileMenu.AddSeparator()
fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
Bind(App, "", Command(func() { fileMenu.Invoke(4) }))
menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
App.Configure(Mnu(menubar), Width("8c"), Height("6c")).Wait()
}
```
V tomto příkladu jsme vyzkoušeli lištu nabídek a vytváření nabídek, zvýraznění písmen, volbu Command, navázání klávesových zkratek a nastavení počáteční velikosti okna aplikace.
Nyní upravíme funkci Command přiřazenou k GetOpenFile tak, aby načítala obrázek a zobrazovala ho, a vytvoříme tak program.
Plán tvorby programu je následující:
1. Omezit otevírání pouze na soubory PNG a ICO
2. Zpracovat soubor vybraný v dialogu pro výběr souboru
3. Implementovat widget pro zobrazení obrázku
Následuje kód, který odpovídá tomuto plánu:
```go
package main
import (
"fmt"
"log"
"os"
"runtime"
"strings"
. "modernc.org/tk9.0"
)
func handleFileOpen() {
s := GetOpenFile()
for _, photo := range s {
formatCheck := strings.Split(photo, ".")
format := formatCheck[len(formatCheck)-1]
if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) {
picFile, err := os.Open(photo)
if err != nil {
log.Println("Error while opening photo, error is: ", err)
}
pictureRawData := make([]byte, 10000*10000)
picFile.Read(pictureRawData)
imageLabel := Label(Image(NewPhoto(Data(pictureRawData))))
Pack(imageLabel,
TExit(),
Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
}
picFile.Close()
}
}
func main() {
menubar := Menu()
fileMenu := menubar.Menu()
fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(handleFileOpen))
Bind(App, "", Command(func() { fileMenu.Invoke(0) }))
fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
Bind(App, "", Command(func() { fileMenu.Invoke(1) }))
menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
App.Configure(Mnu(menubar), Width("10c"), Height("10c")).Wait()
}
```
Výše uvedený kód funguje následujícím způsobem:
1. Příponu souboru kontroluje porovnáním řetězců pomocí funkcí balíčku strings
2. Soubor se pomocí balíčku os otevře, načte a poté zavře
3. Načtený obrázek se zobrazí jako label widget
## Shrnutí
V tomto článku jsme pomocí Tcl/Tk knihovny jazyka Go probrali následující témata:
1. Základní strukturu GUI aplikace
2. Zpracování různých formátů obrázků, jako jsou SVG, PNG a ICO
3. Umísťování widgetů a správu rozložení
4. Strukturu zpracování dat obrázků
5. Klávesové zkratky a příkazy widgetů
Při společném použití jazyka Go a Tcl/Tk lze vytvářet jednoduché, ale praktické GUI programy. Doporučujeme na tomto základě zkusit vyvíjet složitější GUI aplikace.