Flutter中Curved Navigation Bar如何堆叠页面并保存首页状态？

你的问题可以解决，下面给你两种实用方案：

方案一：用IndexedStack快速实现状态全保留 #

直接把当前的body: screens[index]替换成IndexedStack，它会将所有页面堆叠在一起，只显示当前选中索引的页面，同时保留所有页面的状态，切换时不会重建页面。

修改后的代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    bottomNavigationBar: CurvedNavigationBar(
      index : 0,
      height: 60,
      items: const [
        Icon(Icons.home),
        Icon(Icons.post_add),
        Icon(Icons.person),
        Icon(Icons.settings)
      ],
      onTap: (index) {
        setState(() {
          this.index = index;
        });
      },
      animationDuration: const Duration(milliseconds: 300),
      backgroundColor: Colors.white,
      color: Colors.lightBlueAccent,
    ),
    // 替换这里的body
    body: IndexedStack(
      index: index,
      children: screens,
    ),
  );
}

• 优点：实现简单，所有页面状态都会保留
• 缺点：App启动时会初始化所有页面，如果页面包含大量数据加载或复杂逻辑，可能影响启动速度

方案二：用AutomaticKeepAliveClientMixin按需保留状态 #

如果只想让特定页面（比如首页）保留状态，其他页面正常重建，可以给目标页面添加AutomaticKeepAliveClientMixin：

以首页为例：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with AutomaticKeepAliveClientMixin {
  // 重写该方法返回true，开启状态保留
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则状态保留不生效
    super.build(context);
    return /* 你的首页布局代码 */;
  }
}

这种方式下，你的原代码body: screens[index]不需要改动，只有添加了mixin的页面会在切换时保留状态，其他页面仍会重新创建，适合只需要部分页面保活的场景。

关于堆叠页面的问题：IndexedStack就是堆叠页面的实现方式，它会将所有子页面堆叠在同一个容器中，通过控制index来显示对应页面，完全满足你的需求。

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