Flutter中如何通过按钮切换GNav底部导航栏页面

方案一：回调函数传递（无额外依赖，适合简单场景） #

这种方式直接通过父组件向子组件传递更新函数，实现子页面触发父组件的状态更新，完全保留GNav原有交互逻辑。

实现步骤： #

1. 在RootPage中定义更新选中索引的方法，并维护currentPage状态
2. 将该方法作为参数传递给子页面（如HomePage）
3. 在子页面按钮点击时调用该方法，触发RootPage的setState

RootPage 核心代码：

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentPage = 0;
  // 对应GNav的4个页面
  final List<Widget> _pages = [
    HomePage(onNavigateTo: _updateSelectedIndex), // 传递回调
    const PageTwo(),
    const PageThree(),
    const PageFour(),
  ];

  // 更新选中索引的方法
  void _updateSelectedIndex(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentPage],
      bottomNavigationBar: GNav(
        selectedIndex: _currentPage,
        onTap: _updateSelectedIndex, // 保留GNav原生点击逻辑
        // 你的GNav原有配置（图标、文字、样式等）
        tabs: const [
          GButton(icon: Icons.home, text: '首页'),
          GButton(icon: Icons.search, text: '搜索'),
          GButton(icon: Icons.favorite, text: '收藏'),
          GButton(icon: Icons.person, text: '我的'),
        ],
      ),
    );
  }
}

HomePage 核心代码：

class HomePage extends StatelessWidget {
  final Function(int) onNavigateTo; // 接收父组件传递的回调

  const HomePage({super.key, required this.onNavigateTo});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          // 点击按钮切换到第3个页面（索引为2）
          onNavigateTo(2);
        },
        child: const Text('跳转到收藏页'),
      ),
    );
  }
}

方案二：状态管理（Provider，适合复杂页面场景） #

如果项目页面层级较多，或多个子页面都需要触发导航切换，用Provider可避免逐层传递回调的麻烦。

实现步骤： #

1. 创建导航状态类，维护选中索引和更新方法
2. 在项目根节点注入状态
3. 在RootPage中监听状态变化，更新GNav和页面
4. 在子页面中调用状态更新方法

1. 创建导航状态类：

import 'package:flutter/material.dart';

class NavigationState extends ChangeNotifier {
  int _currentIndex = 0;

  int get currentIndex => _currentIndex;

  void setCurrentIndex(int index) {
    _currentIndex = index;
    notifyListeners(); // 通知监听者更新
  }
}

2. 在根节点注入状态：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => NavigationState(),
      child: const MyApp(),
    ),
  );
}

3. RootPage 核心代码：

class RootPage extends StatelessWidget {
  const RootPage({super.key});

  @override
  Widget build(BuildContext context) {
    final navState = Provider.of<NavigationState>(context);
    final List<Widget> _pages = const [
      HomePage(),
      PageTwo(),
      PageThree(),
      PageFour(),
    ];

    return Scaffold(
      body: _pages[navState.currentIndex],
      bottomNavigationBar: GNav(
        selectedIndex: navState.currentIndex,
        onTap: navState.setCurrentIndex, // 绑定GNav原生点击
        // 你的GNav原有配置
        tabs: const [
          GButton(icon: Icons.home, text: '首页'),
          GButton(icon: Icons.search, text: '搜索'),
          GButton(icon: Icons.favorite, text: '收藏'),
          GButton(icon: Icons.person, text: '我的'),
        ],
      ),
    );
  }
}

4. HomePage 核心代码：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final navState = Provider.of<NavigationState>(context, listen: false);
    return Center(
      child: ElevatedButton(
        onPressed: () {
          navState.setCurrentIndex(2); // 切换到收藏页
        },
        child: const Text('跳转到收藏页'),
      ),
    );
  }
}

关键注意事项： #

• 绝对不要用Navigator.push跳转，这会将新页面压入栈顶，导致包含GNav的RootPage被隐藏
• GNav的selectedIndex必须和当前页面索引绑定，onTap事件也要同步更新索引，确保原生交互正常
• 若之前使用GlobalKey失败，大概率是未正确获取RootPage的状态实例，回调或状态管理方案更稳定

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