文章目录
一、配置本地 gif 图片资源
二、本地资源加载 Placeholder
三、完整代码示例
四、相关资源
一、配置本地 gif 图片资源
配置 assets 图片资源 :
将 gif 图片拷贝到 Flutter 根目录下的 images 目录下 ;
在 pubspec.yaml 目录中配置 images/waiting.gif 图片资源 ;
flutter: assets: - images/waiting.gif
完整的 pubspec.yaml 配置文件 :
name: flutter_image_widget description: A new Flutter application. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 path_provider: ^2.0.1 transparent_image: ^2.0.0 cached_network_image: ^2.5.1 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - images/sidalin.png - images/sidalin2.png - images/waiting.gif
二、本地资源加载 Placeholder
Placeholder 是一个占位控件 , 在图片还没有就绪时 , 如从网络获取图片 , 先使用 Placeholder 占据图片组件的位置 ;
FadeInImage.assetNetwork 创建一个渐变图像组件 , 图片从网络获取 , Placeholder 从图片资源中获取 ;
代码示例 :
Stack( children: [ Center( // 网络加载时显示本地的资源图片 child: FadeInImage.assetNetwork( // Placeholder placeholder: "images/waiting.gif", image: "https://ucc.alicdn.com/images/user-upload-01/20210324110914742.png", ), ) ], ),
运行效果 : 第一张图片加载时显示 GIF 图像 ;
显示的网络图片 :
等待 gif 图片 :
