不使用IndexedStack，如何实现页面切换时的滚动位置状态保留？

以下是几种可行的方案，既保留页面滚动位置，又实现类似BottomNavigationBar的懒加载初始化：

1. 自定义Stack+懒加载缓存 + AutomaticKeepAliveClientMixin #

通过手动管理页面的创建与缓存，仅渲染当前激活的页面，同时利用AutomaticKeepAliveClientMixin保留页面状态（包括滚动位置）。

实现代码： #

首先，给需要保留状态的页面添加Mixin：

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

  @override
  State<KeepAliveListPage> createState() => _KeepAliveListPageState();
}

class _KeepAliveListPageState extends State<KeepAliveListPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 启用状态保留

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，否则状态不会保留
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
    );
  }
}

然后实现父组件的懒加载逻辑：

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

  @override
  State<LazyTabContainer> createState() => _LazyTabContainerState();
}

class _LazyTabContainerState extends State<LazyTabContainer> {
  int _currentTabIndex = 0;
  final List<Widget?> _cachedPages = [null, null, null]; // 缓存已创建的页面

  Widget _getPage(int index) {
    if (_cachedPages[index] == null) {
      switch(index) {
        case 0: _cachedPages[index] = const KeepAliveListPage(); break;
        case 1: _cachedPages[index] = const KeepAliveGridPage(); break;
        case 2: _cachedPages[index] = const KeepAliveDetailPage(); break;
      }
    }
    return _cachedPages[index]!;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: (index) => setState(() => _currentTabIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.grid_view), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
      body: Stack(
        children: List.generate(3, (index) {
          return Offstage(
            offstage: index != _currentTabIndex,
            child: _getPage(index),
          );
        }),
      ),
    );
  }
}

优缺点： #

• 优点：完全控制页面初始化时机，内存占用低，适合页面数量较多的场景
• 缺点：需要手动维护页面缓存，代码量略多

2. PageView + AutomaticKeepAliveClientMixin #

利用PageView的懒加载特性（默认仅初始化当前及前后各一个页面），结合Mixin保留滚动位置，同时与BottomNavigationBar联动。

实现代码： #

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

  @override
  State<PageViewTabContainer> createState() => _PageViewTabContainerState();
}

class _PageViewTabContainerState extends State<PageViewTabContainer> {
  int _currentTabIndex = 0;
  final PageController _pageController = PageController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: (index) {
          _pageController.jumpToPage(index);
          setState(() => _currentTabIndex = index);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.grid_view), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) => setState(() => _currentTabIndex = index),
        children: const [
          KeepAliveListPage(),
          KeepAliveGridPage(),
          KeepAliveDetailPage(),
        ],
      ),
    );
  }
}

优缺点： #

• 优点：官方组件集成简单，自带页面切换动画，适配BottomNavigationBar逻辑自然
• 缺点：默认预加载前后页面，若页面资源消耗大，可能影响性能（可通过viewportFraction调整预加载范围，但效果有限）

3. 懒加载版IndexedStack #

对原生IndexedStack进行改造，仅在首次切换到对应索引时创建页面，后续复用已创建的组件，既保留状态保留特性，又实现懒加载。

实现代码： #

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

  @override
  State<LazyIndexedStackContainer> createState() => _LazyIndexedStackContainerState();
}

class _LazyIndexedStackContainerState extends State<LazyIndexedStackContainer> {
  int _currentTabIndex = 0;
  final List<Widget?> _cachedPages = [null, null, null];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTabIndex,
        onTap: (index) => setState(() => _currentTabIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.grid_view), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
      body: IndexedStack(
        index: _currentTabIndex,
        children: List.generate(3, (index) {
          return _cachedPages[index] ??= switch(index) {
            0 => const KeepAliveListPage(),
            1 => const KeepAliveGridPage(),
            2 => const KeepAliveDetailPage(),
            _ => const SizedBox(),
          };
        }),
      ),
    );
  }
}

优缺点： #

• 优点：改动最小，完全保留IndexedStack的状态保留逻辑，无需额外管理页面渲染
• 缺点：页面一旦创建就会常驻内存，页面过多时可能导致内存占用较高

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