缓存图片、占位符和网络图片淡入

最新推荐文章于 2025-11-29 17:42:53 发布

原创最新推荐文章于 2025-11-29 17:42:53 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文介绍了在Flutter中如何利用FadeInImage widget创建一个占位符，待图片从网络加载完成后再淡入显示的效果。示例代码展示了如何结合使用asset和network图片，提供了一个简单的应用实例。

https://flutter.cn/docs/development/ui/widgets

https://flutter.github.io/samples/#

可以先展示占位符，待图片加载完成后淡入显示图片，可以使用FadeInImage控件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

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

https://flutter.cn/docs/cookbook/images/fading-in-images