使用ChangeNotifierProvider实例化列表及适配ListView Builder问题

• 你全局声明的final itemList = ItemList();和ChangeNotifierProvider的create方法初始化的ItemList是两个完全独立的实例，操作全局实例不会触发Provider关联的UI更新，这是操作不生效的核心原因。
• 创建ItemData的语法错误，你写的ItemData({elements})不符合你定义的构造参数要求，需要传入必填的title和score两个命名参数。
• 你ItemList类中的_items是私有属性，建议补充公开getter方便外部安全访问列表数据。

1. 清理冗余代码 #

删掉全局的final itemList = ItemList();，所有ItemList的操作都通过Provider提供的实例完成。

2. 优化ItemList类定义 #

补充公开getter对外暴露只读的列表数据，避免外部直接修改内部私有数组：

class ItemList extends ChangeNotifier{
  final List<ItemData> _items = [];
  // 新增只读getter
  List<ItemData> get items => List.unmodifiable(_items);

  void add(ItemData item){
    _items.add(item);
    notifyListeners();
  }

  void update(){
    notifyListeners();
  }
}

3. 正确实现ListView.builder渲染 #

用Consumer监听ItemList的状态变化，自动触发UI刷新：

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("列表示例")),
      // 添加元素按钮示例
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // listen设为false，不需要监听状态变化的场景用这个方式获取实例
          Provider.of<ItemList>(context, listen: false).add(
            ItemData(title: "新条目", score: 85),
          );
        },
        child: const Icon(Icons.add),
      ),
      // 用Consumer监听状态变化渲染列表
      body: Consumer<ItemList>(
        builder: (context, itemList, child) {
          return ListView.builder(
            itemCount: itemList.items.length,
            itemBuilder: (context, index) {
              final currentItem = itemList.items[index];
              return ListTile(
                title: Text(currentItem.title),
                subtitle: Text("得分：${currentItem.score}"),
              );
            },
          );
        },
      ),
    );
  }
}

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