在Android中,match_parent和wrap_content用于自动调整小部件相对于其父部件所包含内容的大小。
在Flutter中,似乎默认所有小部件都设置为wrap_content,我如何改变它,以便我可以填充它的宽度和高度,以它的父?
在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: mainAxisSize: mainaxisize .min 对于match_parent: mainAxisSize: mainaxisize .max
我使用这个解决方案,你必须定义你的屏幕的高度和宽度使用MediaQuery:
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width
)
一个简单的解决方法:
如果容器只有一个顶级子容器,则可以为该子容器指定对齐属性并为其赋值。它会填满容器里的所有空间。
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
)
)
使用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
简单的回答是,在子节点有尺寸之前,父节点没有尺寸。
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.
有些小部件试图尽量大,只要父组件允许。有些小部件试图尽量小,就像父组件所允许的那样。有些小部件试图匹配某种“自然”大小(例如文本、图像)。
一些小部件告诉它们的子部件可以是任意大小。有些人给他们的孩子同样的限制,他们从他们的父母。