Fyne ListWithData使用自定义TapLabel滚动后条目显示乱序问题求助

问题原因 #

你遇到的滚动后字母显示乱序是Fyne自定义控件的典型错误：自定义继承了Fyne标准控件的组件时，没有调用ExtendBaseWidget方法完成自定义控件的注册，导致Fyne的列表控件复用Item时，无法正确触发自定义控件的UI刷新逻辑。

你点击能拿到正确值是因为数据绑定逻辑本身是正常的，只是UI渲染层没有正确更新显示内容，才出现了显示内容和实际绑定数据不一致的情况。

修复方案 #

只需要修改NewTapLabel构造函数，补充ExtendBaseWidget调用即可：

func NewTapLabel(text string, tappedLeft func(string)) *TapLabel {
    mc := &TapLabel{widget.NewLabel(text), tappedLeft}
    // 新增以下行，完成自定义控件注册
    mc.ExtendBaseWidget(mc)
    return mc
}

修改完成后重新运行，滚动时的显示顺序就会完全正常了。

补充优化建议 #

如果不想用绑定的方式更新内容，也可以直接在列表的UpdateItem回调中直接赋值文本，逻辑更直观：

list := widget.NewListWithData(
    data,
    func() fyne.CanvasObject {
        return NewTapLabel("template", alphabetToBrands)
    },
    func(i binding.DataItem, o fyne.CanvasObject) {
        // 直接读取绑定值设置文本，不需要走Bind方法
        str, err := i.(binding.String).Get()
        if err == nil {
            o.(*TapLabel).SetText(str)
        }
    },
)

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