使用 FadeInImage Flutter 正确拟合图像
Posted
技术标签:
【中文标题】使用 FadeInImage Flutter 正确拟合图像【英文标题】:Correctly fit image with FadeInImage Flutter 【发布时间】:2019-06-11 20:07:35 【问题描述】:您好,我正在使用带有占位符和图像的 FadeInImage,但第二张图像没有覆盖整个父级,我正在使用 fit:BoxFit.cover 但无论如何结果都不好。任何人都知道如何使它成为可能。这是我的实际代码。 'document[_newsImage] 是从 CloudFirebase 获取的 URL。
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)
],
)
],
),
))
])));
【问题讨论】:
可以添加item小部件的代码吗? @diegoveloper 完成,我添加了完整的 itemCard,它位于 ListView.builder 中。 【参考方案1】:试试这些改变:
调整容器大小以填充宽度在 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 Flutter 正确拟合图像的主要内容,如果未能解决你的问题,请参考以下文章