Flutter：堆栈中的底部中心小部件答案

【问题标题】：Flutter: bottom center widget in stackFlutter：堆栈中的底部中心小部件
【发布时间】：2019-07-29 23:38:05
【问题描述】：

我想像这张照片一样。为了简化，我创建了一个包含两个容器的堆栈。我想使用 Align 小部件使小容器居中，但它不起作用！它始终保持在顶部

Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 170,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(0),
                          bottomRight: Radius.circular(0))),
                  // child: Image.network(tutorImage),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    width: 60,
                    height: 60,
                    color: Colors.black,
                  ),
                )
              ],
            ),

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

您可以在 Stack 内使用 Positioned.fill 和 Align：

Column(
  children: <Widget>[
    Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          height: 170,
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.only(bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0))),
          // child: Image.network(tutorImage),
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            ),
          ),
        )
      ],
    ),
  ],
);

【讨论】：

这在某种情况下对我有用。我仍在寻求对“Align inside Positioned.fill”概念的理解。
在这里也像一个魅力一样工作，但我仍然想知道为什么我需要一个 Align 和一个 Positioned.fill，当简单地使用 Positioned(bottom: 0) 应该完成这项工作时，但它变成了它没有......

【解决方案2】：

尝试将容器包装成 Column 并使用轴对齐属性。

Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Container(
              //width: MediaQuery.of(context).size.width, In my test this line causes bad behavior
              height: 170,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(0),
                      bottomRight: Radius.circular(0))),
              // child: Image.network(tutorImage),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.end, // start at end/bottom of column 
              crossAxisAlignment: CrossAxisAlignment.center, 
              children: <Widget>[
                Center( //  center in horizontal axis
                  child: Container(
                    width: 60,
                    height: 60,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ],
        ),

【讨论】：

我为什么要在这里使用列？对齐小部件有什么问题？
老实说，我从未使用过 Align 小部件。我总是与轴属性和 Flex 因素对齐。无论如何，在您的问题更新之后，现在更清楚您想要什么样的效果，并且在这种情况下，列方法将不起作用。很抱歉。

【解决方案3】：

这个怎么样？

Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          height: 170,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(0),
                  bottomRight: Radius.circular(0))),
          // child: Image.network(tutorImage),
        ),
        Positioned(
          bottom: -30,
          left: 0,
          right: 0,
          child: Center(
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            ),
          ),
        )
      ],
    ),

【讨论】：

其居中正确，但此实现存在问题。我想像上图一样重叠小容器。当我设置顶部时：50 或更大容器挤压！
@M.Ali 你不需要使用top。我将编辑我的答案，向您展示如何做到这一点。
请记住，在堆栈的最大大小之外可见的小部件不会注册手势。如果您在溢出的小部件上需要一些 GestureDetector，请避免使用。