提问人:Emaborsa 提问时间:10/23/2023 最后编辑:Emaborsa 更新时间:10/24/2023 访问量:36
自定义 BottomNavigationBar 颤振
Custom BottomNavigationBar flutter
问:
我对 和 很陌生,不知道 和 ,所以我定义了一个自定义的:flutter
BottomNavigationBar
BottomNavigationBarItem
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: const SystemUiOverlayStyle(
systemNavigationBarColor: MYColors.darkGrey,
),
child: Scaffold(
body: ...,
bottomSheet: SizedBox(
height: Menu.height,
child: Menu([
MenuItem(AppLocalizations.of(context)!.home, Icons.home_outlined),
MenuItem(AppLocalizations.of(context)!.info, Icons.info_outline),
MenuItem(
AppLocalizations.of(context)!.conventions, Icons.sell_outlined),
MenuItem(AppLocalizations.of(context)!.calendar,
Icons.calendar_month_outlined),
MenuItem(AppLocalizations.of(context)!.more, Icons.menu)
], _currentPage, _setPage),
),
),
);
}
它可以工作,但例如在具有新软按钮的 iPhone 14 max 上,底部的填充物丢失:
我试图重构整个菜单,使用:BottomNavigationBar
BottomNavigationBarItem _buildBottomNavigationBarItem(
IconData iconData, String label) =>
BottomNavigationBarItem(
backgroundColor: HGVColors.grey,
icon: Icon(iconData),
activeIcon: Icon(iconData, color: HGVColors.yellow),
label: label);
bottomNavigationBar: BottomNavigationBar(
onTap: (value) => _setPage(value),
showUnselectedLabels: true,
unselectedItemColor: Colors.white,
selectedItemColor: HGVColors.yellow,
type: BottomNavigationBarType.fixed,
unselectedLabelStyle: TextStyle(
overflow: TextOverflow.visible,
),
backgroundColor: HGVColors.grey,
currentIndex: _currentPage.toInt(),
items: [
_buildBottomNavigationBarItem(
Icons.home_outlined, AppLocalizations.of(context)!.home),
_buildBottomNavigationBarItem(
Icons.info_outline, AppLocalizations.of(context)!.info),
_buildBottomNavigationBarItem(
Icons.sell_outlined, AppLocalizations.of(context)!.conventions),
_buildBottomNavigationBarItem(Icons.calendar_month_outlined,
AppLocalizations.of(context)!.calendar),
_buildBottomNavigationBarItem(
Icons.menu, AppLocalizations.of(context)!.more),
],
),
它也很完美,除了长标签上的新行:
我知道,我可以简单地在底部添加填充,但是如果没有这个软按钮,屏幕会浪费空间。有没有办法省略项目的新换行?或者我可以在自定义菜单上动态添加填充吗?我看了一下源代码,但不明白动态填充是如何添加的。BottomNavigationBar
答:
1赞
k.s poyraz
10/24/2023
#1
您应该使用基架小部件顶部的 SafeArea 小部件。
这是一个有用的链接;https://www.geeksforgeeks.org/safearea-in-flutter/
评论
0赞
Emaborsa
10/24/2023
我已经读过那篇帖子,但我没有完全理解。现在我明白了,谢谢。
评论