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

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


当前回答

MATCH_PARENT

FractionallySizedBox(
            widthFactor: 1.0, // width w.r.t to parent
            heightFactor: 1.0, // height w.r.t to parent

            child: ElevatedButton(
              onPressed: () {},
              child: Text("+"),
            ),
          )

OR

Container(
            height: double.infinity,
            width: double.infinity,
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

OR

Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

OR

Container(
          constraints: BoxConstraints.expand(),
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

WRAP_CONTENT

Wrap(children: [
          Container(
            child: ElevatedButton(
              onPressed: () {},
              child: Text("+"),
            ),
          ),
        ])

OR

Container(
          constraints: BoxConstraints.tightFor(),
          child: ElevatedButton(
            onPressed: () {},
            child: Text("+"),
          ),
        )

Match_parent Wrap_content:

Row(
            children: [
          Expanded(
            child: Container(
              child: ElevatedButton(
                onPressed: () {},
                child: Text("+"),
              ),
            ),
          ),
        ])

Wrap_content Match_parent:

Column(
            children: [
          Expanded(
            child: Container(
              child: ElevatedButton(
                onPressed: () {},
                child: Text("+"),
              ),
            ),
          ),
        ])

其他回答

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

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

对于匹配父选项,你可以用容器包装小部件,并给它一个这样的宽度

宽度:double.infinity

这种方法将使小部件填充屏幕上的最大可用空间。

简单的回答是,在子节点有尺寸之前,父节点没有尺寸。

The way layout works in Flutter is that each widget provides constraints to each of its children, like "you can be up to this wide, you must be this tall, you have to be at least this wide", or whatever (specifically, they get a minimum width, a maximum width, a minimum height, and a maximum height). Each child takes those constraints, does something, and picks a size (width and height) that matches those constraints. Then, once each child has done its thing, the widget can can pick its own size.

有些小部件试图尽量大,只要父组件允许。有些小部件试图尽量小,就像父组件所允许的那样。有些小部件试图匹配某种“自然”大小(例如文本、图像)。

一些小部件告诉它们的子部件可以是任意大小。有些人给他们的孩子同样的限制,他们从他们的父母。

实际上有一些选择:

你可以使用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