Flutter中调用setState时如何保持屏幕滚动位置？

当调用setState()时，ListView、SingleChildScrollView等带滚动功能的组件常会出现滚动位置被重置的问题，除了已知的常规方案外，还有这些解决办法：

• 使用PageStorageKey自动保存位置
  给滚动组件设置唯一的PageStorageKey，Flutter的PageStorage机制会自动帮你保存组件的滚动偏移量，刷新后自动恢复位置。注意key要保证唯一，避免和其他组件冲突。
  示例代码：

  ListView(
    key: const PageStorageKey('home_list_view'),
    children: [/* 列表项 */],
  )
  

• 手动通过ScrollController控制位置
  自己创建ScrollController，实时记录滚动偏移量，在组件刷新后主动恢复位置：

  1. 定义控制器和保存偏移量的变量：

     final ScrollController _scrollController = ScrollController();
     double _savedScrollOffset = 0.0;
     

  2. 监听滚动事件，实时保存位置：

     @override
     void initState() {
       super.initState();
       _scrollController.addListener(() {
         _savedScrollOffset = _scrollController.offset;
       });
     }
     

  3. 在组件更新后恢复位置，比如在didUpdateWidget中：

     @override
     void didUpdateWidget(covariant MyPage oldWidget) {
       super.didUpdateWidget(oldWidget);
       _scrollController.jumpTo(_savedScrollOffset);
       // 也可以用animateTo实现平滑滚动：_scrollController.animateTo(_savedScrollOffset, duration: Duration(milliseconds: 300), curve: Curves.ease);
     }
     

  4. 记得在dispose时销毁控制器：

     @override
     void dispose() {
       _scrollController.dispose();
       super.dispose();
     }
     

  最后给滚动组件绑定这个控制器：

  ListView(
    controller: _scrollController,
    children: [/* 列表项 */],
  )
  

• 用AutomaticKeepAliveClientMixin保留组件状态
  如果滚动组件在TabBarView这类会频繁切换的场景中，setState导致Tab页重建时，使用这个Mixin可以让组件保持存活状态，包括滚动位置。需要重写wantKeepAlive返回true，且build方法里要调用super.build(context)：

  class MyTabContent extends StatefulWidget {
    @override
    _MyTabContentState createState() => _MyTabContentState();
  }
  
  class _MyTabContentState extends State<MyTabContent> with AutomaticKeepAliveClientMixin {
    @override
    bool get wantKeepAlive => true;
  
    @override
    Widget build(BuildContext context) {
      super.build(context); // 必须调用
      return ListView(
        children: [/* 列表项 */],
      );
    }
  }
  

• 缩小setState的刷新范围
  很多时候滚动位置重置是因为父组件setState导致整个滚动组件被重建。可以把需要刷新的UI部分抽成独立的StatefulWidget，让父组件不用触发全局刷新，滚动组件就不会被重建，自然保留滚动位置。比如原来父组件里的按钮点击触发setState，现在把按钮和它的逻辑拆成子组件，子组件自己管理状态，父组件无需刷新，ListView就不会受影响。

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