当使用 google_nav_bar 库自定义底部导航栏时，若外层 Container 错误设置了固定高度（如 height: size.height * .06），会导致内部 GNav 组件布局被压缩、文字截断或不可读；移除该高度约束即可恢复正常渲染。
当使用 `google_nav_bar` 库自定义底部导航栏时，若外层 `container` 错误设置了固定高度（如 `height: size.height * .06`），会导致内部 `gnav` 组件布局被压缩、文字截断或不可读；移除该高度约束即可恢复正常渲染。
在 Flutter 中，GNav（来自 google_nav_bar 库）本身已具备完善的内部尺寸计算逻辑——它会根据图标大小、文字行高、内边距（padding）和 iconSize 等参数自动确定所需高度。若在外层 Container 上强行指定 height，尤其当该值小于 GNav 实际所需最小高度时，系统将强制裁剪内容，造成文字被遮挡、图标错位或整体不可读（正如你截图中所示）。
✅ 正确做法是：完全移除外层 Container 的 height 属性，让布局系统根据子组件自然撑开。同时保留 width、decoration 和 SafeArea 等必要样式，确保视觉一致性与安全区域适配。
以下是修正后的精简代码示例（关键修改已高亮）：
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;
});
},
),
),
),
),
)⚠️ 补充建议：
- 若需统一底部导航栏高度（例如与其他 UI 元素对齐），应通过调整 GNav 的 padding、iconSize 或 gap 参数间接控制，而非硬设容器高度；
- GNav 默认最小高度约为 64dp（含内边距），确保父容器不施加挤压性约束；
- 在 SafeArea 内使用 Padding 时，注意 vertical: 8 已提供上下留白，通常无需额外高度干预。
移除冗余高度后，文字将清晰显示，图标与文本垂直居中，交互反馈（如 rippleColor 和 hoverColor）也能正常响应——这才是 google_nav_bar 库预期的使用方式。
