目录

占位符和网络图片淡入

目录

当使用默认的 Image widget 显示图片时，你可能会注意到图片只是在加载完后直接显示到屏幕上，用户可能会觉得这看起来不舒服。

此外，如果可以先展示占位符，待图片加载完成后淡入显示图片不是很酷么？可以使用 Flutter 自带的 FadeInImage widget 来实现这个功能。

FadeInImage 适用于任何类型的图片：内存中的，本地存储的，抑或是网络上的。

从内存加载占位符

#

本例将使用 transparent_image 包来实现一个简单的透明占位符。

dart
FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://picsum.photos/250?image=9',
),

完整样例

#
dart
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Stack(
          children: <Widget>[
            const Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Fading In Image Demo

从本地存储加载占位符

#

也可以考虑使用本地资源作为占位符。首先将资源添加到项目的 pubspec.yaml 文件中（更多细节请参阅文档: 添加资源和图片）：

yaml
flutter:
  assets:
    - assets/loading.gif

然后使用 FadeInImage.assetNetwork() 构造函数：

dart
FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://picsum.photos/250?image=9',
),

完整样例

#
dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-09-02。 查看文档源码 或者 为本页面内容提出建议。