Flutter中ListView用自定义StatefulWidget致滚动卡顿的优化方案

嘿，这个问题我之前也碰到过！其实核心问题是ListView.builder默认会回收不可见item的State，导致大量State被频繁创建和销毁，既消耗资源又造成滚动卡顿。下面给你具体的优化方案：

核心思路：复用State对象，避免频繁销毁重建 #

Flutter提供了AutomaticKeepAliveClientMixin，可以让StatefulWidget的State在item滚出屏幕时保持存活，下次滚回时直接复用，不用重新创建。这样就能减少dispose()和initState()的调用次数，解决卡顿问题。

修改后的代码实现 #

只需要给你的State类混入AutomaticKeepAliveClientMixin，并实现对应的方法即可：

class MyCustomStatefulWidget extends StatefulWidget {
  final String title;
  MyCustomStatefulWidget(this.title);

  @override
  _MyCustomStatefulWidgetState createState() => _MyCustomStatefulWidgetState();
}

class _MyCustomStatefulWidgetState extends State<MyCustomStatefulWidget> with AutomaticKeepAliveClientMixin {
  // 重写该方法，返回true表示需要保持State存活
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则AutomaticKeepAliveClientMixin不会生效
    super.build(context);
    return Text(widget.title);
  }

  @override
  void dispose() {
    print("dispose");
    super.dispose();
  }
}

原理说明 #

• AutomaticKeepAliveClientMixin会给你的Widget自动添加一个KeepAlive组件，告诉ListView：这个item的State需要被保留，不要回收。
• 当item滚出屏幕时，State不会被dispose()，只会暂时隐藏；当item再次滚回屏幕，直接复用已有的State，不用重新执行初始化逻辑。
• 这样一来，即使列表有1000个项，也只会创建当前屏幕可见数量的State对象，滚动时不会频繁触发销毁和重建，卡顿问题自然就解决了。

注意事项 #

• 如果你的State持有需要手动释放的资源（比如定时器、网络订阅），不要完全依赖wantKeepAlive，可以在item长时间不可见时，动态设置wantKeepAlive = false，让State被回收，避免内存泄漏。
• super.build(context)必须调用，否则Mixin的逻辑不会生效，这点很容易忽略！

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