Flutter中BottomNavigationBar在部分设备高度过高问题求助

我在开发Flutter应用时使用BottomNavigationBar，发现该组件在部分设备（如部分iPhone、三星Galaxy S23等）上占用的高度过高。尝试通过Container或SizedBox设置固定高度，但没有效果，希望能得到解决方案。

相关代码如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: tdWhite,
    bottomNavigationBar: Padding(
      padding: const EdgeInsets.all(8),
      child: ClipRRect(
          borderRadius: BorderRadius.circular(100),
          child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: tdWhiteNav,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            onTap: (int newIndex) {},
            items:const [
              BottomNavigationBarItem(
                icon:  Icon(MyFlutterApp.home, color: tdIconColor),
                label: '',
              ),
              BottomNavigationBarItem(
                icon:  Icon(MyFlutterApp.ticket, color: tdIconColor, size: 40),
                label: '',
              ),
              BottomNavigationBarItem(
                icon:   Icon(MyFlutterApp.group_168, color: tdBlack, size: 40),
                label: '',
              ),
              BottomNavigationBarItem(
                icon:  Icon(MyFlutterApp.profile, color: tdIconColor),
                label: '',
              ),
            ],
          ),
      ),
    ),
  );
}

效果如图：

解决方案 #

方法1：通过内边距调整控制高度

BottomNavigationBar的高度受系统底部安全区域和默认内边距影响，直接包裹Container无法覆盖其最小高度限制。可以通过设置padding移除默认内边距，结合自定义Container高度来控制：

bottomNavigationBar: Padding(
  // 保留底部安全区域，避免内容被遮挡
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewPadding.bottom),
  child: Container(
    height: 60, // 自定义目标高度
    child: ClipRRect(
      borderRadius: BorderRadius.circular(100),
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: tdWhiteNav,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        onTap: (int newIndex) {},
        padding: EdgeInsets.zero, // 移除组件默认内边距
        items: const [
          // 你的导航项代码
        ],
      ),
    ),
  ),
),

方法2：用BottomAppBar完全自定义布局

如果BottomNavigationBar的默认行为过于受限，直接使用BottomAppBar+Row实现自定义导航栏，高度完全可控：

bottomNavigationBar: Padding(
  padding: const EdgeInsets.all(8),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(100),
    child: Container(
      height: 60,
      color: tdWhiteNav,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconButton(
            icon: Icon(MyFlutterApp.home, color: tdIconColor),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(MyFlutterApp.ticket, color: tdIconColor, size: 40),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(MyFlutterApp.group_168, color: tdBlack, size: 40),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(MyFlutterApp.profile, color: tdIconColor),
            onPressed: () {},
          ),
        ],
      ),
    ),
  ),
),

方法3：全局主题配置

在MaterialApp的主题中统一设置BottomNavigationBar的样式，避免每个页面重复调整：

MaterialApp(
  theme: ThemeData(
    bottomNavigationBarTheme: BottomNavigationBarThemeData(
      minimumHeight: 60, // 设置全局最小高度
      padding: EdgeInsets.zero, // 移除默认内边距
      backgroundColor: tdWhiteNav,
    ),
  ),
  home: YourHomePage(),
);

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