Question

我在这个项目中使用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"),
      ]),
),

无论有没有安全区域，这都是它的外观。但是我要寻找的是卖出的外观，基本上就像一个大的底部导航栏。

Answer 1

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

没有缺口
带缺口 +20 像素

您可以使用包 https://pub.dev/packages/iphone_has_notch 轻松完成它很轻，不需要任何额外的资源。

所以，代码可以简单到：

height: IphoneHasNotch.hasNotch ? 88 : 68,

Answer 2

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

Answer 3

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

Answer 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
          ),

如何设置Flutter iPhone X安全区域

4 个答案: