Flutter 图片组件
文章目录
- Flutter 图片组件
-
- 概述
- 基本属性
- 加载本地图片
- 加载网络图片
- 其他特效
-
- 淡入淡出效果
- loading动画
- 圆形头像加边框
- 添加占位图
- 字体图标
-
- 在Text组件中使用
- Icon
- 自定义字体图标
Flutter 图片组件
概述
图片组件是Flutter的基础组件之一。图标组件包含Image和Icon两个组件，Icon本是是一种文字，只是显示的是图标而不是文字，Image是通过图片解码器将图片解码加载，所以Icon体积更小、加载更快、不会失真。
基本属性
width/height：设置图片宽高。如果不设置宽高时，图片会显示原始大小；如果只设置宽或高，则另一个属性会按比例缩放。
fit：图片显示模式：
- BoxFit.fill：拉伸填充显示空间，图片会变形。
- BoxFit.cover：图片会按比例放大填充满显示空间，超出显示空间的部分会被裁剪。
- BoxFit.contain：图片默认显示规则，按比例缩放适应显示空间。
- BoxFit.fitWidth：图片宽度会缩放到显示空间的宽度，高度会按比例缩放，居中显示，超出显示空间的部分会被剪裁。
- BoxFit.fitHeight：图片高度会缩放到显示空间的高度，宽度会按比例缩放，居中显示，超出显示空间的部分会被剪裁。
- BoxFit.none：图片显示原始大小，只会显示图片中间部分。
color：设置图片颜色。
colorBlendMode：设置颜色混合模式。
repeat：图片小于显示空间时，设置图片的重复规则。
加载本地图片
需要在pubspec.yaml文件中，配置如下：
flutter:
uses-material-design: true
assets:
- images/logo.png
- images/pub.png
- images/user.png
加载图片
Image(
image: AssetImage("images/logo.png"),
width: 100,
)
可简写为
Image.asset(
"images/logo.png",
width: 100,
)
加载网络图片
Image(
image: NetworkImage(
"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"),
width: 100,
)
可简写为
Image.network(
"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
width: 100,
)
其他特效
淡入淡出效果
加载图片时淡入淡出效果
Image.network(
"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
width: 100,
frameBuilder: (
BuildContext context,
Widget child,
int? frame,
bool wasSynchronouslyLoaded,
) {
if (wasSynchronouslyLoaded) {
return child;
} else {
return AnimatedOpacity(
opacity: frame == null ? 0 : 1,
duration: const Duration(seconds: 2),
child: child,
curve: Curves.easeOut,
);
}
},
)
loading动画
Image.network(
"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
width: 100,
loadingBuilder: (
BuildContext context,
Widget child,
ImageChunkEvent? loadingProgress,
) {
if (loadingProgress == null) {
return child;
} else {
return CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
);
}
},
)
圆形头像加边框
Container(
width: 100,
height: 100,
padding: const EdgeInsets.all(3),
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.blue),
child: Container(
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(
"https://img1.baidu.com/it/u=1235679188,872295587&fm=26&fmt=auto",
),
fit: BoxFit.cover,
),
),
),
)
添加占位图
Image.network(
"https://img1.baidu.com/it/u=1235679188,872295587&fm=26&fmt=auto",
width: 100,
fit: BoxFit.cover,
//加载中占位
frameBuilder: (
BuildContext context,
Widget child,
int? frame,
bool wasSynchronouslyLoaded,
) {
if (frame == null) {
return Image.asset("images/logo.png", width: 100);
} else {
return child;
}
},
//加载失败占位
errorBuilder: (
BuildContext context,
Object error,
StackTrace? stackTrace,
) {
return Image.asset("images/user.png", width: 100);
},
)
字体图标
Flutter可以像web开发一样使用字体图标iconfont。
在Text组件中使用
Flutter默认包含一套MaterialDesign的字体图标，在pubspec.yaml文件中配置：
flutter:
uses-material-design: true
String icons = "";
icons += "\uE03e";
icons += "\uE237";
icons += "\uE287";
Text(
icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24,
color: Colors.blue,
),
)
Icon
Row(
children: [
Icon(Icons.error, color: Colors.green),
Icon(Icons.euro, color: Colors.green),
Icon(Icons.event, color: Colors.green),
],
)
自定义字体图标
在pubspec.yaml文件里配置
fonts:
- family: myIcon
fonts:
- asset: fonts/iconfont.ttf
style: italic
使用：
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(IconData(0xe678, fontFamily: "myIcon")),
SizedBox(width: 10),
Icon(IconData(0xe679, fontFamily: "myIcon")),
SizedBox(width: 10),
Icon(IconData(0xe69c, fontFamily: "myIcon")),
],
)