AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )

2022-01-29 504
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )

文章目录

一、Image 组件简介

二、Image 构造函数

三、Image.network 构造函数

四、Image.file 构造函数

五、Image.asset 构造函数

六、Image.memory 构造函数





一、Image 组件简介


Flutter 中用于展示图片的控件是 Image , 类似于 Android 中的 ImageView , iOS 中的 UIImageView ;


Flutter 中 Image 组件支持的图片格式 :


jpeg

png

bmp

wbmp

gif

animated gif

webp

animated webp



下面介绍 Image 组件的构造函数 ;






二、Image 构造函数


Image 构造函数 :


const Image({
    Key key,
    @required this.image,
    this.frameBuilder,
    this.loadingBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       super(key: key);


必须传入 image 作为参数 , 其它参数都是可选的 , image 类型是 ImageProvider ;


/// The image to display.
final ImageProvider image;


构造函数中 image , alignment , repeat , matchTextDirection 参数必须不能为空 ;


图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :


① 指定 width 和 height 参数 ;

② 指定 Image 组件放置在严格约束的布局中 ;

如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;






三、Image.network 构造函数


Image.network 是命名构造方法 , 该构造方法创建的 Image 组件用于显示网络的 ImageStream 图片 ;


Image.network(
    String src, {
    Key key,
    double scale = 1.0,
    this.frameBuilder,
    this.loadingBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    Map<String, String> headers,
    int cacheWidth,
    int cacheHeight,
  }) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, NetworkImage(src, scale: scale, headers: headers)),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       assert(cacheWidth == null || cacheWidth > 0),
       assert(cacheHeight == null || cacheHeight > 0),
       super(key: key);


该构造函数需要传入一个图片 url 地址 , 其中 src , scale , repeat 三个参数必须不为空 ;


图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :


① 指定 width 和 height 参数 ;

② 指定 Image 组件放置在严格约束的布局中 ;

如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;


图片缓存 : 所有的网络图片都会被缓存 ;


header 参数说明 : 可选的 header 参数 , 可以用于发送 带有图片请求的自定义 HTTP 头 ;






四、Image.file 构造函数


Image.file构造函数 , 用于从本地文件中获取图片 , 显示到 Image 组件中 ;


创建一个 Image 组件 , 展示从文件中获取的 ImageStream 图片 ;


 

Image.file(
    File file, {
    Key key,
    double scale = 1.0,
    this.frameBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    int cacheWidth,
    int cacheHeight,
  }) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, FileImage(file, scale: scale)),
       loadingBuilder = null,
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       assert(cacheWidth == null || cacheWidth > 0),
       assert(cacheHeight == null || cacheHeight > 0),
       super(key: key);


构造函数中 file , scale , repeat 三个参数必须不能为空 ;



图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :


① 指定 width 和 height 参数 ;

② 指定 Image 组件放置在严格约束的布局中 ;

如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;



在 Android 设备中 , 需要使用 SD 卡权限 , 在清单文件中添加 android.permission.READ_EXTERNAL_STORAGE 权限 ;



缩放图片 : 缩放图片时使用 filterQuality 参数去改变图像的质量 ; 使用 FilterQuality.low 质量设置去缩放图片 ;


FilterQuality.low 对应 双线性差值法 ( 图像缩放算法 )

FilterQuality.none 对应 最近邻法 ( 图像缩放算法 )


图像缓存 :


参数作用 : 如果设置了 cacheWidth 或 cacheheheight 参数 , 则指示图像引擎该图片应该被解码成指定的大小 ;

显示图片大小 : 缓存的大小不影响显示大小 , 不管这两个参数设置什么数值 , 图像都会被渲染到 width 和 height 指定的布局下 ;

内存缓存大小 : cacheWidth 或 cacheheheight 参数主要用于减少图片在内存中的大小 ;





五、Image.asset 构造函数


Image.asset 构造函数 : 创建一个 Image 组件 , 图片来源是 asset bundle , 就是项目文件中的图片 ;


 

Image.asset(
    String name, {
    Key key,
    AssetBundle bundle,
    this.frameBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    String package,
    this.filterQuality = FilterQuality.low,
    int cacheWidth,
    int cacheHeight,
  }) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, scale != null
         ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
         : AssetImage(name, bundle: bundle, package: package)
       ),
       loadingBuilder = null,
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       assert(cacheWidth == null || cacheWidth > 0),
       assert(cacheHeight == null || cacheHeight > 0),
       super(key: key);


构造函数中 name , repeat 参数必须不能为空 ;



图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :


① 指定 width 和 height 参数 ;

② 指定 Image 组件放置在严格约束的布局中 ;

如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;



