颤动更改底部导航栏高度

问题描述

我正在尝试构建自定义 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.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, 所以 height }} 正在根据设备的 navBar 动态变化。 （例如：iPhone SE 没有 SafeArea，而 iPhone X 有，所以需要调整高度。）

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

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

解决方法

您必须将 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

,

尝试使用 bottomNavigationBar: 而不是 bottomSheet: 或在正文中使用 Stack: 并添加您的底部导航栏 bottom:0