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 ，因此SafeArea的height會根據設備的navBar動態變化. （示例：iPhone SE 沒有bottomSafeArea但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:並添加您的 bottomNavBar bottom:0的 position