当使用 google_nav_bar 库时，若为外层 Container 错误设置了固定高度（如 height: size.height * .06），会导致 GNav 组件被强制压缩，图标与文字被截断或无法正常渲染。移除外层高度约束即可恢复默认自适应布局，确保所有底部选项清晰可读。
当使用 google_nav_bar 库时，若为外层 container 错误设置了固定高度（如 `height: size.height * .06`），会导致 gnav 组件被强制压缩，图标与文字被截断或无法正常渲染。移除外层高度约束即可恢复默认自适应布局，确保所有底部选项清晰可读。
在 Flutter 中，GNav（来自 google_nav_bar 库）本身已具备完善的内部尺寸计算逻辑——它会根据图标大小、文字行高、内边距及主题配置自动确定所需高度。而问题代码中对最外层 Container 显式设置了 height: size.height * .06，这一硬编码高度极易小于 GNav 实际所需的最小高度（尤其在字体缩放、不同屏幕密度或文本长度变化时），从而导致底部按钮文字被裁剪、图标错位，甚至部分选项完全不可见（如截图所示）。
✅ 正确做法是：移除外层 Container 的 height 属性，让布局系统自然测量并分配空间。GNav 会在 SafeArea 和 Padding 包裹下正确撑开，适配各种设备与无障碍设置。
以下是优化后的核心代码片段（仅展示关键修改部分）：
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;
});
},
),
),
),
),
)⚠️ 注意事项：
- 若需控制整体导航栏垂直占比，请改用 Expanded、Flexible 或 ConstrainedBox 配合 minHeight/maxHeight，而非直接设 height；
- GNav 默认最小高度约为 64px（含内边距），确保父容器未施加更严格的 constraints.maxHeight 限制；
- 如仍存在文字截断，检查是否启用了系统级字体缩放（可在 MaterialApp 中设置 textScaleFactor: 1.0 临时验证）；
- 建议升级至 google_nav_bar: ^5.0.0+ 及以上版本，以获得更好的无障碍支持与动态尺寸适配能力。
通过移除外层高度约束，你将获得一个响应式、可访问且视觉一致的底部导航栏——既符合 Material Design 规范，也真正保障了终端用户的可读性与操作体验。
