Fyne自定义Widget无法刷新求助：鼠标移动时组件不重绘

问题描述 #

尝试编写一个响应鼠标事件的自定义Fyne Widget，需求是从窗口左上角绘制黑线至鼠标指针位置，但实际仅在调整窗口大小时才会绘制。尽管在MouseMoved事件处理器中调用了Refresh()，组件仍未重绘。调试发现BaseWidget的impl始终为nil，导致Renderer的Refresh()从未被执行，疑惑是否无法编写不基于现有组件的自定义Widget。

核心结论 #

Fyne完全支持从零实现自定义Widget，问题出在未正确初始化BaseWidget。

解决步骤 #

• 自定义Widget结构体必须嵌入fyne.BaseWidget，且在初始化时调用BaseWidget.ExtendWidget(this)——这是给BaseWidget的impl字段赋值的关键，缺失此步骤会导致Refresh()因为impl为nil而失效。
• 实现CreateRenderer()方法，返回自定义的Renderer，且Renderer必须实现Refresh()方法来处理重绘逻辑。
• 在Widget的鼠标事件方法（如MouseMoved）中更新状态后，调用Refresh()触发重绘。

完整示例代码 #

package main

import (
	"image/color"

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

// LineToMouse 自定义Widget，绘制从左上角到鼠标位置的黑线
type LineToMouse struct {
	widget.BaseWidget
	mousePos fyne.Position
}

// NewLineToMouse 创建Widget实例
func NewLineToMouse() *LineToMouse {
	l := &LineToMouse{}
	l.ExtendWidget(l) // 关键：初始化BaseWidget的impl字段
	l.mousePos = fyne.NewPos(0, 0)
	return l
}

// CreateRenderer 实现Widget接口的CreateRenderer方法
func (l *LineToMouse) CreateRenderer() fyne.WidgetRenderer {
	line := canvas.NewLine(color.Black)
	objects := []fyne.CanvasObject{line}

	return &lineRenderer{
		line:    line,
		parent:  l,
		objects: objects,
	}
}

// MouseMoved 处理鼠标移动事件，更新鼠标位置并触发重绘
func (l *LineToMouse) MouseMoved(e *fyne.MouseEvent) {
	l.mousePos = e.Position
	l.Refresh()
}

// lineRenderer 自定义Widget的Renderer
type lineRenderer struct {
	line    *canvas.Line
	parent  *LineToMouse
	objects []fyne.CanvasObject
}

// Layout 更新线的端点位置
func (r *lineRenderer) Layout(size fyne.Size) {
	r.line.Position1 = fyne.NewPos(0, 0)
	r.line.Position2 = r.parent.mousePos
}

// Refresh 触发重绘，更新线的布局并刷新画布
func (r *lineRenderer) Refresh() {
	r.Layout(r.parent.Size())
	canvas.Refresh(r.line)
}

// MinSize 返回Widget的最小尺寸
func (r *lineRenderer) MinSize() fyne.Size {
	return fyne.NewSize(100, 100)
}

// Objects 返回Renderer管理的所有画布对象
func (r *lineRenderer) Objects() []fyne.CanvasObject {
	return r.objects
}

// Destroy 销毁Renderer时的清理逻辑
func (r *lineRenderer) Destroy() {}

func main() {
	a := app.New()
	w := a.NewWindow("Line to Mouse")

	lineWidget := NewLineToMouse()
	w.SetContent(lineWidget)

	w.Resize(fyne.NewSize(400, 400))
	w.ShowAndRun()
}

关键细节说明 #

• l.ExtendWidget(l)：这一步是Fyne框架将自定义Widget与BaseWidget绑定的核心，没有它，BaseWidget无法关联到具体的Widget实例，调用Refresh()时找不到对应的Renderer执行重绘操作。
• Renderer的Refresh()：需要先更新绘制对象的状态（如示例中线的终点位置），再调用canvas.Refresh()刷新具体的CanvasObject，确保界面能同步更新。
• 鼠标事件绑定：自定义Widget需要实现MouseMoved等事件方法，Fyne框架才会将对应的鼠标事件传递给Widget处理。

内容的提问来源于stack exchange，提问作者nagylzs