Flutter中setState触发后ListView.builder不重建问题分析与解决

问题场景 #

• 使用ListView.builder渲染列表，将背景色作为列表项的属性存储
• 点击列表项触发setState修改对应索引项的颜色值，控制台打印确认颜色已变更，但ListView.builder并未重新渲染更新后的样式

问题根源 #

列表数据被定义在Widget的build方法内部，每次Widget重建时build方法会重新执行，导致列表被重新初始化，覆盖了之前修改的状态，最终ListView.builder拿到的还是旧数据，无法触发刷新。

解决方案 #

将列表数据移到Widget的状态类（State）的成员变量中，而非build方法内部。这样setState调用时，状态类的成员变量会保留修改后的状态，build方法执行时会使用更新后的列表数据，从而触发ListView.builder重新渲染。

示例代码：

class MyListPage extends StatefulWidget {
  const MyListPage({super.key});

  @override
  State<MyListPage> createState() => _MyListPageState();
}

class _MyListPageState extends State<MyListPage> {
  // 列表定义为State成员变量，避免build重建时被重新初始化
  final List<ItemModel> _items = List.generate(
    10,
    (index) => ItemModel(backgroundColor: Colors.white),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              setState(() {
                _items[index].backgroundColor = Colors.blue;
                print(_items[index].backgroundColor); // 确认颜色已修改
              });
            },
            child: Container(
              color: _items[index].backgroundColor,
              height: 60,
              alignment: Alignment.center,
              child: Text('Item $index'),
            ),
          );
        },
      ),
    );
  }
}

class ItemModel {
  Color backgroundColor;
  ItemModel({required this.backgroundColor});
}

逻辑说明：把列表_items放在State类中存储，每次setState触发状态更新后，build方法会读取最新的列表数据，ListView.builder会根据更新后的项属性重新渲染对应列表项。

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