美文网首页
Flutter图片加载

Flutter图片加载

作者: Mariko00o | 来源:发表于2020-09-29 14:29 被阅读0次

    Flutter中,通过Image组件来加载并显示图片,可以从asset、文件、内存以及网络获取图片,都需要实现不同的ImageProvider

    Flutter 图片加载方式:

    Image()  // 通用方法,使用ImageProvider实现,如下方法本质上也是使用的这个方法
    Image.asset // 加载资源图片
    Image.file  // 加载本地图片文件
    Image.network  // 加载网络图片
    Image.memory   // 加载Uint8List资源图片
    

    从asset中加载图片

    AssetImage是实现了从Asset中加载图片的ImageProvider

    1. 在工程根目录下创建一个images目录,并将图片avatar.png拷贝到该目录。
      也可以设置其他自定义目录,如lib下面的images,方便管理。
    2. pubspec.yaml中的flutter部分添加如下内容:
    assets:
        - images/avatar.png
        - images/a_dot_burr.jpeg
        - images/a_dot_ham.jpeg
    

    如果不想像这样每添加一张图片都添加一条配置,直接包含某一个目录中的所有的资源,直接指定目录的名称:

    assets:
        - images/
    

    注意: 由于 yaml 文件对缩进严格,所以必须严格按照每一层两个空格的方式进行缩进,此处assets前面应有两个空格。

    1. 加载图片
    Image(
      image: AssetImage("images/avatar.png"),
      width: 100.0
    );
    

    或者使用Image提供的一个快捷构造函数Image.asset用于从asset中加载图片:

    Image.asset("images/avatar.png",
      width: 100.0,
    )
    

    从网络加载图片

    Image(
      image: NetworkImage(
          "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
      width: 100.0,
    )
    

    或者使用Image提供的一个快捷的构造函数Image.network用于从网络加载图片:

    Image.network(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
      width: 100.0,
    )
    

    注意一些点:
    1.Imagewidth、height参数,当不指定宽高时,图片会根据当前父容器的限制,尽可能的显示其原始大小。
    如果只设置width、height的其中一个,那么另一个属性默认会按比例缩放,可以通过fit属性来指定适应规则,具体介绍参考文档

    2.Image缓存,Image加载过得图片只在内存中会有缓存,无法缓存本地。一旦应用关闭,这个缓存就没有了,下次重新启动还会从网络下载并缓存。

    cached_network_image

    一个用于显示来自Internet的图像并将它们保存在缓存目录中的flutter库,可以用来加载和缓存网络图像,也可以与占位符和错误小部件一起使用。

    import 'package:cached_network_image/cached_network_image.dart';
    
    CachedNetworkImage(
            imageUrl: "http://via.placeholder.com/350x150",
            placeholder: (context, url) => CircularProgressIndicator(),//CircularProgressIndicator 属于cached_network_image库
            errorWidget: (context, url, error) => Icon(Icons.error),
         ),
    

    transparent_image

    有默认占位图和淡入效果。

    import 'package:transparent_image/transparent_image.dart';
    
    FadeInImage.memoryNetwork(
        placeholder: kTransparentImage, //透明图,kTransparentImage 属于 transparent_image 库
        image: 'http://via.placeholder.com/350x150',
    );
    

    可以使用应用内的图片来做占位图:

    FadeInImage.assetNetwork(
          placeholder: "lib/images/a.jpeg",
          image: "http://via.placeholder.com/350x150")
    

    相关文章

      网友评论

          本文标题:Flutter图片加载

          本文链接:https://www.haomeiwen.com/subject/iyreuktx.html