文章目錄

• 一、配置本地 gif 圖片資源
• 二、本地資源加載 Placeholder
• 三、完整代碼示例
• 四、相關(guān)資源

一、配置本地 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 是一個(gè)占位控件 , 在圖片還沒(méi)有就緒時(shí) , 如從網(wǎng)絡(luò)獲取圖片 , 先使用 Placeholder 占據(jù)圖片組件的位置 ;

FadeInImage.assetNetwork 創(chuàng)建一個(gè)漸變圖像組件 , 圖片從網(wǎng)絡(luò)獲取 , Placeholder 從圖片資源中獲取 ;

代碼示例 :

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

運(yùn)行效果 : 第一張圖片加載時(shí)顯示 GIF 圖像 ;

顯示的網(wǎng)絡(luò)圖片 :

等待 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(// 網(wǎng)絡(luò)加載時(shí)顯示本地的資源圖片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)],),Stack(children: [// 進(jìn)度條Center(child: CircularProgressIndicator(),),Center(// 網(wǎng)絡(luò)加載時(shí)漸變出現(xiàn)child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),Center(// 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網(wǎng)絡(luò)圖片child: CachedNetworkImage(// 加載網(wǎng)絡(luò)圖片過(guò)程中顯示的內(nèi)容 , 這里顯示進(jìn)度條placeholder: (context, url)=>CircularProgressIndicator(),// 網(wǎng)絡(luò)圖片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),),// 圖片組件 , 從網(wǎng)絡(luò)中加載一張圖片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

運(yùn)行效果 :

四、相關(guān)資源

---

參考資料 :

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

博客源碼下載 :

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。