我正在学习 Flutter 中的 Expanded widget。 我的理解是,扩展小部件需要整个宽度/高度,具体取决于或
Row
/ Column
。
所以,这是我使用的代码
Row
:
class DicePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
child: Image(
image: AssetImage('images/dice1.png'),
),
),
],
);
}
}
这是输出:
它占据了屏幕的整个宽度,这很好。
但是,对于
Column
,这就是我使用的:
class DicePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: Image(
image: AssetImage('images/dice1.png'),
),
),
],
);
}
}
输出为:
为什么这里没有用图像拍摄整个高度?
我认为您的图像尺寸接近 1:1,因此扩展小部件会在图像允许的范围内将其扩展。尝试这个来拉伸图像:
child: Image(
image: AssetImage('images/dice1.png'),
fit: BoxFit.fill,
),
在扩展小部件中使用 flex 属性
Expanded(
flex: 0,
),
我使用了Flexible,它很有帮助,因为Flexible小部件有参数:
this.fit = FlexFit.loose
它可以防止小部件占据整个宽度