flutter - 在 Stack 小部件内展开小部件

Question

我有一个堆栈小部件，里面有两个小部件。 其中一个绘制背景，另一个绘制背景。 我希望两个小部件具有相同的大小。

我想要顶部小部件(它是一列)将堆栈垂直展开并填充到背景小部件设置的大小。 我尝试设置 MainAxis mainAxisSize: MainAxisSize.max 但它不起作用。

我怎样才能让它发挥作用？

Answer 1

使用Positioned.fill

    Stack(
      children: [
        Positioned.fill(
          child: Column(
            children: [
              //...
            ],
          ),
        ),
        //...
      ],
    );

有关 Positioned 的更多信息，请参见 Flutter Widget of the Week

它是如何工作的？

这都是关于约束的。约束是从父级传递给其子级的最小/最大宽度/高度值。在 Stack 的情况下。它传递给其子项的约束声明它们可以根据需要调整自己的大小，在某些小部件的情况下，这意味着它们将是它们的“自然”大小。确定大小后，Stack 会将其子级放置在左上角。
Positioned.fill 从 Stack 获得相同的约束，但将不同的约束传递给它的 child ，声明它( child )必须具有精确的大小(这意味着填充 堆栈)。

Positioned.fill() 等同于:

Positioned(
  top: 0,
  right: 0,
  left: 0,
  bottom:0,
  child: //...
)

更多示例和信息:How to fill a Stack widget and why?和 Understanding constraints.