自定义小部件,Fyne笔记第7篇

type Widget interface {
	CanvasObject

	CreateRenderer() WidgetRenderer
}

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

// 一个自定义Widget的示例
package main

import (
	"fmt"
	"image/color"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/widget"
)

var _ fyne.Widget = (*ExampleWidget)(nil)

// ExampleWidget 实现将空间四等分的 Widget
// 可以实现四象限图，或同样结构的画面。
// 如果处于禁用状态，只显示分隔线
//
// Widget保存状态和实现行为，布局和显示在渲染器实现。
type ExampleWidget struct {
	//对应左上，右上，左下，右下，允许为nil
	A1, A2, A3, A4 fyne.CanvasObject
	//复用Widget的基本功能以及设置禁用
	widget.DisableableWidget
}

func NewExampleWidget(a1, a2, a3, a4 fyne.CanvasObject) *ExampleWidget {
	r := &ExampleWidget{A1: a1, A2: a2, A3: a3, A4: a4}
	//如果没有这个步骤，窗口Resize时因为找不到这个Widget对应的渲染器，从而不会Resize这个Widget。
	r.ExtendBaseWidget(r)
	return r
}

// MinSize 返回最小尺寸，即显示所有子组件需要的最低宽高
func (m *ExampleWidget) MinSize() fyne.Size {
	get := func(c fyne.CanvasObject) fyne.Size {
		if c == nil {
			return fyne.NewSize(0, 0)
		}
		return c.MinSize()
	}
	// 计算左右两列的最大宽度，上下两行的最大高度
	leftWidth := max(get(m.A1).Width, get(m.A3).Width)
	rightWidth := max(get(m.A2).Width, get(m.A4).Width)
	topHeight := max(get(m.A1).Height, get(m.A2).Height)
	bottomHeight := max(get(m.A3).Height, get(m.A4).Height)
	return fyne.NewSize(leftWidth+rightWidth, topHeight+bottomHeight)
}

// CreateRenderer 创建并返回 ExampleWidget 小部件的渲染器
func (m *ExampleWidget) CreateRenderer() fyne.WidgetRenderer {
	return NewExampleWidgetRender(m)
}

type ExampleWidgetRender struct {
	x, y *canvas.Line   // 垂直分隔线（x 轴）, 水平分隔线（y 轴）
	size *widget.Label  // 调试用：显示当前小部件的宽高
	m    *ExampleWidget // 关联的小部件实例
}

func NewExampleWidgetRender(m *ExampleWidget) *ExampleWidgetRender {
	r := &ExampleWidgetRender{m: m}
	r.y, r.x = canvas.NewLine(color.Black), canvas.NewLine(color.Black)
	r.size = widget.NewLabel("")
	return r
}

const debug = false

// Destroy 渲染器被销毁时调用
func (r *ExampleWidgetRender) Destroy() {}

// Layout 根据传入的宽高，调整分隔线位置和所有子组件的位置、宽高
//
// s是小部件的可用显示宽高
func (r *ExampleWidgetRender) Layout(s fyne.Size) {
	//设置x线两点在X轴中间，Y轴0和max
	//设置y线两点在Y轴中间，X轴0和max
	//两点直线相连形成分隔线
	r.y.Position1.X = s.Width / 2
	r.y.Position2.X = s.Width / 2
	r.y.Position2.Y = s.Height

	r.x.Position1.Y = s.Height / 2
	r.x.Position2.Y = s.Height / 2
	r.x.Position2.X = s.Width

	//将空间均分为4等份，移动CanvasObject到所属位置
	//通过Move设置位置左上角的XY点坐标，Resize设置宽高
	if debug {
		r.size.SetText(fmt.Sprintf("宽 %g, 高%g", s.Width, s.Height))
	}

	avg := fyne.NewSize(s.Width/2, s.Height/2)

	if r.m.A1 != nil {
		h := float32(0)
		if debug {
			h = r.size.MinSize().Height
		}
		r.m.A1.Move(fyne.NewPos(0, h)) // 移动到左上位置
		r.m.A1.Resize(avg)
	}
	if r.m.A2 != nil {
		r.m.A2.Move(fyne.NewPos(s.Width/2, 0)) // 移动到右上位置
		r.m.A2.Resize(avg)
	}
	if r.m.A3 != nil {
		r.m.A3.Move(fyne.NewPos(0, s.Height/2)) // 移动到左下位置
		r.m.A3.Resize(avg)
	}
	if r.m.A4 != nil {
		r.m.A4.Move(fyne.NewPos(s.Width/2, s.Height/2)) // 移动到右下位置
		r.m.A4.Resize(avg)
	}
}

// MinSize 返回在最小化时所需要的最低宽高。
func (r *ExampleWidgetRender) MinSize() fyne.Size { return r.m.MinSize() }

// Objects 返回所有需要显示的CanvasObject
func (r *ExampleWidgetRender) Objects() []fyne.CanvasObject {
	ret := []fyne.CanvasObject{r.x, r.y, r.size, r.m.A1, r.m.A2, r.m.A3, r.m.A4}
	if r.m.Disabled() { //如果处于禁用状态，只显示分隔线
		ret = ret[:2]
	}
	return ret
}

// Refresh 刷新渲染器（重新绘制）
func (r *ExampleWidgetRender) Refresh() {
	//对于这个示例，通常在调用ExampleWidget.Disable或Enable或Resize后
	//Fyne自动调用这个方法。
	//随后渲染下一帧时，调用Objects实现显示的改变。
	r.Layout(r.m.Size())
}

func main() {
	app := app.New()
	w := app.NewWindow("自定义小部件")
	content := []fyne.CanvasObject{widget.NewLabel("第二象限"), widget.NewLabel("第一象限"), widget.NewLabel("第三象限"), widget.NewLabel("第四象限")}
	body := NewExampleWidget(content[0], content[1], content[2], content[3])
	w.SetContent(container.NewBorder(nil, nil, nil, nil, body))
	w.ShowAndRun()
}