在Android中,match_parent和wrap_content用于自动调整小部件相对于其父部件所包含内容的大小。
在Flutter中,似乎默认所有小部件都设置为wrap_content,我如何改变它,以便我可以填充它的宽度和高度,以它的父?
在Android中,match_parent和wrap_content用于自动调整小部件相对于其父部件所包含内容的大小。
在Flutter中,似乎默认所有小部件都设置为wrap_content,我如何改变它,以便我可以填充它的宽度和高度,以它的父?
当前回答
要让一个子填充它的父,只需将它包装到FittedBox中
FittedBox(
child: Image.asset('foo.png'),
fit: BoxFit.fill,
)
其他回答
Stack(
children: [
Container(color:Colors.red, height:200.0, width:200.0),
Positioned.fill(
child: Container(color: Colors. yellow),
)
]
),
使用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
使用小部件Wrap。
对于类似列的行为尝试:
return Wrap(
direction: Axis.vertical,
spacing: 10,
children: <Widget>[...],);
对于Row类行为尝试:
return Wrap(
direction: Axis.horizontal,
spacing: 10,
children: <Widget>[...],);
有关更多信息:Wrap (Flutter小部件)
对于匹配父选项,你可以用容器包装小部件,并给它一个这样的宽度
宽度:double.infinity
这种方法将使小部件填充屏幕上的最大可用空间。
你可以用小伎俩: 假设你有以下要求: (宽、高)
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],
);