在 Stack 小部件内展开小部件

Question

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

我想要顶部小部件（一列）将堆栈垂直展开并填充到背景小部件设置的大小。我尝试设置 MainAxis mainAxisSize: MainAxisSize.max 但它没有用。

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

Answer 1

我认为您可以将您的专栏包装在这样的容器中：

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

Answer 2

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

示例代码：

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'),
            ],
          ),
        )
      ],
    )

Answer 3

使用`Positioned.fill`

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

Flutter Widget of the Week

中有关 Positioned 的更多信息

它是如何工作的？

这都是关于约束的。约束是从 parent 传递到其 children 的 min/max width/height 值。在Stack的情况下。它传递给 children 的约束状态是它们可以根据需要调整自己的大小，在某些小部件的情况下，这意味着它们将是它们的“自然”大小。调整大小后，Stack会将其children放在左上角。
Positioned.fill 从 Stack 获得相同的约束，但将不同的约束传递给它的 child，声明它（child）必须具有精确的大小（这意味着填充 Stack).

Positioned.fill() 等同于：

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

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

Answer 4

接受的答案没有完全回答我的问题。所以，我把我的代码放在这里以防你有类似的问题。

class NoContentView extends StatelessWidget {
  const NoContentView({Key? key, required this.message}) : super(key: key);

  final String message;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Stack(
        children: [
          Positioned.fill(
            child: FittedBox(
              child: const Image(image: AssetImage(AppImages.noReceiptsWeb), fit: BoxFit.fitWidth),
            ),
          ),
          MessageView(message: message),
        ],
      ),
    );
  }
}

在 Stack 小部件内展开小部件

Expand widgets inside the Stack widget

expand

flutter

flutter-widget

使用`Positioned.fill`

它是如何工作的？

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

在 Stack 小部件内展开小部件

Expand widgets inside the Stack widget

expand

flutter

flutter-widget

使用Positioned.fill

它是如何工作的？

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

使用`Positioned.fill`