Как настроить безопасную зону Flutter для iPhone X
Причина, по которой я использовал Flutter для этого проекта, заключалась в том, чтобы получить и 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 — это плагин, который я использую, который делает нижнюю панель навигации намного лучше, чем стандартная, и немного больше настроек.
так почему бы вам не спросить автора этого плагина? очевидно, этот плагин не делает навигационную панель намного лучше, как вы можете видеть
Ответы 4
return SafeArea(
bottom: true,
child: bmnav.BottomNav(),
)
Это приводит к моему 1-му изображению. Я ищу этот результат, но не похоже, что это карта
Очень сложно помочь вам без подробных примеров того, что вам нужно, потому что вы сказали, что используете настраиваемую нижнюю панель навигации.
Я хотел бы, чтобы он расширялся, как обычная нижняя панель навигации. где он выглядит как один сплошной бар. Проблема, с которой я столкнулся с обычной нижней панелью навигации, заключалась в том, что я хотел настроить цвета и не хотел, чтобы элементы увеличивались при выборе. Вот почему я пошел с этим.
return Container(
color:Colors.white,
child:SafeArea(
bottom: true,
child: bmnav.BottomNav(),
),
)
Я надеюсь, что это даст вам ожидаемый результат. Вы можете использовать этот код, чтобы избежать карточного ощущения.
ОТРЕДАКТИРОВАНО:
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
),
Я проверил в своем приложении, и оно работает, как и ожидалось. Могу ли я узнать причину понижения, плз.
По моему опыту, SafeArea лишает гибкости макета. Я предпочитаю использовать нижнее меню разной высоты:
- без выреза
- с надрезом +20 пикселей
Вы можете легко сделать это с пакетом https://pub.dev/packages/iphone_has_notch Он легкий и не требует дополнительных ресурсов.
Таким образом, код может быть таким простым, как:
height: IphoneHasNotch.hasNotch ? 88 : 68,
Исправьте прикрепленные изображения, пожалуйста.