从零开始的Fyne（二）：组件与容器

SyYhunfhds2026/1/2大约 25 分钟

探索Fyne

`Canvas`与`CanvasObject`

In Fyne, a Canvas is the area within which an application is drawn. Each window has a canvas, which you can access with Window.Canvas(), but usually, you will find functions on Window that avoid directly accessing the canvas.

在Fyne中，Canvas就是一块用来绘制APP的区域。每个窗口都会有一个canvas，可以用Window.Canvas()访问，但一般来说，你应该调用Window的方法，而不是直接操作Canvas

Everything that can be drawn in Fyne is a type of CanvasObject. The example here opens a new window and then shows different types of primitive graphical elements by setting the content of the window canvas. There are many ways that each type of object can be customised, as shown with the text and circle examples.

CanvasObject就是Fyne中用来绘制一切的实例。下面的例子演示了如何打开一个新窗口并通过设置Window canvas来显示两个不同形状的元素。我们可以自定义很多组件/CanvasObject，下面所演示的是文本组件和圆圈组件

As well as changing the content shown using Canvas.SetContent(), it is possible to change the properties of existing canvas objects. For example, you can change the FillColor of a rectangle and then call rect.Refresh() to update its appearance. When performing such updates from a goroutine, you should use the fyne.Do function to queue the updates safely on the main goroutine, ensuring thread safety as required since Fyne v2.6.0.

我们可以使用Canvas.SetContent()修改显示出来的组件内容，也可以直接修改已存在的canvas对象的属性。比如我们可以直接修改矩形元素的FillColor属性，然后调用rect.Refresh()更新它的外观。如果是在协程里执行这种更新，你应该使用fyne.Do函数，将更新事件放入队列中，并确保你的fyne版本高于2.6.0，因为fyne 2.6.0之后更新了其协程机制，带来了更好的线程安全

package main  
  
import (  
    "image/color"  
    "log"    "time"  
    "fyne.io/fyne/v2"    "fyne.io/fyne/v2/app"    "fyne.io/fyne/v2/canvas")  
  
func main() {  
    // _ = os.Setenv("FYNE_THEME", "light")  
  
    myApp := app.New()  
    myWindow := myApp.NewWindow("Canvas")  
    myCanvas := myWindow.Canvas()  
  
    blue := color.NRGBA{R: 0, G: 0, B: 255, A: 255}  
    rect := canvas.NewRectangle(blue)  
    myCanvas.SetContent(rect)  
  
    go func() {  
       time.Sleep(time.Second)  
       green := color.NRGBA{R: 0, G: 255, B: 0, A: 255}  
       fyne.Do(func() {  
          rect.FillColor = green  
          rect.Refresh()  
       })  
    }()  
  
    myWindow.Resize(fyne.NewSize(300, 300))  
    myWindow.Show()  
    myApp.Run()  
  
    log.Printf("程序退出")  
}

我们还可以以同样方式绘制很多不同的元素，比如画个圆和一个文本：

func setContentToText(c fyne.Canvas) {  
    green := color.NRGBA{R: 0, G: 255, B: 0, A: 255}  
    text := canvas.NewText("Hello World", green)  
    text.TextStyle.Bold = true  
    c.SetContent(text)  
}  
func setContentToCircle(c fyne.Canvas) {  
    red := color.NRGBA{R: 255, G: 0, B: 0, A: 255}  
    circle := canvas.NewCircle(color.White)  
    circle.StrokeWidth = 4  
    circle.StrokeColor = red  
    c.SetContent(circle)  
}

A fyne.Widget is a special type of canvas object that has interactive elements associated with it. In widgets, the logic is separate from the way that it looks (also called the WidgetRenderer).

fyne.Widget是一种特殊的Canvas对象，拥有可交互元素。wigets的渲染（WidgetRender）和事件逻辑是分离的

Widgets are also types of CanvasObject, so we can set the content of our window to a single widget. See how we create a new widget.Entry and set it as the content of the window in this example.

