Flutter自定义BottomNavigationBar与官方组件的适配问题求助

一、解决BottomNavigationBar长标签换行问题 #

这里有几种实用的处理方式：

1. 调整字体与溢出规则
   直接通过labelStyle缩小字体，并设置文本溢出时显示省略号，避免换行：

BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '非常长的导航标签内容',
    ),
    // 其他导航项...
  ],
  labelStyle: TextStyle(
    fontSize: 12, // 按需调整字号
    overflow: TextOverflow.ellipsis,
  ),
)

2. 自定义导航项布局
   放弃默认的label字段，自己组合图标和文本，精准控制显示逻辑：

BottomNavigationBarItem(
  icon: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.home),
      SizedBox(height: 4),
      Text(
        '非常长的导航标签内容',
        style: TextStyle(fontSize: 12),
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ],
  ),
  label: '', // 清空默认label避免重复
)

3. 根据屏幕宽度动态控制标签显示
   通过媒体查询判断屏幕宽度，较窄时只显示图标隐藏标签：

final bool showLabels = MediaQuery.of(context).size.width > 360; // 自定义宽度阈值

BottomNavigationBar(
  showSelectedLabels: showLabels,
  showUnselectedLabels: showLabels,
  // 其他配置...
)

二、自定义bottomSheet导航栏适配安全区域 #

核心是动态获取设备的底部安全区域高度，避免硬写内边距浪费空间：

1. 通过MediaQuery手动计算内边距
   在构建bottomSheet时，实时获取安全区域高度并添加到底部padding：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    final bottomSafeHeight = MediaQuery.of(context).padding.bottom;
    return Container(
      padding: EdgeInsets.only(bottom: bottomSafeHeight),
      height: 60 + bottomSafeHeight, // 导航栏高度 + 安全区域高度
      child: Row(
        // 自定义导航栏内容
        children: [/* 导航项 */],
      ),
    );
  },
)

2. 用SafeArea组件自动适配
   直接用SafeArea包裹导航栏内容，它会自动识别设备安全区域并添加对应内边距：

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.transparent, // 去掉默认背景，避免SafeArea外留白
  builder: (context) {
    return SafeArea(
      child: Container(
        height: 60,
        color: Colors.white,
        child: Row(
          // 自定义导航栏内容
          children: [/* 导航项 */],
        ),
      ),
    );
  },
)

补充：官方BottomNavigationBar的安全区域适配逻辑 #

官方组件内部是通过监听MediaQueryData的变化，自动获取当前设备的底部安全区域高度，然后动态调整组件底部的padding值，本质和上面第一种手动计算的逻辑一致，只是封装在了组件内部。

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