在屏幕底部和安全区域之间颤动位置小部件

Posted 2023-02-23

【中文标题】在屏幕底部和安全区域之间颤动位置小部件

【英文标题】：Flutter position Widget between bottom of screen and safe area

【发布时间】：2021-05-20 07:18:34

【问题描述】：

在我的应用程序中，我有一个bottomBar，它位于SafeArea 上方的右下角：

问题是我想在底部有一个白色的Container（图像中的红色箭头），这样对于更大的 iPhone（屏幕底部 不等于 safeArea) 图片中的空白处，如果填充为白色。

对于底部屏幕等于与safeArea 相同的手机，fillContainerHeight 应该简单地为零/零。

这是我的设置：

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.end,
    // mainAxisSize: MainAxisSize.max,
    children: [
      SafeArea(
        child: Row(
          children: [
            Expanded(
                child: Container(
              height: 49,
              color: Colors.white,
            )),
            Container(
                height: 49,
                child: Image.asset('assets/images/bottomBar.png')),
            Expanded(
                child: Container(
              height: 49,
              color: Colors.white,
            )),
          ],
        ),
      ),
      Container(color: Colors.white) // -> fill container
    ],
  )

目前容器未显示。在这里解决我的问题的最佳方法是什么？我在这方面找不到任何东西。如果您需要更多信息，请告诉我！

【参考方案1】：

您可以尝试像这样使用堆栈小部件（第二个孩子（对齐小部件）位于您的 SafeArea 小部件上方）：

return Stack(
      children: [
        SafeArea(
          child: Scaffold(
            appBar: AppBar(),
            body: // Your other widgets here
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.white,
            height: MediaQuery.of(context).padding.bottom;,
          ),
        )
      ],
    );

另一种选择是将您的 SafeArea 包装在一个 Container 中并给它一个白色背景，同时将 top 属性设置为 false（= 表示 SafeArea 不会应用于顶部）：

return Container(
      color: Colors.white,
      child: SafeArea(
        top: false,
        child: Scaffold(
          appBar: AppBar(),
          body: // Your other widgets here
        ),
      ),
    );