Widgets也是一种CanvasObject，所以我们可以把窗口内容设置成单独一个Widget。下面的例子演示了如何创建一个新的文本输入框Widget.Entry并将其设为窗口的内容：

package main  
  
import (  
    "log"  
  
    "fyne.io/fyne/v2"    "fyne.io/fyne/v2/app"    "fyne.io/fyne/v2/widget")  
  
func main() {  
    // _ = os.Setenv("FYNE_THEME", "light")  
  
    myApp := app.New()  
    myWindow := myApp.NewWindow("Demo")  
  
    myWindow.SetContent(widget.NewEntry())  
  
    myWindow.Resize(fyne.NewSize(300, 300))  
    myWindow.Show()  
    myApp.Run()  
  
    log.Printf("程序退出")  
}

容器与布局

In the previous example we saw how to set a CanvasObject to the content of a Canvas, but it is not very useful to only show one visual element. To show more than one item we use the Container type.

在前面的例子中我们了解到了如何将一个CanvasObject设置为画布区域Canvas的内容，但仅仅只显示一个可见元素是不够的。为了渲染更多元素，我们需要使用Container/容器类型

As the fyne.Container also is a fyne.CanvasObject, we can set it to be the content of a fyne.Canvas. In this example we create 3 text objects and then place them in a container using the container.NewWithoutLayout() function. As there is no layout set we can move the elements around like you see with text2.Move().

鉴于fyne.Container也是一种画布对象，我们可以将其设置为fyne.Canvas的内容。在下面的例子中我们将创建三个文本对象，将其放置在由container.NewWithoutLayout创建的容器中。由于使用了无布局的容器，我们要使用text.Move()方法手动把组件移开：

package main  
  
import (  
    "image/color"  
    "log"  
    "fyne.io/fyne/v2"    "fyne.io/fyne/v2/app"    "fyne.io/fyne/v2/canvas"    "fyne.io/fyne/v2/container")  
  
var green = color.NRGBA{G: 0xff, A: 0xff}  
var blue = color.NRGBA{B: 0xff, A: 0xff}  
var red = color.NRGBA{R: 0xff, A: 0xff}  
  
func main() {  
    // _ = os.Setenv("FYNE_THEME", "light")  
  
    myApp := app.New()  
    myWindow := myApp.NewWindow("Demo")  
  
    text1 := canvas.NewText("Hello", green)  
    text2 := canvas.NewText("World", green)  
    text2.Move(fyne.NewPos(20, 20))  
    content := container.NewWithoutLayout(text1, text2)  
    myWindow.SetContent(content)  
  
    myWindow.Resize(fyne.NewSize(300, 300))  
    myWindow.Show()  
    myApp.Run()  
  
    log.Printf("程序退出")  
}

A fyne.Layout implements a method for organising items within a container. By uncommenting the container.New() line in this example you alter the container to use a grid layout with 2 columns. Run this code and try resizing the window to see how the layout automatically configures the contents of the window. Notice also that the manual position of text2 is ignored by the layout code.

fyne.Layout实现了在容器内组织元素的方法。（原本的代码里）通过取消container.New()注释，你将获得一个使用两列的网格布局。注意对text2的手动布局设置现在会被布局代码忽略

package main  
  
import (  
    "image/color"  
    "log"  
    "fyne.io/fyne/v2"    "fyne.io/fyne/v2/app"    "fyne.io/fyne/v2/canvas"    "fyne.io/fyne/v2/container"    "fyne.io/fyne/v2/layout")  
  
var green = color.NRGBA{G: 0xff, A: 0xff}  
var blue = color.NRGBA{B: 0xff, A: 0xff}  
var red = color.NRGBA{R: 0xff, A: 0xff}  
  
