Golang跨平台GUI框架Fyne的使用教程详解_开发_开发者

安装 fyne

开始前，确保已成功安装 Go，如果是 MACOS X 系统，要确认安装了 xcode。

如下使用 go get 命令安装 Fyne。

$ mkdir hellofyne
$ cd helloyfyne
$ go mod init hellofyne
$ go get fyne.io/fyne/v2@latest
$ go install fyne.io/fyne/v2/cmd/fyne@latest

如果想立刻查看 fyne 提供的演示案例，通过命令检查：

$ go run fyne.io/fyne/v2/cmd/fyne_demo@latest

Golang跨平台GUI框架Fyne的使用教程详解

看起来，这里面的案例还是不够丰富的。

安装工作到此就完成了。Fyne 对不同系统有不同依赖，如果安装过程中遇到问题，细节可查看官方提供的安装文档。

创建第一个应用

由于 Go 简洁的语法和 fyne 的设计，使用 fyne 创建一个 GUI 应用异常简单。

以下是一个创建基础窗口的例子：

package main

import (
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/container"
    "fyne.io/fyne/v2/widget"
)

func main() {
    a := app.New()
    w := a.NewWindow("Hello Fyne")
    w.SetContent(widget.NewLabel("Welcome to Fyne!"))
    w.ShowAndRun()
}

这段代码创建了一个包含标签的窗口。

通过 app.New() 初始化一个 Fyne 应用实例。然后，创建一个标题为 "Hello Fyne" 的窗口，并设置内容为包含 "Welcome to Fyne!" 文本标签。最后，通过w.ShowAndRun()显示窗口并启动应用的事件循环。

fyne 中窗口的默认大小是其包含的内容决定，也可预置大小。

如在创建窗口后，提供 Resize 重新调整大小。

w.Resize(fyne.NewSize(100, 100))

还有，一个 app 下可以有多个窗口的，示例代码：

btn := widget.NewButton("Create a widnow", func() {
    w2 := a.NewWindow("Window 02")
    w2.Resize(fyne.NewSize(200, 200))
    w2.Show()
})

w.SetContent(btn)

我们创建一个按钮，它的点击事件是创建一个新的窗口并显示。

Golang跨平台GUI框架Fyne的使用教程详解

布局和控件

布局和控件是 GUI 应用程序设计中必不可少的两类组件。Fyne 提供了多种布局管理器和标准的 UI 控件，支持创建更复杂的界面。

布局管理

Fyne 中的布局的实现位于 container 包中。它提供了多种不同布局方式安排窗口中的元素。最基本的布局方式有 HBox 水平布局和 vbox 垂直布局。

通过 HBox 创建水平布局的代码如下：

w.SetContent(containeeSUkbdoYr.NewHBox(widget.NewButton("Left", func() {
    fmt.Println("Left button clicked")
}), widget.NewButton("Right", func() {
    fmt.Println("Right buttoandroidn clicked")
})))

显示效果：

Golang跨平台GUI框架Fyne的使用教程详解

通过 VBox 创建垂直布局的例子。

w.SetContent(container.NewVBox(widget.NewButton("Top", func() {
    fmt.Println("Top button clicked")
}), widget.NewButton("Bottom", func() {
    fmt.Println("Bottom button clicked")
})))

显示效果：

Golang跨平台GUI框架Fyne的使用教程详解

Fyne 除了基础的水平（HBoxLayout）和垂直（VBoxLayout）布局，还提供了GridLayout、FormLayout 甚至是混合布局 CombinedLayout 等高级布局方式。

如 GridLayout可以将元素均匀地分布在网格中，而FormLayout适用于创建表单，自动排列标签和字段。这些灵活的布局选项支持创建更复杂和功能丰富的GUI界面。

官方文档中的布局列表查看：Layout List。

Fyne 中的自定义

如果在实际项目中使用 Fyne，基本上是要使用 Fyne 的自定义能力。Fyne 提供了自定义控件、布局和主题等。

自定义控件

fyne 是支持实现自定义控件的，这涉及定义控件的绘制方法和布局逻辑。我们主要是实现两个接口：fyne.Widget 和 fyne.WidgetRenderer。

fyne.Widget 的定义如下所示：

type Widget interface {
    CanvasObject
    CreateRenderer() WidgetRenderer
}

CreateRenderer 方法返回的就是 WiddgetRenderer，用于定义控件渲染和布局的逻辑。

