Flutter：解决SliverAppBar处于普通状态时切换Tab导致ListView滚动位置重置的问题

我明白你遇到的这个困扰——这个问题本质是NestedScrollView和Flutter内置的PageStorage机制在SliverAppBar状态变化时的冲突导致的。当你滚动Tab2到列表底部，SliverAppBar从浮动状态切换为固定状态时，NestedScrollView的内部可滚动区域尺寸发生了变化，这会干扰PageStorage对Tab1滚动位置的正常保存与恢复。

下面给你两种可靠的解决方案：

方案一：使用独立的PageStorageBucket隔离滚动位置存储 #

我们可以给TabBarView外层添加一个自定义的PageStorage容器，用独立的PageStorageBucket来存储每个Tab的滚动位置，避免NestedScrollView的内部状态干扰。

修改后的完整代码如下：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  late TabController _controller;
  // 创建独立的PageStorageBucket
  final _pageStorageBucket = PageStorageBucket();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        floatHeaderSlivers: true,
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            floating: true,
            pinned: true,
            bottom: TabBar(
              controller: _controller,
              tabs: const [
                Tab(text: 'ONE'),
                Tab(text: 'TWO'),
              ],
            ),
          ),
        ],
        // 将TabBarView包裹在自定义的PageStorage中
        body: PageStorage(
          bucket: _pageStorageBucket,
          child: TabBarView(
            controller: _controller,
            children: [
              buildPageOne(),
              buildPageTwo(),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildPageOne() => ListView.builder(
        key: const PageStorageKey<String>('pageOne'),
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(
          title: Text('PAGE $index'),
        ),
      );

  Widget buildPageTwo() => ListView.builder(
        key: const PageStorageKey<String>('pageTwo'),
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(
          title: Text('PAGE2 $index'),
        ),
      );
}

关键修改点：

• 创建了独立的_pageStorageBucket，避免和NestedScrollView默认的Bucket共享状态
• 用PageStorage包裹TabBarView，指定使用我们自定义的Bucket

方案二：使用AutomaticKeepAliveClientMixin保持页面存活 #

另一种思路是让每个Tab对应的ListView页面保持存活状态，不被Flutter框架销毁，这样滚动位置自然会被保留。我们需要把每个ListView封装成独立的StatefulWidget，并混入AutomaticKeepAliveClientMixin。

示例代码（以Tab1的页面为例）：

class ListOnePage extends StatefulWidget {
  @override
  _ListOnePageState createState() => _ListOnePageState();
}

class _ListOnePageState extends State<ListOnePage> with AutomaticKeepAliveClientMixin {
  // 重写该属性，返回true表示保持页面状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则状态不会被保持
    super.build(context);
    return ListView.builder(
      key: const PageStorageKey<String>('pageOne'),
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(
        title: Text('PAGE $index'),
      ),
    );
  }
}

同样的方式封装Tab2的ListTwoPage，然后在HomePage的TabBarView中直接使用这两个页面即可。

这两种方案都能解决你遇到的问题，方案一更轻量，方案二更适合复杂页面的状态保持。你可以根据自己的需求选择~

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