Flutter自定义列表项组件滚动时状态重置怎么办？

这个问题很典型，我也踩过这个坑。你遇到的情况是因为 ListView.builder 会复用 item 组件来提升性能，当你滚动时，滑出屏幕的 ListItem 会被销毁或重用，而它的状态是保存在 StatefulWidget 内部的，一旦组件重建，_selected 就回到初始值 false，所以颜色就没了。

原理是这样：Flutter 的 ListView.builder 只渲染可视区域内的 item，比如屏幕上只能显示 5 个，那它就只创建这 5 个对应的 Widget。当你滚动时，原来在上面的 item 滑出去后会被回收，下面新进来的 item 会复用这些老的组件实例，但 createState 是重新调用的，所以状态丢了。

你加 Key 没错，但只加 Key 不够。Key 的作用是帮助 Flutter 区分不同 item，避免错乱，但它不能帮你持久化状态。真正要解决这个问题，得把状态从 item 自身抽出来，提到外面去管理。

下面是正确的做法，我一步步说清楚。

第一种方案：把选中状态提到父级（推荐）

你可以用一个 Map 来记录每个 item 的选中状态，由父组件维护，然后传给子组件。

比如这样改：

class MyListPage extends StatefulWidget {

  @override

  _MyListPageState createState() => _MyListPageState();

}



class _MyListPageState extends State {

  // 用一个 map 存储每个 item 的选中状态，key 可以是 index 或唯一 id

  final Map _selectionMap = {};



  final List items = List.generate(100, (i) => 'Item $i');



  @override

  Widget build(BuildContext context) {

    return ListView.builder(

      itemCount: items.length,

      itemBuilder: (context, index) {

        // 确保每个 index 都有默认状态

        if (!_selectionMap.containsKey(index)) {

          _selectionMap[index] = false;

        }



        return ListItem(

          title: items[index],

          // 把当前是否选中传进去

          selected: _selectionMap[index]!,

          // 提供回调，让子组件通知状态变化

          onTap: () {

            setState(() {

              _selectionMap[index] = !_selectionMap[index]!;

            });

          },

        );

      },

    );

  }

}

然后修改你的 ListItem，变成 StatelessWidget，因为它不需要自己管理状态了：

class ListItem extends StatelessWidget {

  final String title;

  final bool selected;

  final VoidCallback onTap;



  const ListItem({

    Key? key,

    required this.title,

    required this.selected,

    required this.onTap,

  }) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return GestureDetector(

      onTap: onTap, // 点击时通知父级更新状态

      child: Container(

        color: selected ? Colors.blue : null,

        padding: EdgeInsets.symmetric(vertical: 16),

        child: Text(title),

      ),

    );

  }

}

这样改完之后，状态存在父组件里，不会因为 item 被重建而丢失。每次 rebuild 时，item 会根据 _selectionMap 里的值重新显示正确颜色。

第二种方案：使用全局状态管理（适合复杂场景）

如果你的列表项状态需要跨页面、跨组件共享，可以用 Provider、Riverpod 或 Bloc 这类状态管理工具。但就你现在这需求，没必要搞那么重。

第三种方案：用 AutomaticKeepAliveClientMixin（不推荐用于这种场景）

有人会想到让 State 不被销毁，通过继承 AutomaticKeepAliveClientMixin 并返回 true 来保持状态。但这只是“保住”组件不被重建，并不能解决本质问题——状态还是耦合在 UI 上，不利于维护。而且大量 item 都 keep alive 会吃内存，ListView 的优化就白做了。

所以结论是：别让列表项自己管状态，状态往上提。

顺便提醒一点：如果你的 item 数据有唯一 id，建议用 id 当 map 的 key，而不是 index。因为 index 可能变，比如插入删除的时候，用 id 更稳定。

总结一下：
- 列表滚动时状态丢失，是因为 item 被重建，StatefulWidget 的状态没持久化
- 解决办法是把状态提到父级或外部管理
- 子组件变成无状态，通过参数和回调通信
- 这样既稳定又符合 Flutter 的数据流向设计

你照这个改一下，问题就没了。我之前写电商项目的时候，购物车勾选也是这么处理的，不然一滚屏幕全乱套。

这是因为Flutter的列表项会被复用，导致状态丢失。你现在的写法里，状态是放在每个Item里的，滚动时Item被重建，自然就重置了。

解决办法很简单，把选中状态提到外面去，让ListView的父级来管理。下面是修改后的代码，复制过去试试：

class ListItem extends StatelessWidget {

  final String title;

  final bool isSelected;

  final VoidCallback onTap;



  const ListItem({

    Key? key,

    required this.title,

    required this.isSelected,

    required this.onTap,

  }) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return GestureDetector(

      onTap: onTap,

      child: Container(

        color: isSelected ? Colors.blue : null,

        child: Text(title),

      ),

    );

  }

}



class ListExample extends StatefulWidget {

  @override

  _ListExampleState createState() => _ListExampleState();

}



class _ListExampleState extends State {

  List<bool> _selections = List.filled(20, false);



  void _toggle(int index) {

    setState(() {

      _selections[index] = !_selections[index];

    });

  }



  @override

  Widget build(BuildContext context) {

    return ListView.builder(

      itemCount: _selections.length,

      itemBuilder: (context, index) {

        return ListItem(

          title: "Item $index",

          isSelected: _selections[index],

          onTap: () => _toggle(index),

        );

      },

    );

  }

}

这样就把状态抽到外面了，每个Item只负责展示，逻辑交给父级管理。滚动时就不会丢状态了。这种方式更符合Flutter的最佳实践，推荐这么干。