2

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

我在这里缺少什么，我该如何解决？

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

4

2 回答 2

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

于 2021-04-05T11:21:27.517 回答
0

尝试使用bottomNavigationBar:代替bottomSheet:或在正文中使用Stack:并添加底部导航栏的位置bottom:0

于 2021-04-05T11:14:17.287 回答