1. 加载项目中的图片:
- 在项目根目录中创建 images 文件夹,然后放入三张图片;
- 在 yaml 文件中添加;
flutter:
assets:
- images/pic1.jpg
- images/pic2.jpg
- images/pic3.jpg
Widget renderBody() {
return new Column(
children: <Widget>[
new Image.asset('images/pic1.jpg'),
new Image.asset(
'images/pic2.jpg',
fit: BoxFit.cover, // 缩放方式,取值 fill contain cover fitWidth fitHeight none scaleDown
width: 200.0,
height: 60.0,
),
new Image.asset('images/pic3.jpg'),
],
);
2. 加载网络图片
Widget renderBody() {
return new Column(
children: <Widget>[
new Image(
image: new NetworkImage(
'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
)
],
);
}
3. 用占位符淡入图片
transparent_image: ^0.1.0
import 'package:transparent_image/transparent_image.dart';
// demo
Widget renderBody() {
return new Column(
children: <Widget>[
new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
fadeInDuration: const Duration(seconds: 50), // 持续时间,默认 700 ms
image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
)
],
);
}
4. 使用缓存图片
cached_network_image: ^0.4.1
import 'package:cached_network_image/cached_network_image.dart';
Widget renderBody() {
return new Center(
child: new CachedNetworkImage(
placeholder: new CircularProgressIndicator(),
imageUrl:
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
errorWidget: new Image.asset('images/pic1.jpg'),
),
);
}