前言
-
Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。
示意图 今天，我主要讲解Flutter中图片组件方面的Widget，包括Image、Icon、ImageIcon，希望你们会喜欢。
示意图
1. Image
1.1 作用
显示图片，主要支持的加载方式：本地图片、资源图片 & 网络图片。
1.2 常用属性
const Image({
Key key,
@required this.image,// ImageProvider，必填参数，接收一个ImageProvider 类型的值
this.semanticLabel, // String，图片的描述
this.excludeFromSemantics = false, // bool，是否从语义上排除该图片，默认值为false
this.width, // double，图片的宽度
this.height, // double，图片的高度
this.color, // Color，图片的前景色，一般不设置或设置透明色，会覆盖掉图片，一般会和colorBlendMode结合使用
this.colorBlendMode, // BlendMode，一般和color结合使用，设置color的混合模式
this.fit, // BoxFit，设置图片的显示模式
this.alignment = Alignment.center, // AlignmentGeometry，用于设置图片的对齐方式，默认值：Alignment.center
this.repeat = ImageRepeat.noRepeat, // ImageRepeat，图片的重复方式，当图片没有完全覆盖掉容器时使用。默认值：ImageRepeat.noRepeat
...
})
下面，将详细讲解Image的属性。
1.3 属性image
- 接收一个ImageProvider类型的值。ImageProvider是一个抽象类
- 实现类主要包括：AssetImage、MemoryImage、NetworkImage、FileImage，分别表示可从资源、内存、网络 & 文件中获取图片
// 加载网络图片
Image.network(String src, {
Key key,
double scale = 1.0,
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,
})
// 加载本地文件
Image.file(File file, {
Key key,
double scale = 1.0,
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,
})
// 从项目资源中加载
Image.asset(String name, {
Key key,
AssetBundle bundle,
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,
})
// 从内存中加载
Image.memory(Uint8List bytes, {
Key key,
double scale = 1.0,
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,
})
为了方便使用，在Image的构造方法里也加入了快速从各种不同途径获得图片的方式，Image的构造方法包括：
Image() // 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法
Image.asset // 加载资源图片
Image.file // 加载本地图片文件
Image.network // 加载网络图片
Image.memory // 加载Uint8List资源图片
// 获得资源图片
new Image.asset('imgs/logo.jpeg')
// 获得网络图片
new Image.network(
'https://flutter.io/images/homepage/header-illustration.png')
// 获得本地文件图片
new Image.file(new File("/Users/gs/Downloads/1.jpeg"))
// 获得Uint8List图片
new Image.memory(bytes)
// 获得使用ImageProvider加载图片
new Image(image: new NetworkImage(
"https://flutter.io/images/homepage/screenshot-2.png"),)
此处特别说明加载本地的资源图片
步骤1：创建一个文件夹存放图片
此处创建的是文件夹名 = assetImage，放了一个名为photo.jpg的图片
步骤2：在pubspec.yaml中声明资源
注：声明时路径和前面的- 存在间隔
步骤3：加载时填写正确资源路径
// 获得资源图片
new Image.asset('assetImage/photo.jpg')
- 实际测试代码
main.dart
import 'package:flutter/material.dart';// Material UI组件库
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主体
body: new Image.asset('assetImage/photo.jpg')
);
}
}
- 测试效果
1.4 属性width & height、fit
- 属性说明
// 代表Image显示区域的宽度和高度设置
this.width, // double，图片的宽度
this.height, // double，图片的高度
this.fit, // BoxFit，设置图片的显示模式，具体设置如下图
// 此处将两个属性一起说明是因为：
// 图片的容器Image Widget的宽高 & 图片本身的大小不一样（需区分开来）
// 所以结合图片的显示模式讲解
- 使用
main.dart
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主体
body: new Image.asset(
'assetImage/photo.jpg',
width: 200.0,
height: 100.0,
fit: BoxFit.fill,
));
}
}
1.5 属性color、colorBlendMode
- 属性说明
this.color
// Color，图片的前景色，一般不设置或设置透明色，会覆盖掉图片，一般会和colorBlendMode结合使用
this.colorBlendMode
// BlendMode，一般和color结合使用，设置color的混合模式，具体设置属性如下：
- 使用
main.dart
import 'package:flutter/material.dart';// Material UI组件库
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主体
body: new Image.asset(
'assetImage/photo.jpg',
width: 200.0,
height: 100.0,
fit: BoxFit.fill,
color: Colors.red,
colorBlendMode: BlendMode.colorDodge,
));
}
}
-
测试效果
1.6 属性alignment
- 属性说明
this.alignment = Alignment.center
// AlignmentGeometry，用于设置图片的对齐方式，默认值：Alignment.center，可设置的属性如下：
- 具体使用
为了方便展示，此处加入一个布局容器Container方便展示。
main.dart
import 'package:flutter/material.dart';// Material UI组件库
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
// 主体
body: Container(
width: 500,
height: 1000,
color: Colors.red,
child: Image.asset(
'assetImage/photo.jpg',
width: 50.0,
height: 50.0,
alignment: Alignment.bottomCenter,
fit: BoxFit.contain,
),
));
}
}
- 测试效果
1.7 属性Repeat
- 属性说明
this.repeat = ImageRepeat.noRepeat
// ImageRepeat，图片的重复方式，当图片没有完全覆盖掉容器时使用。默认值：ImageRepeat.noRepeat
// 枚举类型
repeat // 1. 在x轴和y轴重复
repeatX // 2. 在x轴重复
repeatY // 3. 在y轴重复
noRepeat // 4. 不重复
- 具体使用
import 'package:flutter/material.dart';// Material UI组件库
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主体
body: Container(
width: 500,
height: 1000,
color: Colors.red,
child: Image.asset(
'assetImage/photo.jpg',
width: 50.0,
height: 50.0,
alignment: Alignment.bottomCenter,
fit: BoxFit.contain,
repeat: ImageRepeat.noRepeat,
),
));
}
}
- 测试效果
至此，关于Image Widget讲解完毕。
2. Icon
2.1 作用
显示图标图片
2.2 优势（相对于Image）
- 体积小：可以减小安装包大小。
- 矢量：矢量图标，放大不会影响其清晰度。
- 可应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等 & 可通过TextSpan和文本混用
2.3 构造方法
const Icon(this.icon, {
Key key, // 设置使用的图标
this.size, // 图标大小
this.color, // 颜色
this.textDirection, // 渲染图标的文本方向
})
2.4 具体使用
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主体
body: Icon(
Icons.camera,
size: 50,
color: Colors.red,
textDirection: TextDirection.ltr,
));
}
}
2.5 测试效果
2.6 特别说明
Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下
3. ImageIcon
3.1 作用
自定义图形图标，来自于图片绘制。图标不可交互式。
3.2 构造函数
const ImageIcon(this.image, {
Key key,
this.size, // 图标大小
this.color, // 颜色
})
- 区别于Icon，ImageIcon是采用自定义ImageProvider来定义图标
- 自定义ImageProvider分别是上面讲解Image的：AssetImage、MemoryImage、NetworkImage、FileImage，即分别表示可从资源、内存、网络 & 文件中获取图片
// 加载网络图片
Image.network(String src, {
Key key,
double scale = 1.0,
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,
})
// 加载本地文件
Image.file(File file, {
Key key,
double scale = 1.0,
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,
})
// 从项目资源中加载
Image.asset(String name, {
Key key,
AssetBundle bundle,
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,
})
// 从内存中加载
Image.memory(Uint8List bytes, {
Key key,
double scale = 1.0,
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,
})
// 为了方便使用，在Image的构造方法里也加入了快速从各种不同途径获得图片的方式，Image的构造方法包括：
Image() // 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法
Image.asset // 加载资源图片
Image.file // 加载本地图片文件
Image.network // 加载网络图片
Image.memory // 加载Uint8List资源图片
3.3 具体使用
import 'package:flutter/material.dart';// Material UI组件库
void main() => runApp(MyApp());
// 无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的组件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //标题
theme: ThemeData(primarySwatch: Colors.blue), //主题色
home: MyHomePage(), // 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面
);
}
}
// 返回的Widget对象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//设置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主体
body: ImageIcon(AssetImage(
'assetImage/plane.png'), // 注：此处的图片格式必须是.png哦！！
size: 300,
color: Colors.red,)
);
}
}
3.4 测试效果图
至此，关于图片方面的Widget讲解完毕。
4. 总结
- 本文主要讲解了Flutter中图片组件方面的Widget，包括Image、Icon、ImageIcon
- 接下来推出的文章，我将继续讲解Flutter的相关知识，包括更多的Widget用法、实例应用等，感兴趣的读者可以继续关注我的博客哦：Carson_Ho的Android博客
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
相关文章阅读
Android开发：最全面、最易懂的Android屏幕适配解决方案
Android开发：史上最全的Android消息推送解决方案
Android开发：最全面、最易懂的Webview详解
Android开发：JSON简介及最全面解析方法!
Android四大组件：Service服务史上最全面解析
Android四大组件：BroadcastReceiver史上最全面解析
欢迎关注Carson_Ho的简书！
不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。
