自定义 BottomNavigationBar 颤振

Custom BottomNavigationBar flutter

提问人:Emaborsa 提问时间:10/23/2023 最后编辑:Emaborsa 更新时间:10/24/2023 访问量:36

问:

我对 和 很陌生,不知道 和 ,所以我定义了一个自定义的:flutterBottomNavigationBarBottomNavigationBarItem

  @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 上,底部的填充物丢失:

enter image description here

我试图重构整个菜单,使用: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),
  ],
),

它也很完美,除了长标签上的新行:

enter image description here

我知道,我可以简单地在底部添加填充,但是如果没有这个软按钮,屏幕会浪费空间。有没有办法省略项目的新换行?或者我可以在自定义菜单上动态添加填充吗?我看了一下源代码,但不明白动态填充是如何添加的。BottomNavigationBar

填充 flutter-bottomnavigation

评论


答:

1赞 k.s poyraz 10/24/2023 #1

您应该使用基架小部件顶部的 SafeArea 小部件。

在 SafeArea 之前

在 SafeArea 之后

这是一个有用的链接;https://www.geeksforgeeks.org/safearea-in-flutter/

评论

0赞 Emaborsa 10/24/2023
我已经读过那篇帖子,但我没有完全理解。现在我明白了,谢谢。