Flutter应用使用google_nav_bar库出现底部导航栏溢出问题

问题原因 #

你添加了5个导航标签，默认的布局参数（内边距、图标/文字尺寸）导致总宽度超出屏幕范围，而用Expanded包裹会破坏bottomNavigationBar的布局约束，导致导航栏消失。

具体解决方法 #

可以通过调整GNav的内置参数来适配屏幕宽度，以下是几种可行方案：

方案1：调整内边距、图标和文字尺寸

修改你的GNav代码，添加/调整以下参数：

bottomNavigationBar: GNav(
  tabActiveBorder: Border.all(color: Colors.red),
  tabBorderRadius: 55,
  tabBackgroundColor: Color.fromARGB(105, 107, 105, 105),
  gap: 3, // 缩小图标和文字的间距
  iconSize: 24, // 缩小图标尺寸
  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8), // 减少左右内边距
  textStyle: Theme.of(context).textTheme.bodySmall?.copyWith(fontSize: 12), // 缩小文字尺寸
  onTabChange: (index) {},
  tabs: const [
    GButton(
      icon: Icons.schedule,
      text: "Clock",
      textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
    ),
    GButton(
      icon: Icons.language,
      text: "World",
      textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
    ),
    GButton(
      icon: Icons.alarm,
      text: "Alarm",
      textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
    ),
    GButton(
      icon: Icons.timer,
      text: "Timer",
      textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
    ),
    GButton(
      icon: Icons.calendar_month_outlined,
      text: "To Do",
      textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
    )
  ],
),

方案2：手动设置每个Tab的宽度

通过MediaQuery获取屏幕宽度，给每个Tab设置固定宽度，确保总宽度适配屏幕：

bottomNavigationBar: GNav(
  tabActiveBorder: Border.all(color: Colors.red),
  tabBorderRadius: 55,
  tabBackgroundColor: Color.fromARGB(105, 107, 105, 105),
  gap: 5,
  textStyle: Theme.of(context).textTheme.bodySmall,
  tabWidth: MediaQuery.of(context).size.width / 5 - 16, // 5个Tab平分屏幕宽度，减去内边距
  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
  onTabChange: (index) {},
  tabs: const [
    GButton(icon: Icons.schedule, text: "Clock", textStyle: TextStyle(fontWeight: FontWeight.bold)),
    GButton(icon: Icons.language, text: "World", textStyle: TextStyle(fontWeight: FontWeight.bold)),
    GButton(icon: Icons.alarm, text: "Alarm", textStyle: TextStyle(fontWeight: FontWeight.bold)),
    GButton(icon: Icons.timer, text: "Timer", textStyle: TextStyle(fontWeight: FontWeight.bold)),
    GButton(icon: Icons.calendar_month_outlined, text: "To Do", textStyle: TextStyle(fontWeight: FontWeight.bold)),
  ],
),

方案3：小屏设备隐藏文字

如果以上方案还是不行，可以在小屏设备上隐藏文字，只保留图标：

bottomNavigationBar: LayoutBuilder(
  builder: (context, constraints) {
    final isSmallScreen = constraints.maxWidth < 360;
    return GNav(
      tabActiveBorder: Border.all(color: Colors.red),
      tabBorderRadius: 55,
      tabBackgroundColor: Color.fromARGB(105, 107, 105, 105),
      gap: isSmallScreen ? 0 : 5,
      textStyle: Theme.of(context).textTheme.bodySmall,
      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
      onTabChange: (index) {},
      tabs: [
        GButton(
          icon: Icons.schedule,
          text: isSmallScreen ? "" : "Clock",
          textStyle: TextStyle(fontWeight: FontWeight.bold),
        ),
        GButton(
          icon: Icons.language,
          text: isSmallScreen ? "" : "World",
          textStyle: TextStyle(fontWeight: FontWeight.bold),
        ),
        GButton(
          icon: Icons.alarm,
          text: isSmallScreen ? "" : "Alarm",
          textStyle: TextStyle(fontWeight: FontWeight.bold),
        ),
        GButton(
          icon: Icons.timer,
          text: isSmallScreen ? "" : "Timer",
          textStyle: TextStyle(fontWeight: FontWeight.bold),
        ),
        GButton(
          icon: Icons.calendar_month_outlined,
          text: isSmallScreen ? "" : "To Do",
          textStyle: TextStyle(fontWeight: FontWeight.bold),
        ),
      ],
    );
  },
),

注意事项 #

• 不要用Expanded包裹GNav，因为bottomNavigationBar本身是固定在底部的布局，Expanded需要在Row/Column等弹性布局中使用，直接包裹会导致布局约束冲突。

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