显示网络上的远程图片

对大多数移动应用来说,图片显示是一项基础功能。Flutter 提供了 Image 来显示不同类型的图片。

Displaying images is fundamental for most mobile apps. Flutter provides the Image widget to display different types of images.

使用 Image.network 构造函数来处理来自 URL 的图片。

To work with images from a URL, use the Image.network() constructor.

Image.network(
  'https://picsum.photos/250?image=9',
)

意外之喜:Gif 动画

Bonus: animated gifs

Image Widget 令人兴奋的特性之一:提供了开箱即用的 gif 动画支持!

One useful thing about the Image widget: It supports animated gifs.

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

占位符与缓存

Placeholders and caching

默认的 Image.network 构造函数并没有提供诸如加载后的图片淡入或下载之后将图片缓存到设备等更进一步的功能。请参阅以下链接来实现这些功能

The default Image.network constructor doesn’t handle more advanced functionality, such as fading images in after loading, or caching images to the device after they’re downloaded. To accomplish these tasks, see the following recipes:

完整样例

Complete example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

Network image demo