显示图片是大多数移动应用程序的基础。Flutter提供了Image Widget来显示不同类型的图片。

为了处理来自URL的图像,请使用Image.network构造函数。

  1. new Image.network(
  2. 'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
  3. )

Bonus: GIF动画

Image Widget的一个惊艳的功能是:支持GIF动画!

  1. new Image.network(
  2. 'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
  3. );

占位图和缓存

Image.network默认不能处理一些高级功能,例如在在下载完图片后加载或缓存图片到设备中后,使图片渐隐渐显。要实现这种功能,请参阅以下内容:

完整的例子

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(new MyApp());
  3. class MyApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. var title = 'Web Images';
  7. return new MaterialApp(
  8. title: title,
  9. home: new Scaffold(
  10. appBar: new AppBar(
  11. title: new Text(title),
  12. ),
  13. body: new Image.network(
  14. 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
  15. ),
  16. ),
  17. );
  18. }
  19. }