【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 参数主要用于减少图片在内存中的大小 ;
【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )相关推荐
- 【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
文章目录 一.Flutter 布局相关的组件简介 二.Row 和 Column 组件 三.SizedBox 组件 四.ClipOval 组件 五. 完整代码示例 六. 相关资源 一.Flutter 布 ...
- 【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )
文章目录 一.Drawer 组件 二.PageView 组件 三.完整代码示例 四.相关资源 一.Drawer 组件 Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , ...
- 【Flutter】StatefulWidget 组件 ( PageView 组件 )
文章目录 一.PageView 组件 二.PageView 组件完整代码示例 三. 相关资源 一.PageView 组件 PageView 组件构造函数 : 构造函数中的可选参数就是 PageView ...
- 【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
文章目录 一.Image 组件 二.TextField 组件 三. 相关资源 一.Image 组件 Image 组件有多个命名构造函数 , 可以从 文件 / 内存 / 网络 / Assets 中加载文 ...
- 【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )
文章目录 一.FloatingActionButton 悬浮按钮组件 二.RefreshIndicator 组件 三. 相关资源 一.FloatingActionButton 悬浮按钮组件 Float ...
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...
- 【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )
文章目录 一.StatefulWidget 组件 二.创建 StatefulWidget 组件 三.MaterialApp 组件 四.Scaffold 组件 五. 相关资源 一.StatefulWid ...
- 【Flutter】StatelessWidget 组件 ( Divider 组件 | Card 组件 | AlertDialog 组件 )
文章目录 一.Divider 组件 二.Card 卡片组件 三.AlertDialog 对话框组件 四. 相关资源 一.Divider 组件 Divider 组件是分割线组件 , 可以设置高度 , 颜 ...
- 【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )
文章目录 一.StatelessWidget 组件 二.Container 组件 三.BoxDecoration 组件 四.Text 组件 五.Icon 组件 六. 相关资源 一.StatelessW ...
最新文章
- ResNet被全面超越了，是Transformer干的：依图科技开源“可大可小”T2T-ViT，轻量版优于MobileNet...
- 【Problem solved】 error C2665: “loadimage”: 2 个重载中没有一个可以转换所有参数类型...
- 微软代码签名证书使用指南
- 泽尼克多项式 matlab,zernike多项式 ---matlab程序 ---arrayfun.m函数
- python print 变量_0、python 的 print()函数、变量和赋值
- html 字体显示倒影,用CSS3的box-reflect设置文字倒影效果的方法讲解
- SQL中代替Like语句的另一种写法
- 百度浏览器启动公司级内测 截图首度曝光
- matlab循环求微分方程,MATLAB解微分方程
- Mysql之如何使用json
- CoinGecko 播客：与 Cartesi 联合创始人 Erick 一起构建 Layer-2
- 东莞市重点培育上市后备科技企业名单（科技局）
- Android 11.0 12.0遥控器点击输入框 弹不出输入法
- 2021-2027全球与中国保温冰盒市场现状及未来发展趋势
- （按位取反）运算的理解
- 攻防世界（动态调试题）
- 【华为OD机试真题 JS】跳格子游戏
- Unity3D 自学之路
- IE8适配总结（一）
- IDEA初学者保存就格式化代码插件save actions