Flutter滚动时如何保持状态？网格组件点击变色状态丢失求助

这个问题其实是Flutter滚动组件的复用机制导致的——GridView为了节省内存，会把滚出屏幕的item组件销毁，当它们再次滚回可视区域时，会重新创建组件实例，原来存在item内部的状态（比如你这里的cellColor）自然就丢失了。

要解决这个问题，核心是把单元格的状态抽离到组件外部的数据源中，让状态和组件实例解绑。具体可以这么做：

步骤1：定义独立的状态数据源 #

在你的_GridWidgetState里，创建一个用来存储每个单元格颜色的列表（根据你的网格数量调整），初始化时给每个单元格设置默认颜色：

class _GridWidgetState extends State<GridWidget> {
  // 假设网格有20个单元格，默认用灰色填充
  List<Color> _cellColors = List.generate(20, (index) => Colors.grey);
  
  @override
  Widget build(BuildContext context) {
    // 后续代码在这里实现
  }
}

步骤2：构建GridView时绑定数据源 #

在构建每个单元格的时候，不再使用局部的cellColor变量，而是直接从_cellColors列表中根据索引获取对应颜色；同时在onTap方法里更新数据源并触发UI重建：

@override
Widget build(BuildContext context) {
  return GridView.builder(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4, // 可根据需求调整每行单元格数量
    ),
    itemCount: _cellColors.length,
    itemBuilder: (context, index) {
      return GestureDetector(
        onTap: () {
          setState(() {
            // 点击时切换颜色，这里示例是灰色和红色互转，可自定义逻辑
            _cellColors[index] = _cellColors[index] == Colors.grey
               ? Colors.red
                : Colors.grey;
          });
        },
        child: Container(
          color: _cellColors[index],
          margin: const EdgeInsets.all(2),
        ),
      );
    },
  );
}

关键原理 #

这样处理后，不管单元格组件被销毁还是重建，它的颜色都是从外部的_cellColors列表里读取的，点击修改的也是这个列表里的值。setState触发GridView重新构建时，因为数据源是持久化的，所以滚动回来后单元格的颜色状态就能完整保留了。

如果你的网格是动态生成的（比如数量不固定），也可以用Map<int, Color>来存储——键是单元格的唯一标识，值是对应的颜色，逻辑和列表方案完全一致。

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