Question

在我的应用程序中，我有一个 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
    ],
  )

现在没有显示容器。在这里解决我的问题的最佳方法是什么？我找不到任何关于此的信息。如果您需要更多信息，请告诉我！

Answer 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 包装在容器中并为其设置白色背景，同时将 top 属性设置为 false（= 表示 SafeArea 不会应用于顶部）：

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

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

1 个答案: