文章目錄

• 一、配置本地 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+1environment:sdk: ">=2.1.0 <3.0.0"dependencies:flutter:sdk: fluttercupertino_icons: ^0.1.2path_provider: ^2.0.1transparent_image: ^2.0.0cached_network_image: ^2.5.1dev_dependencies:flutter_test:sdk: flutterflutter:uses-material-design: trueassets:- images/sidalin.png- images/sidalin2.png- images/waiting.gif

二、本地資源加載 Placeholder

---

Placeholder 是一個占位控件 , 在圖片還沒有就緒時 , 如從網絡獲取圖片 , 先使用 Placeholder 占據圖片組件的位置 ;

FadeInImage.assetNetwork 創建一個漸變圖像組件 , 圖片從網絡獲取 , Placeholder 從圖片資源中獲取 ;

代碼示例 :

Stack(children: [Center(// 網絡加載時顯示本地的資源圖片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)], ),

運行效果 : 第一張圖片加載時顯示 GIF 圖像 ;

顯示的網絡圖片 :

等待 gif 圖片 :

三、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart'; import 'dart:io'; import 'package:path_provider/path_provider.dart'; import 'package:transparent_image/transparent_image.dart'; import 'package:cached_network_image/cached_network_image.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}/// SD 卡路徑String sdPath;@overridevoid initState() {// 獲取 SD 卡路徑getSdPath();}void getSdPath() async {String path = (await getExternalStorageDirectory()).path;setState(() {sdPath = path;});}@overrideWidget build(BuildContext context) {print("sdPath : $sdPath");return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: ListView(children: [Stack(children: [Center(// 網絡加載時顯示本地的資源圖片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)],),Stack(children: [// 進度條Center(child: CircularProgressIndicator(),),Center(// 網絡加載時漸變出現child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),Center(// 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網絡圖片child: CachedNetworkImage(// 加載網絡圖片過程中顯示的內容 , 這里顯示進度條placeholder: (context, url)=>CircularProgressIndicator(),// 網絡圖片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),),// 圖片組件 , 從網絡中加載一張圖片Image.network(// 圖片地址"https://img-blog.csdnimg.cn/2021032313493741.png",),Image(image: AssetImage("images/sidalin.png"),),//Image.asset('images/sidalin2.png', ),/// 從 SD 卡加載圖片if(sdPath != null)Image.file(File('$sdPath/sidalin3.png'),width: 200,),],)),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} }

pubspec.yaml 配置文件 :

name: flutter_image_widget description: A new Flutter application.version: 1.0.0+1environment:sdk: ">=2.1.0 <3.0.0"dependencies:flutter:sdk: fluttercupertino_icons: ^0.1.2path_provider: ^2.0.1transparent_image: ^2.0.0cached_network_image: ^2.5.1dev_dependencies:flutter_test:sdk: flutterflutter:uses-material-design: trueassets:- images/sidalin.png- images/sidalin2.png- images/waiting.gif

運行效果 :

四、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16073006 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。