Align Widget inside Stack 占据全屏答案

【问题标题】：Align Widget inside Stack occupies full screenAlign Widget inside Stack 占据全屏
【发布时间】：2019-10-05 12:55:34
【问题描述】：

我正在使用 align 在我的堆栈中定位小部件。当我在堆栈内的任何孩子中使用对齐时，堆栈将占据全屏。否则堆栈是最高的孩子的高度。我在这里很困惑。 align 不是用来对齐栈内的children吗？

这是我的代码：

   bottomNavigationBar: Stack(
    children: <Widget>[
      Container(
        color: Colors.greenAccent,
        width: double.infinity,
        height: 45,
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Container(
         width: 80,
         height: 80,
          decoration: BoxDecoration(color: Colors.deepPurpleAccent, shape: BoxShape.circle),
          child: IconButton(icon: Icon(Icons.search), onPressed: (){}),
        ),
      )

    ],
  )

现在，当我从第二个孩子中移除 Align 小部件时，堆栈与其孩子一样大。

【问题讨论】：

标签： flutter

【解决方案1】：

您没有为其widthFactor 和heightFactor 提供Align 小部件值，并且您提到的行为是根据Align class documentation 预期的：

如果它的尺寸受到限制并且 widthFactor 和 heightFactor 为 null，则此小部件将尽可能大。

为了确认这一点，我将值1.0 分配给widthFactor 和heightFactor，然后它返回到预期大小（更大的小部件的大小，即FloatingActionButton）：

 Align(
        alignment: Alignment.bottomCenter,
        widthFactor: 1.0,
        heightFactor: 1.0,
        child: Container(
          width: 80,
          height: 80,
          decoration: BoxDecoration(color: Colors.deepPurpleAccent, shape: BoxShape.circle),
          child: IconButton(icon: Icon(Icons.search), onPressed: (){}),
        ),
      )

【讨论】：

【解决方案2】：

那里没问题。它应该占据整个屏幕。

由非定位子级定义的堆栈大小。如果你使用 Align，Stack 没有限制，它会扩展。

如果你想要widget之间的关系，你必须使用Positioned widget。

https://api.flutter.dev/flutter/widgets/Stack-class.html

来自文档：

堆栈本身的大小以包含所有未定位的子项，这些子项根据对齐方式进行定位（在从左到右的环境中默认为左上角，在从右到左的环境中默认为右上角环境）。

还有，

然后根据它们的 top、right、bottom 和 left 属性相对于堆栈放置定位的子级。

是的，它会在一段时间内感到困惑，即使是经验丰富的开发人员在使用 Stack 时有时也会感到困惑。它是最难完全掌握的小部件之一。

【讨论】：

好的，感谢您的回答，这真的很有帮助。它消除了我的疑虑，并且我能够解决我在特定情况下遇到的问题。

【解决方案3】：

堆栈将与其未定位的子级一样大。 Align 使堆栈与上面代码中的屏幕一样大。将堆栈限制为与其内容一样大。我将堆栈包裹在一个容器中并给它一个固定的高度。

现在堆栈的高度有限制。所以当我现在在它的孩子中使用 align 时。它只和包含它的容器一样高。

简而言之，只需用一个固定高度的容器包裹堆栈。

【讨论】：