Flutter iOS端底部导航栏悬浮变形问题求助

问题原因 #

1. iOS底部安全区适配缺失：iOS设备底部存在Home Indicator对应的安全区域，你的BottomAppBar未对该区域做适配，导致导航栏无法贴合屏幕底部，呈现悬浮状态。
2. 跨平台导航栏类型差异：BottomNavigationBar在iOS默认使用shifting类型，Android默认使用fixed类型，这种默认差异会导致布局表现不一致，进一步放大iOS端的显示问题。

解决方案 #

1. 适配iOS底部安全区并统一导航栏类型 #

修改buildBottomNavigationBar方法，给BottomAppBar添加底部内边距填充iOS安全区，同时显式设置导航栏类型为fixed以统一跨平台表现：

Widget buildBottomNavigationBar(BuildContext context) {
  return BottomAppBar(
    key: const Key('bottomAppBar'),
    shape: const CircularNotchedRectangle(),
    elevation: 4,
    notchMargin: 8,
    clipBehavior: Clip.antiAlias,
    // 添加底部内边距适配iOS安全区
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewPadding.bottom),
    child: BottomNavigationBar(
      // 显式设置导航栏类型为fixed，消除跨平台默认差异
      type: BottomNavigationBarType.fixed,
      showUnselectedLabels: false,
      showSelectedLabels: false,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: FaIcon(FontAwesomeIcons.dumbbell),
          label: 'Sets',
        ),
        BottomNavigationBarItem(
          icon: FaIcon(FontAwesomeIcons.calendar),
          label: 'Timeline',
        ),
      ],
      currentIndex: _selectedIndex,
      onTap: _onItemTapped,
    ),
  );
}

2. 调整Scaffold的extendBody属性（可选） #

如果你的业务不需要页面内容延伸到底部导航栏下方，可以移除Scaffold中的extendBody: true设置，这也能避免导航栏悬浮的视觉问题：

Scaffold(
  appBar: getAppbar(),
  drawer: getMainDrawer(context),
  floatingActionButton: ...,
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  body: SafeArea(
    top: false,
    bottom: false,
    child: _widgetOptions.elementAt(_selectedIndex),
  ),
  // 移除extendBody: true
  bottomNavigationBar: buildBottomNavigationBar(context))

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