使用 FadeInImage Flutter 正确拟合图像
Correctly fit image with FadeInImage Flutter
你好,我正在使用带有占位符和图像的 FadeInImage,但是第二个图像没有覆盖完整的父图像,我正在使用 fit:BoxFit.cover 但无论如何结果都不好。任何人都知道如何让它成为可能。这是我的实际代码。 'document[_newsImage] 是 URL 来自 CloudFirebase 的
Widget _itemCard(BuildContext context, DocumentSnapshot document, int index) {
return new Padding(
padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
child: new Card(
child: Column(children: <Widget>[
new Container(
height: 250.0,
child: new FadeInImage.assetNetwork(
placeholder: 'assets/images/esperanza.jpg',
image: document[_newsImage],
fit: BoxFit.cover,
)),
Container(
height: 150.0,
child: Padding(
padding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
document[_newsTitle],
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Text(document[_newsDate])
]),
Text(
document[_textShortDescription],
style: TextStyle(color: Colors.grey, fontSize: 14),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
onPressed: () => onPressed(context, document),
child: Text(
_stringShowMore,
style: TextStyle(color: Colors.indigo),
)),
IconButton(icon: Icon(Icons.share), onPressed: null)
],
)
],
),
))
])));
}
试试这些改变:
- 调整容器的大小以填充宽度
在 FadeInImage 中添加高度
new Container(
width: MediaQuery.of(context).size.width,
child: new FadeInImage.assetNetwork(
placeholder: 'assets/images/esperanza.jpg',
image: document[_newsImage],
fit: BoxFit.cover,
height: 250.0,
)),
你好,我正在使用带有占位符和图像的 FadeInImage,但是第二个图像没有覆盖完整的父图像,我正在使用 fit:BoxFit.cover 但无论如何结果都不好。任何人都知道如何让它成为可能。这是我的实际代码。 'document[_newsImage] 是 URL 来自 CloudFirebase 的
Widget _itemCard(BuildContext context, DocumentSnapshot document, int index) {
return new Padding(
padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
child: new Card(
child: Column(children: <Widget>[
new Container(
height: 250.0,
child: new FadeInImage.assetNetwork(
placeholder: 'assets/images/esperanza.jpg',
image: document[_newsImage],
fit: BoxFit.cover,
)),
Container(
height: 150.0,
child: Padding(
padding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
document[_newsTitle],
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Text(document[_newsDate])
]),
Text(
document[_textShortDescription],
style: TextStyle(color: Colors.grey, fontSize: 14),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
onPressed: () => onPressed(context, document),
child: Text(
_stringShowMore,
style: TextStyle(color: Colors.indigo),
)),
IconButton(icon: Icon(Icons.share), onPressed: null)
],
)
],
),
))
])));
}
试试这些改变:
- 调整容器的大小以填充宽度
在 FadeInImage 中添加高度
new Container( width: MediaQuery.of(context).size.width, child: new FadeInImage.assetNetwork( placeholder: 'assets/images/esperanza.jpg', image: document[_newsImage], fit: BoxFit.cover, height: 250.0, )),