最近，我一直想開發一些桌面（主要是 Windows，但也可以考慮 MacOS 或 Linux）應用程序。雖然 Go 不是開發 UI 應用程序時首選語言，但是該語言的簡單性和健壯性仍然使它成為我的首選語言。是的，這是我的錘子（hammer）... 但這是一個該死的漂亮錘子。
以前，我曾將 Ebiten 圖形庫用於 Go，以便與孩子們一起編寫一些遊戲。但是，對於一般的“應用程序”開發（即需要“小部件 widgets”，例如按鈕，菜單等），Ebiten 並非真的適合。因此，我一直在尋找可以使用的 Go UI 庫。然而大多數都使用 cgo，但我真的希望我的應用程序是純 Go。這純粹是個人喜好，我不知道使用 cgo 而不是純 Go 會有什麼影響。如果我要使用 cgo，我認為首選的 UI 庫肯定是 Fyne[1]。Fyne 看起來是一個非常全面的框架，如果您不介意 cgo，我絕對會建議你看看看 Fyne。
還有其他一些庫，但沒有吸引我。他們說你永遠不應該編寫自己的安全性代碼，並且我也相信你不應該編寫自己的 UI 庫。但是我忽略了這個建議...
因此，我寫了一個 GoUI[2] !!
這純粹是那些“抓癢”的項目之一。雖然現在還很早，但 UI 庫的基本知識（由 Ebiten 進行實際渲染）正在慢慢融合。在詳細介紹下面細節之前，我想先說明一下，我認為程序在 CLI 達到了頂峰。其次，我不是 UI 編程人員……寫這些是我個人的興趣。
GoUI 的基本思想是兩種類型的圖形元素。一個是可以包含其他面板或小部件的面板（Panel）。另一個是小部件，它是基本的 UI 元素（按鈕，文本輸入等）。我們目前使用的面板類型有 HPanel（水平添加）和 VPanel（我讓你猜）。從技術上講，我們確實有其他面板，例如工具欄，但這實際上只是 HPanel，需要一點點定製工作。總體而言，如果我可以結合其他現有面板/小工具來構造一些“新”東西，那麼我會做的。如果我需要優化或與已有產品脫節，那麼我將做一些全新的事情。
我們目前擁有的小部件是：
- ImageButton：（由應用程序提供的單擊/未單擊的圖像）。
- TextButton：基本的彩色矩形，其中包含您想要的任何文本。
- Checkbox：與 TextButton 相同，但是旁邊有一個小方框，可以打對勾。
- EmptySpace：完全由我控制。用於強制其他小部件之間的空間。一旦添加適當的填充，該填充可能會消失。
- Label：文本標籤，不能輸入。
- Text Input：文本輸入框。
- RadioButtonGroup：這是一個面板，其中包含 vpanel 或 hpanel（取決於標誌），然後其中包含許多複選框。複選框將圖像（帶有刻度）替換為常規的單選按鈕。這是重新使用現有窗口小部件的好例子。如果事實證明我需要對複選框進行足夠的修改以使其不適合用作單選按鈕，那麼我將不得不放入一個真正的單選按鈕。但是目前，它運行良好。
我還沒有完成菜單，模態窗口等，但是正如我所說的……這還是早期。
現在，讓我們嘗試一個超級簡單的 Demo。
<code>package main
import (
"github.com/hajimehoshi/ebiten"
"github.com/kpfaulkner/goui/pkg"
"github.com/kpfaulkner/goui/pkg/widgets"
log "github.com/sirupsen/logrus"
"image/color"
)
type MyApp struct {
window pkg.Window
}
func NewMyApp() *MyApp {
a := MyApp{}
a.window = pkg.NewWindow(800, 600, "test app", false, false)
return &a
}
func (m *MyApp) SetupUI() error {
vPanel := widgets.NewVPanel("main vpanel", &color.RGBA{0, 0, 0, 0xff})
m.window.AddPanel(vPanel)
button1 := widgets.NewTextButton("text button 1", "my button1", true, 0, 0, nil, nil, nil, nil)
vPanel.AddWidget(button1)
return nil
}
func (m *MyApp) Run() error {
m.SetupUI()
ebiten.SetRunnableInBackground(true)
ebiten.SetWindowResizable(true)
m.window.MainLoop()
return nil
}
func main() {
log.SetLevel(log.DebugLevel)
app := NewMyApp()
app.Run()
}
/<code>讓我們解釋一下以上代碼。
首先，該程序的核心仍然是直接調用 Ebiten。這些尚未封裝。因此，你將在 main 和 Run 函數中看到，我們基本上已經制作了 MyApp 結構的實例，然後調用 SetupUI，設置一些 Ebiten 標誌，然後調用 MainLoop。
NewMyApp 函數調用 pkg.NewWindow 函數。這是應用程序的主窗口。一旦添加了模態/其他窗口，這可能會更改，但是就目前而言，這將創建給定大小的主 UI 窗口。
SetupUI 是你需要注意的地方。我們要做的第一件事是創建一個 VPanel。請記住，VPanel 把小部件垂直堆疊放置。我們將 vPanel 添加到主窗口。實際上（當前），我們應該只在主窗口中添加 1 個面板，其他所有內容都應放入該面板中。因此，在這種情況下，我們創建 button1（新的 TextButton）並將其添加到 vPanel。
花點時間來學習理解一下上面的 UI 技能。
下面，讓我們做一些更有趣的事情。假設我們要在按下按鈕時做出響應。創建 TextButton 的行是：
<code>button1 := widgets.NewTextButton("text button 1", "my button1", true, 0, 0, nil, nil, nil, nil)
/<code>所有細節就不描述了，但是最後一個參數是帶有 func (event IEvent) error簽名的事件處理程序。因此，如果我們創建一個帶有該簽名的方法，並將其作為最後一個參數傳遞給 NewTextButton。
<code>func (m *MyApp) ButtonAction1(event events.IEvent) error {
log.Debugf("My button1 action 1!!!")
return nil
}
/<code>然後我們將按鈕創建修改為
<code>button1 := widgets.NewTextButton("text button 1", "my button1", true, 0, 0, nil, nil, nil, m.ButtonAction1)
/<code>現在，當單擊按鈕時，將調用 ButtonAction1 函數，我們可以觸發所需的任何功能。
是不是很簡單。
現在，如果我想要在按鈕旁邊放點東西該怎麼辦？我們在這裡要做的是創建一個 HPanel，並將其首先放入 VPanel。然後，將按鈕添加到 HPanel。如果這樣做，我們最終將得到如下代碼：
<code>func (m *MyApp) SetupUI() error {
vPanel := widgets.NewVPanel("main vpanel", &color.RGBA{0, 0, 0, 0xff})
m.window.AddPanel(vPanel)
hPanel := widgets.NewHPanel("hpanel1", &color.RGBA{0, 100, 0, 255})
vPanel.AddWidget(hPanel)
button1 := widgets.NewTextButton("text button 1", "my button1", true, 0, 0, nil, nil, nil, m.ButtonAction1)
hPanel.AddWidget(button1)
return nil
}
/<code> 從視覺上看，什麼都不會改變。我們仍然只顯示 1 個小部件。
現在，如果我們在同一 HPanel 中添加一個複選框怎麼辦？
<code>func (m *MyApp) SetupUI() error {
vPanel := widgets.NewVPanel("main vpanel", &color.RGBA{0, 0, 0, 0xff})
m.window.AddPanel(vPanel)
hPanel := widgets.NewHPanel("hpanel1", &color.RGBA{0, 100, 0, 255})
button1 := widgets.NewTextButton("text button 1", "my button1", true, 0, 0, nil, nil, nil, m.ButtonAction1)
hPanel.AddWidget(button1)
cb1 := widgets.NewCheckBox("my checkbox1", "check me please", "", "", nil)
hPanel.AddWidget(cb1)
vPanel.AddWidget(hPanel)
return nil
}
/<code>因此，與之前完全相同，但只有這額外的兩條：創建複選框，然後添加到 hPanel。
現在 UI 看起來是這樣：
現在不擔心這裡的間距了。
現在讓我們在 TextButton 下面添加一個 ImageButton。這意味著我們將向 vPanel 添加第二項（第一項是 hPanel）
<code>imageButton := widgets.NewImageButton("ib1", "images/pressedbutton.png", "images/nonpressedbutton.png",nil )
vPanel.AddWidget(imageButton)
/<code>這是效果如下：
這時，我們有了 2 張圖片（屏幕截圖中只顯示了一張）。按下按鈕時一個，不按下時一個（只更改了陰影）。懂了吧。
好了，介紹就這麼多。雖然該 UI 庫還不完善，但 GUI 的基本功能已經可以實現了。再次放上該庫的地址：https://github.com/kpfaulkner/goui。
作者：kpfaulkner[3]
日期：2020 年 8 月 17 日
原文鏈接：https://kpfaulkner.wordpress.com/2020/08/17/goui-a-very-simple-ui-framework/
譯者：polaris
參考資料
[1]
Fyne: https://fyne.io/
[2]
GoUI: https://github.com/kpfaulkner/goui
[3]
kpfaulkner: https://kpfaulkner.wordpress.com/author/kpfaulkner/
