相当于在flutter中的wrap_content和match_parent？

在Android中match_parent，wrap_content用于根据窗口小部件包含的内容相对于其父窗口自动调整窗口小部件的大小。

在Flutter中，似乎默认情况下所有小部件都设置为wrap_content，我将如何对其进行更改，以便可以填充其width及height其父项？

您可以使用小技巧：假设您有以下要求： （Width，Height）

Wrap_content，Wrap_content：

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent，Match_parent：

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent，Wrap_content：

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content，Match_parent：

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

为了获得match_parent和wrap_content的行为，我们需要在Row / Column窗口小部件中使用mainAxisSize属性，mainAxisSize 属性采用MainAxisSize枚举，该枚举具有两个值，即 MainAxisSize.min（充当wrap_content）和MainAxisSize.max （充当match_parent）。

原始文章的链接

简短的答案是，父级只有在孩子具有尺寸之前才具有尺寸。

Flutter中布局的工作方式是每个小部件都为其每个子控件提供约束，例如“您可以达到这个宽度，必须达到这个高度，至少必须达到这个宽度”，或其他任何条件（具体来说，它们获取最小宽度，最大宽度，最小高度和最大高度）。每个孩子都接受这些约束，执行某些操作，然后选择与这些约束匹配的大小（宽度和高度）。然后，一旦每个孩子都完成了自己的任务，小部件就可以选择自己的大小。

一些小部件尝试尽可能地增加其父部件所允许的尺寸。一些小部件会尽量减小其父级允许的尺寸。一些窗口小部件尝试匹配某个“自然”大小（例如，文本，图像）。

一些小部件告诉他们的孩子，他们可以是他们想要的任何尺寸。有些人给孩子施加与父母相同的约束。

实际上有一些可用的选项：

您可以使用SizedBox.expand来使窗口小部件与父项尺寸匹配，或者使用SizedBox（width：double.infinity）仅匹配宽度，或者使用SizedBox（heigth：double.infinity）仅匹配高度。

如果要wrap_content行为，则取决于您使用的父窗口小部件，例如，如果在列上放置按钮，则其行为将类似于wrap_content，而将其用作match_parent时，则可以使用扩展窗口小部件或大小框来包装按钮。

使用ListView时，按钮具有match_parent行为，而要获得wrap_content行为，则可以使用诸如Row的Flex小部件将其包装。

使用“扩展”窗口小部件可使“行”，“列”或“伸缩”的子级展开以填充主轴上的可用空间（例如，水平放置为“行”或垂直放置为“列”）。 https://docs.flutter.io/flutter/widgets/Expanded-class.html

使用Flexible小部件可为Row，Column或Flex的子级提供扩展的灵活性，以填充主轴上的可用空间（例如，水平放置为Row或垂直放置为Column），但是与Expanded不同，Flexible不要求孩子填补可用空间。 https://docs.flutter.io/flutter/widgets/Flexible-class.html

一个简单的解决方法：

如果一个容器只有一个顶级子级，则可以为该子级指定对齐属性，并为其提供任何可用值。它将填充容器中的所有空间。

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

其他方式：

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

我使用了此解决方案，您必须使用MediaQuery定义屏幕的高度和宽度：

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

使用小部件Wrap。

对于Column类似的行为，请尝试：

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

对于Row类似的行为，请尝试：

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

有关更多信息：包装（Flutter Widget）

在“列”中使用此行代码。对于wrap_content：mainAxisSize: MainAxisSize.min 对于match_parent：mainAxisSize: MainAxisSize.max

实际上，有一种非常简单，整洁的方法来执行此操作。

使用FractionallySizedBox小部件。

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

当您要将孩子的尺寸缩小为其父级尺寸的一小部分时，此小部件也非常有用。

例：

如果你希望孩子占据其母公司50％的宽度，提供widthFactor如0.5

要让孩子填补父母，只需将其包装到FittedBox中

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )