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

编程问答 2022-05-25

问题描述

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

enter image description here

问题是我希望底部有一个白色的 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,],),Container(color: Colors.white) // -> fill container
    ],)

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

解决方法

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