《Flutter入门疑难杂症》获取网络图片,并自适应屏幕宽度(适合文章/帖子详情)

本文介绍如何在Flutter中实现网络图片的动态显示,确保图片宽度适应屏幕,高度按比例缩放。通过下载图片,计算宽高比,然后使用AsperctRatioImage组件来展示图片。
摘要由CSDN通过智能技术生成

经常会遇到帖子详情/文章详情,需要动态显示网络图片,并且要求图片宽度自适应屏幕,高度进行等比例缩放,如下图:
在这里插入图片描述
实现思路:
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
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值