颤振改变底部导航栏高度

Posted 2023-03-12

【中文标题】颤振改变底部导航栏高度

【英文标题】：Flutter change bottom nav bar height

【发布时间】：2021-04-05 10:58:42

【问题描述】：

我正在尝试构建自定义 bottomNavBar，我的代码如下所示：

Widget build(BuildContext context) 
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Container(
          decoration: BoxDecoration(
            color: AppColors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(scaleWidth(20)),
              topRight: Radius.circular(scaleWidth(20)),
            ),
            boxShadow: [
              BoxShadow(
                color: Color.fromRGBO(0, 0, 0, 0.1),
                blurRadius: 20,
              ),
            ],
          ),
          height: scaleWidth(59),
          child: Row(
            children: _buildBottomNavBarItems(context),
          ),
        ),
        Container(
          color: AppColors.white,
          height: MediaQuery.of(context).padding.bottom,
        )
      ],
    );
  

我在 Scaffold 中这样称呼它：

bottomSheet: BottomNavBar(),

但问题是bottomNavBar覆盖了整个屏幕！如果没有Column，它可以正常工作，但是Column 很重要，所以我可以将底部Container 和height: MediaQuery.of(context).padding.bottom, 放在一起，所以navBar 的height 会根据SafeArea 的SafeArea 而动态变化装置。 （例：iPhone SE 没有bottomSafeArea 而iPhone X 有，所以需要调整高度。）

我在这里遗漏了什么，我该如何解决？

如果您需要更多信息，请告诉我！

【问题讨论】：

能分享一下scaleWidth(59)的实现吗？

@mightybruno 这不是问题，我只是根据MediaQuery.of(context) 调整它的大小。我试过了，同样的问题。

【参考方案1】：

您必须将mainAxisSize: MainAxisSize.min 添加到Column。另外，你不需要mainAxisAlignment: MainAxisAlignment.end，底部的工作表会自动对齐到最后。

此外，如果您希望Scaffold.body 考虑底部小部件的空间，请将bottomSheet 与bottomNavigationBar 交换。

class Sheet extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        //...
      ],
    );
  

https://www.dartpad.dev/374026cc206115bedf79925bb75720af?null_safety=true

【讨论】：

感谢您的回答！我也将其更改为bottomNaviagtionBar，但如何填充 safeArea 空间？

SafeArea 小部件不是您要找的吗？尝试用它包裹Column api.flutter.dev/flutter/widgets/SafeArea-class.html 如果没有，您可能想看看SafeArea.build 方法实现：api.flutter.dev/flutter/widgets/SafeArea/build.html

现在工作得很好，感谢您的帮助:)

【参考方案2】：

尝试使用bottomNavigationBar: 代替bottomSheet: 或在正文中使用Stack: 并添加bottomNavBar 的位置bottom:0