内容

使用占位符淡入图像

内容

内存中
- 完整示例
从资源包加载
- 完整示例

当使用默认的 Image 组件显示图像时，您可能会注意到它们在加载时会突然出现在屏幕上。这可能会让您的用户感到视觉上的不适。

相反，如果一开始显示一个占位符，然后图像在加载时淡入，岂不是更好？使用 FadeInImage 组件可以实现这一目的。

FadeInImage 支持任何类型的图像：内存中的、本地资源或来自互联网的图像。

在本示例中，使用 transparent_image 插件创建一个简单的透明占位符。

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

dartimport '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 文件中（有关更多详细信息，请参阅添加资源和图像）

yamlflutter:
  assets:
    - assets/loading.gif

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

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

dartimport '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',
          ),
        ),
      ),
    );
  }
}

Asset fade-in

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2024-08-16。查看源代码或报告问题.

内存中

完整示例

从资源包加载

完整示例