Image 支持如下几种类型的构造函数：
new Image
new Image.asset
- 使用
key 从 AssetBundle 获取图像
new Image.network
1
2
3
| e.g.
Image.network('网络图片地址');
|
new Image.file
new Image.memory
如何加载静态图片及处理不同分辨率的图片？
加载项目中的静态图片步骤：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| e.g.
Image(
width: 26,
height: 26,
image: AssetImage(my_icon.png),
)
Image.asset(
my_icon.png,
width: 26,
height: 26,
)
|
为了让 Image 能够根据像素密度自适应不同分辨率 使用 AssetImage 指定图像 并且确保在 Widget 树中的 Image Widget 上方存在 MaterialApp 、 WidgetsApp 或 MediaQuery 窗口Widget
如何加载本地图片？
加载完整路径的本地图片
1
2
3
4
5
| e.g.
import 'dart:io';
Image.file(File('/sdcard/Download/Stack.png'))
|
加载相对路径的本地图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| e.g.
import 'dart:io';
import 'package:path_provider/path_provider.dart';
FutureBuilder(future: _getLocalFile("Download/Stack.png"),
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
return snapshot.data != null ? Image.file(snapshot.data) : Container();
})
)
Future<File> _getLocalFile(String filename) async {
String dir = (await getExternalStorageDirectory()).path;
File f = new File('$dir/$filename');
return f;
}
|
如何设置 placeholder?
从内存中加载 placeholder
设置 placeholder 需要借助 FadeInImage 从内存 本地资源中加载 placeholder
- 在
pubspec.yaml 文件中添加 transparent_image 插件
https://pub.dev/packages/transparent_image#-installing-tab-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| e.g.
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Stack(
children: <Widget>[
Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
),
),
],
),
),
);
}
}
|
从本地资源中加载 placeholder
1
2
3
4
5
6
| e.g.
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
);
|
如何配置图片缓存？
可以使用 cached_network_image 插件 从网络上加载图片 并且缓存到本地 以供下次使用
- 在
pubspec.yaml 文件中添加 cached_network_image 插件
https://pub.dev/packages/cached_network_image#how-to-use
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| e.g.
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Cached Images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: CachedNetworkImage(
placeholder: (context, url) => new CircularProgressIndicator(),
imageUrl:
image: 'https://s2.ax1x.com/2019/07/18/ZXbWKU.jpg',
'https://picsum.photos/250?image=9',
),
),
),
);
}
}
|
如何加载Icon？
可以使用 Icon 来加载
Flutter 提供了 icon 库
可根据选择使用对应的 icon
https://design.google.com/icons/
https://material.io/tools/icons/?style=baseline
1
2
3
4
5
6
7
8
9
10
11
12
|
const Icon(this.icon
Key key,
this.size,
this.color,
this.semanticLabel,
this.textDirection,
})
e.g.
Icon(Icons.android,size: 100)
|
