当前位置：首页 > news >正文

鸿蒙Flutter实战：IndexedStack保持Tab页面状态

news 2026/6/4 9:57:11

前言

底部导航栏切换 Tab 是移动应用最常见的交互模式之一。但 Flutter 初学者容易踩一个坑：切换 Tab 后切回来，之前页面的滚动位置、输入内容、选中状态全丢了——页面被重建了。

这是因为 Flutter 的 widget 是声明式的：当BottomNavigationBar切换索引时，如果使用_pages[_currentIndex]或if/switch切换子 widget，旧的 widget 会被 dispose，新的被创建。

解决方案是IndexedStack——它同时持有所有子 widget，但只渲染当前索引的那一个。本文拆解IndexedStack的工作原理、性能影响和使用场景。

项目仓库：todo_flutter_harmony

问题重现：错误写法

// 错误写法——每次切换都会重建页面classHomePageextendsStatefulWidget{@overrideState<HomePage>createState()=>_HomePageState();}class_HomePageStateextendsState<HomePage>{int _currentIndex=0;@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:_buildPage(_currentIndex),// 直接调用方法bottomNavigationBar:BottomNavigationBar(currentIndex:_currentIndex,onTap:(index){setState(()=>_currentIndex=index);},items:const[...],),);}Widget_buildPage(int index){switch(index){case0:returnconstMemoListPage();case1:returnconstTodoListPage();case2:returnconstDiaryListPage();case3:returnconstStatsPage();default:returnconstSizedBox();}}}

问题：当_currentIndex从 0 变为 1 时，_buildPage(0)返回的MemoListPagewidget 从树中被移除，其State被dispose。当切回 0 时，一个新的MemoListPage被创建，所有状态丢失。

IndexedStack：正确的写法

classHomePageextendsStatefulWidget{@overrideState<HomePage>createState()=>_HomePageState();}class_HomePageStateextendsState<HomePage>{int _currentIndex=0;@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:IndexedStack(index:_currentIndex,children:const[MemoListPage(),TodoListPage(),DiaryListPage(),StatsPage(),],),bottomNavigationBar:NavigationBar(selectedIndex:_currentIndex,onDestinationSelected:(index){setState(()=>_currentIndex=index);},destinations:const[NavigationDestination(icon:Icon(Icons.note_alt_outlined),label:'备忘录'),NavigationDestination(icon:Icon(Icons.checklist_outlined),label:'待办'),NavigationDestination(icon:Icon(Icons.book_outlined),label:'日记'),NavigationDestination(icon:Icon(Icons.bar_chart),label:'统计'),],),);}}

IndexedStack的工作原理：

所有children都被创建并保持在 widget 树中
只有children[index]被渲染（可见）
未渲染的 children 仍然存活，其State不会被 dispose
切换到另一个 index 时，之前被隐藏的 child 变成可见，但其 State 原封不动

IndexedStack vs 其他方案

方案	状态保持	内存占用	首次加载
`IndexedStack`	✅ 全部保持	高（所有页面常驻）	所有页面同时初始化
`PageView`+`AutomaticKeepAliveClientMixin`	✅ 按需保持	中	懒加载
`Offstage`	✅ 保持（但仍在树中）	高	所有页面同时初始化
`Visibility`	❌ 不保持	低	每次重建
`if/switch`	❌ 不保持	低	每次重建

AutomaticKeepAliveClientMixin方案：

classMemoListPageextendsStatefulWidget{@overrideState<MemoListPage>createState()=>_MemoListPageState();}class_MemoListPageStateextendsState<MemoListPage>withAutomaticKeepAliveClientMixin{@overrideboolgetwantKeepAlive=>true;// 关键@overrideWidgetbuild(BuildContextcontext){super.build(context);// 必须调用return...;}}

配合PageView使用：

PageView(controller:_pageController,children:const[MemoListPage(),TodoListPage(),DiaryListPage(),StatsPage(),],)

这个方案的优点是页面可以懒加载（切到该页才初始化），但代码更复杂。

对于只有 4 个 Tab 的备忘录应用，IndexedStack的简洁性胜出。

内存分析

4 个页面同时存活会占多少内存？

MemoListPage：一个 ListView + 若干 Provider Consumer，约 2-3MB
TodoListPage：同上，约 2-3MB
DiaryListPage：同��，约 2-3MB
StatsPage：一个 Grid 布局 + 热力图，约 3-5MB

总计约 10-15MB。对于现代手机（通常 4GB+ RAM），这个内存开销完全可以接受。

数据加载时机

使用IndexedStack时，所有 4 个页面在首次创建时都会执行initState。这意味着 4 个 Provider 的数据加载会同时触发：

// MemoListPage.initStateWidgetsBinding.instance.addPostFrameCallback((_){context.read<MemoProvider>().loadMemos();});// TodoListPage.initStateWidgetsBinding.instance.addPostFrameCallback((_){context.read<TodoProvider>().loadTodos();});// DiaryListPage.initStateWidgetsBinding.instance.addPostFrameCallback((_){context.read<DiaryProvider>().loadDiaries();});// StatsPage.initState —— 不需要额外加载，数据来自其他 3 个 Provider

4 个addPostFrameCallback都在同一帧中注册，在下一帧一起触发。由于每个 Provider 独立加载自己的数据（读 JSON 文件、解析、notifyListeners），它们之间是串行但在 event loop 上快速连续执行。对于几百 KB 的 JSON 文件，总加载时间 < 50ms。

统计页的特殊处理

统计页的数据来自另外 3 个 Provider——它不需要自己加载数据，而是 watch 另外 3 个：

classStatsPageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){finalmemoProvider=context.watch<MemoProvider>();finaltodoProvider=context.watch<TodoProvider>();finaldiaryProvider=context.watch<DiaryProvider>();returnSingleChildScrollView(padding:constEdgeInsets.all(16),child:Column(children:[_buildStatsGrid(memoProvider,todoProvider,diaryProvider),constSizedBox(height:20),_buildCompletionProgress(todoProvider),constSizedBox(height:20),_buildMoodDistribution(diaryProvider),constSizedBox(height:20),_buildDiaryHeatmap(diaryProvider),],),);}}