TabBarView中ListView的状态保持：避免重建与记住滚动位置

嘿，这个需求我太熟了！要实现Tab切换时ListView不重建且记住滚动位置，主要靠两个关键技术：AutomaticKeepAliveClientMixin 阻止组件销毁，以及 PageStorageKey 保存滚动位置。下面一步步给你拆解实现：

1. 阻止ListView组件重建：使用AutomaticKeepAliveClientMixin #

默认情况下，TabBarView切换时，非当前页面的组件会被销毁，再次切换回来会重建。要避免这个问题，我们需要给ListView所在的StatefulWidget混入AutomaticKeepAliveClientMixin，并实现wantKeepAlive返回true，同时在build方法里必须调用super.build(context)。

示例代码：

class KeepAliveListView extends StatefulWidget {
  final String listKey;
  final String title;

  const KeepAliveListView({
    super.key,
    required this.listKey,
    required this.title,
  });

  @override
  State<KeepAliveListView> createState() => _KeepAliveListViewState();
}

class _KeepAliveListViewState extends State<KeepAliveListView> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 告诉框架要保持组件状态

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，否则无法生效
    return ListView.builder(
      key: PageStorageKey(widget.listKey), // 用于保存滚动位置的key
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('${widget.title} 第 ${index+1} 项'),
        );
      },
    );
  }
}

2. 记住滚动位置：给ListView设置PageStorageKey #

PageStorage是Flutter内置的用于保存页面状态的组件，给每个ListView设置唯一的PageStorageKey，框架就会自动帮我们保存滚动位置，切换Tab时自动恢复。

注意：每个ListView的key必须唯一，比如上面代码里的listKey分别传'list1'和'list2'。

完整的TabBarView示例 #

把上面的组件整合到Tab结构中，完整代码如下：

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

  @override
  State<TabScrollDemo> createState() => _TabScrollDemoState();
}

class _TabScrollDemoState extends State<TabScrollDemo> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(text: '列表1'),
            Tab(text: '列表2'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          KeepAliveListView(listKey: 'list1', title: '列表1'),
          KeepAliveListView(listKey: 'list2', title: '列表2'),
        ],
      ),
    );
  }
}

额外说明 #

• 如果你的ListView是用StatelessWidget实现的，需要先改成StatefulWidget才能使用AutomaticKeepAliveClientMixin。
• 要是你用了第三方状态管理（比如Provider、Bloc），只要组件不重建，状态自然也会保留，和这个方案兼容。
• 测试的时候可以滚动其中一个列表到中间位置，切换Tab再切回来，就能看到滚动位置和组件状态都保留了，和你提供的GIF效果一致。

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