func main() {  
    // _ = os.Setenv("FYNE_THEME", "light")  
  
    myApp := app.New()  
    myWindow := myApp.NewWindow("Demo")  
  
    text1 := canvas.NewText("Hello", green)  
    text2 := canvas.NewText("World", green)  
    text2.Move(fyne.NewPos(20, 20))  
    // content := container.NewWithoutLayout(text1, text2)  
    content := container.New(layout.NewGridLayout(2), text1, text2)  
    myWindow.SetContent(content)  
  
    myWindow.Resize(fyne.NewSize(300, 300))  
    myWindow.Show()  
    myApp.Run()  
  
    log.Printf("程序退出")  
  
}

To see more you can check out the Layout list.

折叠列表/手风琴样式/Accordion

Accordion displays a list of AccordionItems. Each item is represented by a button that reveals a detailed view when tapped.

type AccordionItem struct {
    Title  string
    Detail fyne.CanvasObject
    Open   bool
}

func NewAccordionItem(title string, detail fyne.CanvasObject) *AccordionItem

func NewAccordion(items ...*AccordionItem) *Accordion

func setContentToFruitAccordion(w fyne.Window, app fyne.App) {  
    fruits := map[string]string{  
       "A": "Apple",  
       "B": "Banana",  
       "C": "Cherry",  
    }  
    fruitAccordionItems := make([]*widget.AccordionItem, len(fruits))  
    idx := 0  
    for k, v := range fruits {  
       fruitAccordionItems[idx] = widget.NewAccordionItem(k, widget.NewLabel(v))  
       idx++  
    }  
    fruitAccordion := widget.NewAccordion(fruitAccordionItems...)  
    w.SetContent(container.NewVBox(  
       fruitAccordion,  
       layout.NewSpacer(),  
       widget.NewButton("退出", func() {  
          app.Quit()  
       }),  
    ))  
}

动点/Activity

Display an animated activity indicator.

type Activity struct {
    BaseWidget
    started bool
}

func setContentToActivity(win fyne.Window, app fyne.App) {  
    activity := widget.NewActivity()  
    quitButton := widget.NewButton("退出", func() {  
       app.Quit()  
    })  
  
    win.SetContent(container.NewVBox(activity, quitButton))  
    go func() {  
       ticker := time.NewTicker(time.Second)  
       defer ticker.Stop()  
  
       for {  
          select {  
          case <-ticker.C:  
             activity.Start()  
             time.Sleep(200 * time.Millisecond)  
             activity.Stop()  
          }  
       }  
    }()  
}

你能看出来它在动吗？

按钮/Button

Button widget has a text label and icon, both are optional.

type Button struct {
    DisableableWidget
    Text             string
    Icon             fyne.Resource
    Importance       Importance
    Alignment        ButtonAlign
    IconPlacement    ButtonIconPlacement
    OnTapped         func() `json:"-"`
    hovered, focused bool
    tapAnim          *fyne.Animation

卡片/Card

Card widget groups elements with a header and subheader, all are optional.

type Card struct {
    BaseWidget
    Title, Subtitle string
    Image           *canvas.Image
    Content         fyne.CanvasObject
}

func NewCard(title string, subtitle string, content fyne.CanvasObject) *Card

func setContentToFruitCard(win fyne.Window, app fyne.App) {  
    const fileApplePng = "./assets/apple.png"  
    card := widget.NewCard("Apple", "A red fruit",  
       nil, // *fyne.Object
    )  
    card.Image = canvas.NewImageFromFile(fileApplePng)  
  
    quit := createQuitButton(app)  
  
    win.SetContent(container.NewVBox(card, quit))  
}

宽体苹果

单选框/Check

描述

Check widget has a text label and a checked (or unchecked) icon.

源码

type Check struct {
    DisableableWidget
    Text      string
    Checked   bool
    Partial   bool
    OnChanged func(bool) `json:"-"`
    focused   bool
    hovered   bool
    binder    basicBinder
    minSize   fyne.Size
}

func NewCheck(label string, changed func(bool)) *Check
func NewCheckWithData(label string, data binding.Bool) *Check