type WidgetRenderer interface {
    Destroy()
    Layout(Size)
    MinSize() Size
    Objects() []CanvasObject
    Refresh()
}

这样拆分的目标是为将了控件的逻辑和 UI 绘制分离开来，在 Widget 中专注于逻辑，而 WidgetRenderer 中专注于渲染布局。

假设实现一个类似 Label 的控件，类型定义：

type CustomLabel struct {
    widget.BaseWidget
    Text string
}

它继承了 wiget.BaseWidget 基本控件实现，Text 就是要 Label 显示的文本。还要给给 CustomLabel 实现 CreateRenderer 方法。

定义 CustomLabel 创建函数：

func NewCustomLabel(text string) *Customhttp://www.devze.comLabel {
    label := &CustomLabel{Text: text}
    label.ExtendBaseWidget(label)
    return label
}

customWidgetRenderer 类型定义如下：

type customWidgetRenderer struct {
    text  *canvas.Text // 使用canvas.Text来绘制文本
    label *CustomLabel
}

实现 CustomLabel 的 CreateRenderer 方法。

func (label *CustomLabel) CreateRenderer() fyne.WidgetRenderer {
    text := canvas.NewText(label.Text, theme.ForegroundColor())
    text.Alignment = fyne.TextAlignCenter

    return &customLabelRenderer{
        text:  text,
        label: label,
    }
}

构建 Renderer 变量，使用 canvas 创建 Text 文本框，为适配主题使用主题配置前景色。还有，设置文本居中显示。

而 customLabelRenderer 要实现 WidgetRender 接口定义的所有方法。

func (r *customLabelRenderer) MinSize() fyne.Size {
    return r.text.MinSize()
}

func (r *customLabelRenderer) Layout(size fyne.Size) {
    r.text.Resize(size)
}

func (r *customLabelRenderer) Refresh() {
    r.text.Text = r.label.Text
    r.text.Color = theme.ForegroundColor() // 确保文本颜色更新
    r.text.Refresh()
}

func (r *customLabelRenderer) BackgroundColor() color.Color {
    return theme.BackgroundColor()
}

func (r *customLabelRenderer) Objects() []fyne.CanvasObject {
    return []fyne.CanvasObject{r.text}
}

func (r *customLabelRenderer) Destroy() {}

在 main 函数中，尝试使用这个控件。

a := app.New()
w := a.NewWindow("Custom Label")

w.SetContent(NewCustomLabel("Hello"))
w.ShowAndRun()

显示的效果和 Label 控件是类似的。

其他自定义

其他自定义能力，如 Layout、Theme，我就不展开介绍。如果有机会，写点实际应用案例。如果基于案例介绍，会更有体悟吧。

还有，Fyne 的官方文档写的挺易读的，可直接看它的文档。

数据绑定

Fyne 从 v2.0.0 开始支持数据绑定。它让控件和与数据实时连接，数据更改会自动反映在UI上，反之亦然。

控件为了支持数据绑定能力，一般会提供如 NewXXXWithData 的接口。

直接通过一个场景说明，目标是编辑输入框的内容，可http://www.devze.com同时立刻显示到 Label 上。

核心代码如下所示：

// 创建一个字符串绑定
textBind := binding.NewString()

// 创建一个 Entry，将其内容绑定到 textBind
entry := widget.NewEntryWithData(textBind)

// 创建一个 Label，也将其内容绑定到同一个 textBind
label := widget.NewLabelWithData(textBind)

// 使用容器放置 Entry 和 Label，以便它们都显示在窗口中
content := container.NewVBox(entry, label)

如上的代码，创建一个数据绑定类型的变量 textBind，并将其通过 NewWithData 将其绑定到两个控件上。

显示效果，如下所示：

Golang跨平台GUI框架Fyne的使用教程详解

尝试让前面自定义的 CustomLabel 支持数据绑定能力。只要创建一个 NewCustomLabelWithData 构造函数。

如下所示：

func NewCustomLabelWithData(data binding.String) *CustomLabel {
    label := &CustomLabel{}
    label.ExtendBaseWidget(label)
    data.AddListener(binding.NewDataListener(func() {
        text, _ := data.Get()
        label.Text = text
        label.Refresh()
    }))
    return label
}

如上的代码中，其实就是通过 data 这个数据绑定类型变量监听数据变化，监听到变化后，更新空间内容并立刻刷新控件显示。

Golang跨平台GUI框架Fyne的使用教程详解