美文网首页
【Flutter】 Image常用图片加载方式

【Flutter】 Image常用图片加载方式

作者: Duobe | 来源:发表于2019-07-27 16:40 被阅读0次
    • 本地图片加载
      项目根目录下新建 images 目录并将图片拷贝进去,pubspec.yaml 图片路径配置
    flutter:
      ...
      # 图片路径配置
      assets:
       - images/logo.jpg
       - images/pic.jpg
      ...
    

    加载项目资源包图片

    Image(
      image: AssetImage("images/pic.jpg"),
      height: 100.0,
      width: 100.0,
    ),
    // Or
    Image.asset(
      "images/pic.jpg",
      height: 100.0,
      width: 100.0,
    ),
    
    • 网络图片加载
    // 无本地缓存
    Image.network(
      'http://pic23.nipic.com/20120810/5736735_162511503170_2.jpg',
      width: 200,
      height: 200,
    )
    // or
    // 淡入效果,无本地缓存
    FadeInImage.assetNetwork(
      placeholder: 'images/avatar.png', // 占位图
      image: 'http://pic23.nipic.com/20120810/5736735_162511503170_2.jpg',
      width: 200,
      height: 200
    )
    
    • 使用第三方控件
    # `pubspec.yaml`配置
    dependencies:
      flutter:
        sdk: flutter
    
      cached_network_image: ^1.1.1
    
    // 导入包
    import 'package:cached_network_image/cached_network_image.dart';
    
    CachedNetworkImage(
      height: 200.0,
      alignment: Alignment.centerLeft,
      imageUrl: "$imageUrl",
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
    )
    // or
    Image(
      image: CachedNetworkImageProvider(imageUrl),
      height: 200.0,
      alignment: Alignment.centerLeft,
    ),
    

    cached_network_image Or flutter_advanced_networkimage

    • 总结
    Image控件构造函数 描述
    Image 用于从ImageProvider获取图像
    Image.asset 用于使用key从AssetBundle获取图像
    Image.network 用于从URL地址获取图像
    Image.file 用于从File获取图像

    更多参考:
    http://codingdict.com/blog/article/2019/3/5/883.html
    https://www.cnblogs.com/x-man/p/10648389.html
    https://m.jb51.net/article/165613.htm

    相关文章

      网友评论

          本文标题:【Flutter】 Image常用图片加载方式

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