Flutter 中用于展示图片的控件是 Image , 类似于 Android 中的 ImageView , iOS 中的 UIImageView ;
Flutter 中 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 参数必须不能为空 ;
图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :
如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;
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 三个参数必须不为空 ;
图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :
如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;
图片缓存 : 所有的网络图片都会被缓存 ;
header 参数说明 : 可选的 header 参数 , 可以用于发送 带有图片请求的自定义 HTTP 头 ;
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 三个参数必须不能为空 ;
图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :
如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;
在 Android 设备中 , 需要使用 SD 卡权限 , 在清单文件中添加 android.permission.READ_EXTERNAL_STORAGE 权限 ;
缩放图片 : 缩放图片时使用 filterQuality 参数去改变图像的质量 ; 使用 FilterQuality.low 质量设置去缩放图片 ;
图像缓存 :
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 参数必须不能为空 ;
图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :
如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;
缩放图片 : 缩放图片时使用 filterQuality 参数去改变图像的质量 ; 使用 FilterQuality.low 质量设置去缩放图片 ;
图像缓存 :
假设 pubspec.yaml 中有如下配置 :
flutter:
assets:
- images/cat.png
- images/2x/cat.png
- images/3.5x/cat.png
使用 Image.asset('images/cat.png')
代码加载图片 ;
资源图像的加载策略是就近加载 ;
Image 组件使用可以参考之前的 【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 ) 博客 ;
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 数据 , 会报异常 ;
图像尺寸说明 : 如果严格约束图片的宽高 , 需要符合以下任意一个要求 :
如果以上都没有设置 , 那么 Image 组件就是已加载的图片的真实大小 , 这会使界面布局非常难看 ;
缩放图片 : 缩放图片时使用 filterQuality 参数去改变图像的质量 ; 使用 FilterQuality.low 质量设置去缩放图片 ;
图像缓存 :