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 是至关重要的，所以我可以有底部 Container 和 height: MediaQuery.of(context).padding.bottom, 所以 height }} 正在根据设备的 navBar 动态变化。（例如：iPhone SE 没有 SafeArea，而 iPhone X 有，所以需要调整高度。）

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

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

Answer 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

Answer 2

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

颤动更改底部导航栏高度

2 个答案: