展开 Stack 小部件内的小部件

Question

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

我希望顶部小部件（一列）能够将堆栈垂直扩展并填充到背景小部件设置的大小。我尝试设置主轴，mainAxisSize: MainAxisSize.max但没有用。

我怎样才能让它工作？

Answer 1

使用Positioned.fill.

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

有关更多信息Positioned在本周颤振的Widget

它是如何工作的？

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

Positioned.fill() 是相同的：

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

有关更多示例和信息：如何填充 Stack 小部件以及为什么？和理解约束。

Answer 2

我认为你可以将你的列包装在这样的容器中：

 Container(
   height: double.infinity,
   width: double.infinity,
   child: Column()
 ),

Answer 3

您可以尝试使用positioned小部件包装 Column 。设置top为 0 和bottom0。这将使列垂直填充堆栈。

示例代码：

Stack(
      children: <Widget>[
        // Background widget rep
        Container(
          color: Colors.pink,
        ),
        Positioned(
          top: 0,
          bottom: 0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('madonna'),
              Text('flutter'),
            ],
          ),
        )
      ],
    )