kBottomNavigationBarHeight返回值异常致底部导航栏重叠问题

问题原因 #

kBottomNavigationBarHeight 只是Flutter提供的默认底部导航栏高度常量，但实际项目中可能存在自定义BottomNavigationBar高度、系统底部安全区差异等情况，直接依赖这个常量会导致布局计算偏差，进而出现重叠。

通用解决办法 #

方法1：获取BottomNavigationBar实际渲染高度

通过GlobalKey获取底部导航栏的真实渲染高度，替代硬编码的常量值：

// 定义GlobalKey
final GlobalKey<State<StatefulWidget>> _bottomNavKey = GlobalKey();

@override
Widget build(BuildContext context) {
  final bar = SizedBox(
    height: 60,
    child: Container(color: Colors.green),
  );

  return Scaffold(
    backgroundColor: Colors.white,
    body: Stack(
      children: [
        // 在childWidget的BottomNavigationBar中绑定key
        childWidgetWithBottomNav(
          bottomNavKey: _bottomNavKey,
        ),
        Positioned(
          left: 0,
          right: 0,
          // 动态计算底部距离
          bottom: () {
            if (_bottomNavKey.currentContext != null) {
              final renderBox = _bottomNavKey.currentContext!.findRenderObject() as RenderBox;
              return renderBox.size.height;
            }
            //  fallback到默认高度
            return kBottomNavigationBarHeight;
          }(),
          child: bar,
        ),
      ],
    ),
  );
}

// 子页面中的BottomNavigationBar配置示例
Widget childWidgetWithBottomNav({required GlobalKey bottomNavKey}) {
  return BottomNavigationBar(
    key: bottomNavKey,
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
    ],
  );
}

方法2：嵌套在Scaffold的bottomNavigationBar中（推荐）

遵循Flutter布局规范，将自定义栏与BottomNavigationBar一起放在Scaffold.bottomNavigationBar中，通过Column垂直排列，自动适配所有机型：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    // 页面内容不再包含BottomNavigationBar
    body: childWidget,
    bottomNavigationBar: Column(
      mainAxisSize: MainAxisSize.min, // 仅占用自身高度
      children: [
        SizedBox(
          height: 60,
          child: Container(color: Colors.green),
        ),
        // 底部导航栏
        BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          ],
        ),
      ],
    ),
  );
}

方法3：结合自定义高度与安全区计算

如果是自定义高度的BottomNavigationBar，直接使用自定义高度值，加上系统底部安全区高度：

@override
Widget build(BuildContext context) {
  final bar = SizedBox(
    height: 60,
    child: Container(color: Colors.green),
  );
  // 自定义的底部导航栏高度
  final customBottomNavHeight = 65;
  // 系统底部安全区高度
  final bottomSafeArea = MediaQuery.of(context).padding.bottom;

  return Scaffold(
    backgroundColor: Colors.white,
    body: Stack(
      children: [
        childWidget,
        Positioned(
          left: 0,
          right: 0,
          bottom: customBottomNavHeight + bottomSafeArea,
          child: bar,
        ),
      ],
    ),
  );
}

总结 #

优先选择方法2，它不需要额外的状态管理或计算，完全遵循Flutter的布局逻辑，适配性最强；如果必须使用Stack布局，方法1能准确获取导航栏的真实高度，避免硬编码带来的适配问题。

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