时间戳

首页 > 解决方案 > 屏幕底部和安全区域之间的颤动位置小部件

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

问题描述

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

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

标签： flutterdartwidgetcontainersflutter-layout

解决方案

您可以尝试像这样使用堆栈小部件（第二个孩子（对齐小部件）位于您的 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
        ),
      ),
    );

推荐阅读