Flutter 更改底部导航栏高度

Question

我正在尝试构建自定义 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 是至关重要的所以我可以用 height: MediaQuery.of(context).padding.bottom, 得到底部 Container 所以 [=20 的 height =] 根据设备的 SafeArea 动态变化。（例如：iPhone SE 没有 bottomSafeArea 但 iPhone X 有，所以需要调整高度。）

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

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

Answer 1

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

Answer 2

您必须将 mainAxisSize: MainAxisSize.min 添加到 Column。另外，不需要mainAxisAlignment: MainAxisAlignment.end，最下面的sheet自动对齐到末尾

此外，如果您希望 Scaffold.body 考虑底部小部件的 space，请将 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

Flutter 更改底部导航栏高度

Flutter change bottom nav bar height

flutter

dart

containers

navbar

safearea