google_nav_bar库使用疑问：底部导航栏选项无法正常读取

你的导航栏选项无法正常读取，核心原因是外层Container设置的高度过小（size.height * .06），GNav组件包含图标、文字以及内边距，这个高度不足以容纳所有内容，导致元素被挤压截断。

修复方案 #

• 移除外层Container的固定高度限制，让容器自适应GNav的实际高度：
  删除这一行代码：height: size.height * .06,
• 若需要固定高度，可调整为能容纳内容的数值，比如size.height * .1，确保图标和文字完整显示。

修改后的代码示例 #

Container(
        width: size.width,
        decoration: const BoxDecoration(
            color: Color.fromARGB(255, 54, 54, 54),
            border: Border(
              top: BorderSide(
                color: Color.fromARGB(255, 44, 44, 44),
                width: 3.0,
              ),
            )),
        // 移除或调整高度限制
        // height: size.height * .06,
        child: Container(
            decoration: BoxDecoration(
              color: Colors.blue,
              boxShadow: [
                BoxShadow(
                  blurRadius: 20,
                  color: Colors.black.withOpacity(.1),
                )
              ],
            ),
            child: SafeArea(
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
                child: GNav(
                  rippleColor: Colors.red,
                  hoverColor: Colors.purple,
                  gap: 8,
                  activeColor: Colors.black,
                  iconSize: 24,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                  duration: const Duration(milliseconds: 400),
                  tabBackgroundColor: Colors.pink,
                  color: Colors.black,
                  tabs: const [
                    GButton(
                      icon: Icons.stacked_bar_chart,
                      text: 'Statistics',
                    ),
                    GButton(
                      icon: Icons.home,
                      text: 'Home',
                    ),
                    GButton(
                      icon: Icons.fitness_center,
                      text: 'Workout',
                    ),
                    GButton(
                      icon: Icons.settings,
                      text: 'Settings',
                    ),
                  ],
                  selectedIndex: selectedIndex,
                  onTabChange: (index) {
                    setState(() {
                      selectedIndex = index;
                    });
                  },
                ),
              ),
            )));

额外优化提示 #

• 检查SafeArea与外层Padding的组合是否过度占用垂直空间，可适当调整垂直内边距数值。
• 若需固定导航栏高度，建议结合MediaQuery和组件自身最小高度需求设置，避免硬编码比例导致不同设备显示异常。

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