如何控制Google Navigation Bar？组件代码部署与使用问题咨询

页面部署：要不要每个页面新建文件？ #

不是必须，但强烈建议按页面功能拆分独立文件，代码维护起来会轻松很多。你完全可以通过状态管理（比如setState）或Navigator来切换页面内容，不用在每个页面重复写导航栏代码。

简单实现流程：

• 把每个页面的核心内容封装成独立的Widget（比如HomePage、SearchPage），可以放在同一个文件，也可以分文件（分文件更推荐）
• 在主页面用一个变量记录当前选中的导航索引，根据索引动态切换显示对应的页面组件

组件控制的核心方法 #

1. 基础选中状态与页面切换 #

用setState维护当前索引，点击导航项时更新索引，同步切换页面：

int _currentTab = 0;

// 对应导航项的页面列表
final List<Widget> _tabPages = [
  HomePage(),
  SearchPage(),
  ProfilePage(),
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _tabPages[_currentTab],
    bottomNavigationBar: GNav(
      selectedIndex: _currentTab,
      // 点击导航项时更新索引
      onTabChange: (index) => setState(() => _currentTab = index),
      // 配置导航项
      tabs: const [
        GButton(icon: Icons.home, text: '首页'),
        GButton(icon: Icons.search, text: '搜索'),
        GButton(icon: Icons.person, text: '我的'),
      ],
    ),
  );
}

2. 自定义样式控制 #

通过GNav的参数可以调整几乎所有外观细节：

• backgroundColor：导航栏整体背景色
• color：未选中状态下的图标/文字颜色
• activeColor：选中状态下的图标/文字颜色
• tabBackgroundColor：选中项的背景色块颜色
• padding：每个导航项的内边距（控制大小）
• gap：图标和文字之间的间距

示例配置：

GNav(
  backgroundColor: Colors.white,
  color: Colors.grey.shade600,
  activeColor: Colors.blueAccent,
  tabBackgroundColor: Colors.blueAccent.shade100,
  padding: EdgeInsets.symmetric(horizontal: 22, vertical: 16),
  gap: 6,
  tabs: [...],
)

3. 高级控制：路由跳转 #

如果需要跳转到全新的页面（而非在当前页面切换内容），可以在onTabChange里用Navigator：

onTabChange: (index) {
  switch(index) {
    case 0:
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => HomePage()));
      break;
    case 1:
      Navigator.push(context, MaterialPageRoute(builder: (_) => SearchPage()));
      break;
  }
}

小提示 #

如果你的首页代码已经有导航栏，但切换逻辑失效，优先检查：

• 是否正确绑定了selectedIndex到状态变量
• onTabChange回调有没有正确更新状态或触发路由

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