Flutter技术问题：如何让ElevatedButton跳转至BottomNavigationBar的第二个页面

问题根源 #

你当前用Navigator.pushReplacement重新创建了仅包含Dashbored页面的Layout实例，这会丢失原有所有页面，同时新Layout的默认索引为0，导致底部导航仍显示首页。正确做法是直接控制现有Layout组件的页面索引，而非重新创建。

解决方案：使用GlobalKey控制Layout状态 #

步骤1：在main.dart中定义GlobalKey并传递给Layout

class myapp extends StatelessWidget {
  // 定义GlobalKey用于获取Layout的State实例
  static final GlobalKey<_LayoutState> layoutKey = GlobalKey<_LayoutState>();
  
  const myapp({super.key});

  @override
  Widget build(BuildContext context) {
    Map<int,Widget> pages = {
      0:const HomePage(),
      1:const Dashbored(),
      2:const Products(),
      3:const Profile(),
    };
    return Layout(
      key: layoutKey, // 将GlobalKey传递给Layout
      children: pages,
    );
  }
}

步骤2：在Layout.dart中暴露更新索引的方法

class Layout extends StatefulWidget {
  const Layout({super.key, required this.children});
  final Map<int,Widget> children;

  @override
  State<Layout> createState() => _LayoutState();
}

class _LayoutState extends State<Layout> {
  int pageIndex = 0;
  
  // 暴露更新页面索引的方法
  void setPageIndex(int index) {
    setState(() {
      pageIndex = index;
    });
  }

  onNavigationChanged(int index) {
    setState(() {
      pageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const MyAppBar(),
      endDrawer: const MyDrawer(),
      bottomNavigationBar: MyNavigationBar(
        onNavigationChanged: onNavigationChanged,
        pageIndex: pageIndex,
      ),
      body: widget.children[pageIndex],
    );
  }
}

步骤3：修改home_page.dart中的按钮点击逻辑

无需使用Navigator跳转，直接通过GlobalKey调用Layout的索引更新方法：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    alignment: Alignment.center,
    fixedSize: const Size(160, 50),
    backgroundColor: const Color.fromARGB(255, 0, 93, 186),
    foregroundColor: const Color.fromARGB(255, 69, 164, 243),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(28),
    ),
  ),
  onPressed: () {
    // 直接切换到索引为1的页面
    myapp.layoutKey.currentState?.setPageIndex(1);
  },
  child: const Text(
    "START ALGORITHM",
    style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 14),
  ),
),

备选方案：状态管理（适用于大型项目） #

如果项目规模较大，推荐用状态管理库（如Provider）统一管理页面索引：

1. 创建状态类存储并更新页面索引
2. 在Layout中监听状态变化刷新页面
3. 在HomePage中触发状态更新完成页面切换

内容的提问来源于stack exchange，提问作者Summar Malkawi