缩放图片 : 缩放图片时使用 filterQuality 参数去改变图像的质量 ; 使用 FilterQuality.low 质量设置去缩放图片 ;


FilterQuality.low 对应 双线性差值法 ( 图像缩放算法 )

FilterQuality.none 对应 最近邻法 ( 图像缩放算法 )


图像缓存 :


参数作用 : 如果设置了 cacheWidth 或 cacheheheight 参数 , 则指示图像引擎该图片应该被解码成指定的大小 ;

显示图片大小 : 缓存的大小不影响显示大小 , 不管这两个参数设置什么数值 , 图像都会被渲染到 width 和 height 指定的布局下 ;

内存缓存大小 : cacheWidth 或 cacheheheight 参数主要用于减少图片在内存中的大小 ;


假设 pubspec.yaml 中有如下配置 :


flutter:
  assets:
    - images/cat.png
    - images/2x/cat.png
    - images/3.5x/cat.png


使用 Image.asset('images/cat.png') 代码加载图片 ;


在设备像素比 2.0 的屏幕上 , 加载 images/2x/cat.png 图片 ;

在设备像素比 4.0 的屏幕上 , 加载 images/3.5x/cat.png 图片 ;

在设备像素比 1.0 的屏幕上 , 加载 images/cat.png 图片 ;

资源图像的加载策略是就近加载 ;



Image 组件使用可以参考之前的 【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 ) 博客 ;






六、Image.memory 构造函数


Image.memory 构造函数 : 创建一个 Image 组件 , 图片来源是 Uint8List 对象 , 就是内存中的数据 ;


Image.memory(
    Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.frameBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    int cacheWidth,
    int cacheHeight,
  }) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, MemoryImage(bytes, scale: scale)),
       loadingBuilder = null,
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       assert(cacheWidth == null || cacheWidth > 0),
       assert(cacheHeight == null || cacheHeight > 0),
       super(key: key);


构造函数中 bytes , scale , repeat 参数必须不能为空 ;



图片数据只接受压缩后的图片格式 , 如 png 格式 ;


传入未压缩的图片数据 , 如 RGB 数据 , 会报异常 ;



图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :


① 指定 width 和 height 参数 ;

② 指定 Image 组件放置在严格约束的布局中 ;

如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;



缩放图片 : 缩放图片时使用 filterQuality 参数去改变图像的质量 ; 使用 FilterQuality.low 质量设置去缩放图片 ;


FilterQuality.low 对应 双线性差值法 ( 图像缩放算法 )

FilterQuality.none 对应 最近邻法 ( 图像缩放算法 )


图像缓存 :


参数作用 : 如果设置了 cacheWidth 或 cacheheheight 参数 , 则指示图像引擎该图片应该被解码成指定的大小 ;

显示图片大小 : 缓存的大小不影响显示大小 , 不管这两个参数设置什么数值 , 图像都会被渲染到 width 和 height 指定的布局下 ;

内存缓存大小 : cacheWidth 或 cacheheheight 参数主要用于减少图片在内存中的大小 ;


文章标签：
iOS开发
Android开发
算法
缓存
关键词：
Flutter组件
Flutter Image
Flutter简介
韩曙亮
目录
相关文章
卓伊凡
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
卓伊凡
1036 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
卓伊凡
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
卓伊凡
544 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
卓伊凡
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
卓伊凡
534 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
飞川001
|
索引
【Flutter 开发必备】AzListView 组件全解析，打造丝滑索引列表！
在 Flutter 开发中，AzListView 是实现字母索引分类列表的理想选择。它支持 A-Z 快速跳转、悬浮分组标题、自定义 UI 和高效性能，适用于通讯录、城市选择等场景。本文将详细解析 AzListView 的核心参数和实战示例，助你轻松实现流畅的索引列表。
飞川001
708 7
光明顶阳顶天
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些？
Stream 组件在 Flutter 中的应用场景有哪些？
光明顶阳顶天
557 58
dufadayang
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
dufadayang
357 60
那年春天
|
Dart
Flutter|常用数据通信组件
在做需求时经常会遇到组件间通信，本篇汇总了几种常用的通信方式
那年春天
508 57
那年春天
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
那年春天
274 49
lqj_本人
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式，包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法，您可以构建灵活、可重用且易于维护的 UI 组件，从而提升开发效率和代码质量。
lqj_本人
516 1
lqj_本人
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先，通过`flutter create`命令创建项目；接着，在`lib`目录下封装一个自定义输入框组件`CustomInput`；然后，在主应用文件`main.dart`中使用该输入框组件，实现简单的UI布局和功能；最后，通过`flutter run`启动应用。本文还提供了后续扩展建议，如状态管理、网络请求和UI优化。
lqj_本人
311 1