在Android中,match_parent和wrap_content用于自动调整小部件相对于其父部件所包含内容的大小。

在Flutter中,似乎默认所有小部件都设置为wrap_content,我如何改变它,以便我可以填充它的宽度和高度,以它的父?


当前回答

你可以用小伎俩: 假设你有以下要求: (宽、高)

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

其他回答

你可以用小伎俩: 假设你有以下要求: (宽、高)

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

一个简单的解决方法:

如果容器只有一个顶级子容器,则可以为该子容器指定对齐属性并为其赋值。它会填满容器里的所有空间。

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
   )
)

使用小部件Wrap。

对于类似列的行为尝试:

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

对于Row类行为尝试:

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

有关更多信息:Wrap (Flutter小部件)

实际上有一些选择:

你可以使用sizebox。扩展以使您的小部件匹配父维度,或者只匹配宽度的sizebox (width: double.infinity),或者只匹配高度的sizebox (height: double.infinity)。

如果你想要一个wrap_content行为,这取决于你正在使用的父部件,例如,如果你把一个按钮放在一个列上,它会像wrap_content一样行为,而像match_parent一样使用它,你可以用一个扩展的小部件或一个大小框来包装按钮。

通过ListView,按钮获得match_parent行为,而要获得wrap_content行为,您可以使用像Row这样的Flex小部件来包装它。

使用展开的小部件将成为行、列或Flex的子部件 展开以填充主轴上的可用空间(例如,水平地填充 行或垂直列)。 https://docs.flutter.io/flutter/widgets/Expanded-class.html

使用Flexible小部件可以为行、列或Flex的子部件提供扩展以填充主轴上可用空间的灵活性(例如,水平地填充行或垂直地填充列),但与Expanded不同的是,Flexible不要求子部件填充可用空间。 https://docs.flutter.io/flutter/widgets/Flexible-class.html

使用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