文章目錄

• 一、transparent_image 透明圖像插件
• 二、內存加載 Placeholder
• 三、完整代碼示例
• 四、相關資源

一、transparent_image 透明圖像插件

---

安裝 transparent_image 插件 :

• 搜索插件 : 在 https://pub.dev/packages 中搜索 transparent_image 插件 ;
• 插件地址 : https://pub.dev/packages/transparent_image
• 配置插件 : 在 pubspec.yaml 中配置插件 ;

dependencies:transparent_image: ^2.0.0

• 獲取插件 : 點擊 pubspec.yaml 中右上角的 Pub get 按鈕 , 獲取插件 ;
• 導入頭文件 :

import 'package:transparent_image/transparent_image.dart';

二、內存加載 Placeholder

---

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

代碼示例 :

Stack(children: [// 進度條Center(child: CircularProgressIndicator(),),Center(// 網絡加載時漸變出現child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)], ),

運行效果 : 進度條一直都在 , 開始時 FadeInImage 組件是透明狀態 , 顯示進度條 , 之后變為不透明 , 進度條被覆蓋 , 但是一直在后面轉 ;

顯示的網絡圖片 : ( 吸取上一篇博客的教訓 , 使用風景圖片 )

三、完整代碼示例

---

完整代碼示例 :

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: CircularProgressIndicator(),),Center(// 網絡加載時漸變出現child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.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 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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