经常会遇到帖子详情/文章详情,需要动态显示网络图片,并且要求图片宽度自适应屏幕,高度进行等比例缩放,如下图:
实现思路:
1、下载图片;
2、计算宽高比;
3、显示;
话不多说,直接贴代码,跑不通的可以留言。
//放在Column内,构建多张图片
List<Widget> _buildImgList(List<String>imgUrlList) {
List<Widget> returnList = List();
for (int i = 0; i < imgUrlList.length; i++) {
returnList.add(InkWell(
child: Column(children: [
ItemFitWidthNetImage(imgUrlList[i])
]),
onTap: () {
//这里是点击查看大图的,可以替换成各自自己的
MediaUtils.showBigImg(context,imgUrlList, i);
},
));
}
return returnList;
}
///宽度自适应的图片
// ignore: non_constant_identifier_names
Widget ItemFitWidthNetImage(String url, double fitWidth) {
return AsperctRaioImage.network(url, builder: (context, snapshot, url) {
//计算缩放
double scale = snapshot.data.width.toDouble() / fitWidth;
double fitHeight = snapshot.data.height.toDouble() / scale;
return Column(
crossAxisAlignment: Cross