使用类方法构建Flutter交互UI时收藏按钮点击后UI不更新如何解决

问题根源 #

你虽然让Project继承了ChangeNotifier，但没有为返回的UI组件绑定对Project实例的监听逻辑，notifyListeners()发送的更新通知没有对应的接收方，因此UI不会主动触发重建。首次构建时生成的ListTile会一直使用初始的favorite状态，自然不会跟着变化。

解决方法 #

只需要在getListTile方法中用ListenableBuilder包裹原有返回的ListTile，将当前Project实例作为监听源即可，修改后的代码如下：

修改后的Project类代码 #

class Project extends ChangeNotifier{
  bool favorite = false;
  Project({this.favorite = false});

  IconButton getFavoriteButton() {
    return IconButton(
      icon: favorite
          ? const Icon(Icons.favorite_outlined)
          : const Icon(Icons.favorite_border_outlined),
      color: favorite ? Colors.yellow : Colors.white,
      onPressed: () {
        favorite = !favorite;
        notifyListeners();
      },
    );
  }
      
  Widget getListTile() {
    // 新增ListenableBuilder监听当前Project实例的变化
    return ListenableBuilder(
      listenable: this,
      builder: (context, child) {
        return ListTile(
          leading: getFavoriteButton(),
          // 你原有ListTile的其他配置（title、subtitle等）保留在这里即可
        );
      },
    );
  }
}

原理说明 #

ListenableBuilder会持续监听传入的listenable对象（也就是当前的Project实例），每次你点击收藏按钮触发notifyListeners()时，ListenableBuilder都会自动重新执行builder方法，使用最新的favorite状态生成对应的图标和样式，UI就会同步更新了。

如果后续你需要支持列表新增/删除项目的场景，只需要让承载projects列表的类也继承ChangeNotifier，在外层ListView外层也套一层对应的ListenableBuilder监听列表变化即可，不需要修改现有Project类的逻辑，符合你多处复用的需求。

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