【Flutter -- 基础组件】图片组件 Image & Icon
原创
©著作权归作者所有:来自51CTO博客作者KevinDev0724的原创作品,请联系作者获取转载授权,否则将追究法律责任
文章目录
一、图片
Flutter 中,我们可以通过 Image 组件来加载并显示图片,Image 的数据源可以是 asset、文件、内存以及网络。
1. 属性
- alignment→ AlignmentGeometry - 图像边界内对齐图像。
- centerSlice→ Rect - 九片图像的中心切片。
- color→ Color - 该颜色与每个图像像素混合colorBlendMode。
- colorBlendMode→ BlendMode - 用于 color 与此图像结合使用。
- fit→ BoxFit - 图像在布局中分配的空间。
- gaplessPlayback→ bool - 当图像提供者发生变化时,是继续显示旧图像(true)还是- - 暂时不显示(false)。
- image→ ImageProvider - 要显示的图像。
- matchTextDirection→ bool - 是否在图像的方向上绘制图像 TextDirection。
- repeat→ ImageRepeat - 未充分容器时,是否重复图片。
- height→ double - 图像的高度。
- width→ double - 图像的宽度。
2. 从 asset 中加载图片
1. 在工程根目录下创建一个 images 目录,并将图片 avatar.png 拷贝到该目录。
2. 在 pubspec.yaml 中的 flutter 部分添加如下内容:
注意: 由于 yaml 文件对缩进严格,所以必须严格按照每一层两个空格的方式进行缩进,此处 assets 前面应有两个空格。
3. 加载该图片
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('图片 & Icon'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("1.图片",
textScaleFactor: 1.2,
),
Image(
image: AssetImage("images/avatar.png"),
width: 100.0
),
],
)
)
);
}
}
- 效果图
Image 也提供了一个快捷的构造函数 Image.asset 用于从 asset 中加载、显示图片:
.asset("images/avatar.png",
width: 100.0,
),
3. 从网络加载图片
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('图片 & Icon'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("1.图片",
textScaleFactor: 1.2,
),
Image(
image: NetworkImage(
"https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg"),
width: 200.0,
),
],
)
)
);
}
}
- 效果图
Image 也提供了一个快捷的构造函数 Image.network 用于从网络加载、显示图片:
Image.network(
"https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg",
width: 200.0,
)
二、Icon
Flutter 中,可以像 Web 开发一样使用 iconfont,iconfont 即“字体图标”,它是将图标做成字体文件,然后通过指定不同的字符而显示不同的图片。
在 Flutter 开发中,iconfont 和图片相比有如下优势:
- 体积小:可以减小安装包大小。
- 矢量的:iconfont都是矢量图标,放大不会影响其清晰度。
- 可以应用文本样式:可以像文本一样改变字体图标的颜色、大小对齐等。
- 可以通过TextSpan和文本混用。
1. 属性
- color
类型:Color
说明:图标颜色 - icon
类型:IconData
说明:显示的图标 - semanticLabel
类型:String
说明:语义标签,此标签不会显示在UI中 - size
类型:double
说明:图标尺寸 - textDirection
类型:TextDirection
说明:用户呈现图标的文本方向
2. 使用 Material Design 字体图标
Flutter 默认包含了一套 Material Design 的字体图标,在 pubspec.yaml 文件中的配置如下:
flutter:
uses-material-design: true
Material Design 所有图标可以在其官网查看:https://material.io/tools/icons/
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('图片 & Icon'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green),
Icon(Icons.error,color: Colors.red),
Icon(Icons.fingerprint,color: Colors.blue),
],
)
)
);
}
}
- 效果图