在Android中,match_parent和wrap_content用于自动调整小部件相对于其父部件所包含内容的大小。
在Flutter中,似乎默认所有小部件都设置为wrap_content,我如何改变它,以便我可以填充它的宽度和高度,以它的父?
在Android中,match_parent和wrap_content用于自动调整小部件相对于其父部件所包含内容的大小。
在Flutter中,似乎默认所有小部件都设置为wrap_content,我如何改变它,以便我可以填充它的宽度和高度,以它的父?
当前回答
使用小部件Wrap。
对于类似列的行为尝试:
return Wrap(
direction: Axis.vertical,
spacing: 10,
children: <Widget>[...],);
对于Row类行为尝试:
return Wrap(
direction: Axis.horizontal,
spacing: 10,
children: <Widget>[...],);
有关更多信息:Wrap (Flutter小部件)
其他回答
为了获得match_parent和wrap_content的行为,我们需要 在行/列小部件中使用mainAxisSize属性,即mainAxisSize 属性取MainAxisSize枚举,有两个值,即 MainAxisSize。min,表现为wrap_content和mainaxisize .max 它的行为类似于match_parent。
原文链接
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("+"),
),
),
),
])
要让一个子填充它的父,只需将它包装到FittedBox中
FittedBox(
child: Image.asset('foo.png'),
fit: BoxFit.fill,
)
一个简单的解决方法:
如果容器只有一个顶级子容器,则可以为该子容器指定对齐属性并为其赋值。它会填满容器里的所有空间。
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
)
)
Stack(
children: [
Container(color:Colors.red, height:200.0, width:200.0),
Positioned.fill(
child: Container(color: Colors. yellow),
)
]
),