如何设置 Flutter iPhone X 安全区域答案

【问题标题】：How to set Flutter iPhone X Safe Area如何设置 Flutter iPhone X 安全区域
【发布时间】：2019-04-30 11:01:59
【问题描述】：

我在这个项目中使用 Flutter 的原因是为了在 1 个代码库中同时获得 Android 和 iphone。 Android 应用看起来不错，底部导航栏点击屏幕主页。

但 iphone 版本会在 iphone X 型号上运行到上滑栏。

有没有办法解决这个问题？我希望能够调整它，但我不想要阴影，我只想要一种纯色。

我使用了 SafeArea，虽然它确实修复了它。它还导致酒吧向上移动并且看起来很奇怪。

bottomNavigationBar: SafeArea(
     child: bmnav.BottomNav(
      elevation: 9.0,
      index: _currentTab,
      iconStyle: bmnav.IconStyle(
          color: Colors.grey, onSelectColor: Colors.lightGreen),
      labelStyle: bmnav.LabelStyle(
          onSelectTextStyle: TextStyle(color: Colors.lightGreen)),
      onTap: (int index) {
        setState(() {
          _currentTab = index;
        });
      },
      items: [
        bmnav.BottomNavItem(Customicons.main, label: "Home"),
        bmnav.BottomNavItem(Customicons.bible, label: "Bible"),
        bmnav.BottomNavItem(Customicons.sermons, label: "Sermons"),
        bmnav.BottomNavItem(FontAwesomeIcons.pray, label: "Prayer"),
        bmnav.BottomNavItem(Icons.more_horiz, label: "More"),
      ]),
),

这是有安全区和没有安全区的样子。但我正在寻找的是一个出售的外观，基本上就像一个大的底部导航栏。

【问题讨论】：

请修复您附加的图片。
可能你想展示什么是 bmnav.BottomNav ？
bmnav.bottomNav 是我正在使用的插件，它使底部导航栏比开箱即用的更好，并且更多的自定义。
那你为什么不问问这个插件的作者呢？显然这个插件并没有让导航栏变得更好，正如你所看到的那样

标签： dart flutter

【解决方案1】：

return SafeArea(
  bottom: true,
  child: bmnav.BottomNav(),
)

【讨论】：

这样做会导致我的第一张图片。我正在寻找那个结果，但看起来不像是一张卡片
如果没有您需要的详细示例，真的很难为您提供帮助，因为您说您正在使用自定义底部导航栏。
我希望它像普通的底部导航栏一样扩展。它看起来像一个实心条。使用普通底部导航栏遇到的问题是我想自定义颜色，并且我不希望项目在选择时增长。这就是我选择这个的原因。

【解决方案2】：

根据我的经验，SafeArea 消除了布局灵活性。我更喜欢使用不同高度的底部菜单：

没有缺口
缺口 +20 像素

您可以使用包https://pub.dev/packages/iphone_has_notch 轻松做到这一点它很轻，不占用任何额外资源。

所以，代码可以这么简单：

height: IphoneHasNotch.hasNotch ? 88 : 68,

【讨论】：

【解决方案3】：

return Container(
  color:Colors.white,
  child:SafeArea(
  bottom: true,
  child: bmnav.BottomNav(),
 ),
)

【讨论】：

【解决方案4】：

我希望这会给您带来预期的结果。您可以使用此代码来避免卡片式的感觉。

已编辑：

Align(child: SafeArea(
            bottom: true,
            child: bmnav.BottomNavItem(Customicons.main, label: "Home"), // Ur view at bottom
          ),
        ),

或者

 SafeArea(
            bottom: true,
            child: bmnav.BottomNavItem(Customicons.main, label: "Home"), // Ur view at bottom
          ),

【讨论】：

我已经在我的应用程序中进行了测试，它按预期工作。我可以知道否决票的原因吗，请。