在颤振中，我希望容器内的图标占用容器的最大大小

Question

Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
color: Colors.blueAccent
),
),
Flexible(
flex: 4,
child: Container(
color: Colors.deepOrangeAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
//mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Icon(Icons.image),
],
),
),
),
Flexible(
flex: 2,
child: Container(color: Colors.blueGrey),
),
],
),
);

截图

图标仅采用其原始大小。我希望它装满容器。 我尝试过LayoutBuilder，但BoxConstraint有无限的高度警告。 请建议任何其他选项，而无需对任何小部件使用硬编码大小。

Answer 1

编辑;因此，在阅读了您的评论后，您应该改用 FittedBox(如评论中建议的那样(并BoxFit.Fill属性;所以：

<Widget>[ Expanded(child:FittedBox(child: Icon(Icons.image),fit: BoxFit.fill)), ]

--

如果可以将icon更改为Image则可以使用 BoxFit.fill 属性拉伸图像以填充整个容器(也将图像包装在扩展的小部件中(。

下面是一个带有占位符的示例：

Flexible(
flex: 4,
child: Container(
color: Colors.deepOrangeAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
//mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(child:                          Image.network('https://picsum.photos/250?image=9', fit:BoxFit.fill)

)
],
),
),

Answer 2

我会采取LayoutBuilder的方法。您提到您有无限警告，这可能是因为您没有在父容器的高度或其宽度之间动态选择。

根据设备的方向，您可能需要选择一个或另一个。满足这一点的最简单方法是选择两者中较小的一个。

Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Flexible(
flex: 1,
child: Container(color: Colors.blueAccent),
),
Flexible(
flex: 4,
child: Container(
color: Colors.deepOrangeAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
//mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
LayoutBuilder(builder: (context, constraints) {
var height = constraints.maxHeight;
var width = constraints.maxWidth;
return Icon(FontAwesomeIcons.addressBook, size: min(height, width));
}),
],
),
),
),
Flexible(
flex: 2,
child: Container(color: Colors.blueGrey),
),
],
),
);
}
}

注意：您需要导入'dart:math'包才能使用min()函数。