Flutter 中的某些设备中底部导航栏需要更高的高度

Question

我正在 Flutter 应用程序中开发

BottomNavigationBar

，但我注意到，它在某些手机中需要更高的高度，例如某些 Iphone、三星 Galaxy S23 等。 我尝试放置一个具有预定义高度的 Container 或 SizeBox，但没有任何变化。有人有解决方案吗？.

这是代码：

  @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: '',
                ),

这是它的样子的图片：

Answer 1

对于大多数导航栏来说这不是问题，因为预计它们只是转到底部。然而，你的情况确实让事情变得有点困难。

您需要做的是删除

viewPadding

，

BottomNavigationBar

用于确定要添加到其底部的填充量。

这应该可以做到：

return Scaffold(
  ...
  bottomNavigationBar: Builder(
    builder: (context) {
      final mediaQuery = MediaQuery.of(context);
      return MediaQuery(
        data: mediaQuery.removeViewPadding(
          removeBottom: true,
        ),
        child: Padding(
          padding: EdgeInsets.only(
            top: 8,
            right: 8,
            left: 8,
            bottom: 8 + mediaQuery.viewPadding.bottom,
          ),
          child: ClipRRect(
             /// your code as it is here
          ),
        ),
      );
    }
  ),
);
    

这使得任何请求 viewPadding 的小部件（即

BottomNavigationBar

）将看到零，而不是

.viewPadding.bottom

中的任何内容。我还重新添加了导航栏外部的填充，这样它就不会被某种 UI 覆盖。

我建议将其全部重构为一个小部件，在这种情况下您将不需要

Builder

。使用它是为了让被访问的

context

是脚手架的上下文而不是小部件，以防

scaffold

对 MediaQuery 进行任何修改 - 如果从脚手架外部的上下文检索 mediaQuery 则可以这样做覆盖任何更改。

需要注意的一件事是，这有轻微可能使脚手架所做的其他事情（例如显示小吃栏）看起来不正确 - 如果您打算使用它们，您应该测试一下，如果它确实会损坏某些东西，您可能必须将整个脚手架包裹在填充物中。

还有一件事 -

BottomNavigationBar

已替换为

NavigationBar

，建议新应用程序使用。我不确定它是否使用完全相同的属性，它可能使用

MediaQuery.padding

而不是

MediaQuery.viewPadding

。