Android實(shí)現(xiàn)圖片預(yù)覽與保存功能
前言
在App開發(fā)中,通常為了省流提高加載速度提升用戶體驗(yàn)我們通常在列表中或新聞中的插圖都是以縮略圖壓縮過的圖片來進(jìn)行展示,當(dāng)用戶點(diǎn)擊圖片時我們再去加載真正像素的大圖讓用戶預(yù)覽,如果用戶想保存并且可以保存到自己的相冊中,那么在Flutter中如何實(shí)現(xiàn)這樣的功能,看完這篇文章讓你1分鐘瞬間實(shí)現(xiàn)。
引入插件
首先,我們需要引入強(qiáng)大的Flutter社區(qū)中的兩個插件,分別是:
photo_view: ^0.13.0 用來加載查看大圖。
image_gallery_saver: ^1.7.1 用來保存圖片到本地。
首先我們先來看下如何查看大圖,使用非常簡單,使用PhotoView
只需兩行代碼就可實(shí)現(xiàn)圖片的放大及縮小,支持本地圖片和網(wǎng)絡(luò)圖片查看。
@override Widget build(BuildContext context) { return Container( child: PhotoView( // imageProvider: AssetImage("assets/xxx.jpg"), imageProvider: NetworkImage("imageUrl"), ) ); }
但是這顯然是不能滿足我們的需求,一般我們需要查看大圖都是一個圖片列表,看下面:
文檔翻譯:
//如果使用畫廊列表效果請使用 PhotoViewGallery;
To show several images and let user change between them, usePhotoViewGallery
.
也就是說我們?nèi)绻幸粋€圖片列表進(jìn)行查看的話,可以用上面的PhotoView
,如果是圖片列表那么就需要用 PhotoViewGallery
。
一般我們用的是PhotoViewGallery.builder()
方法,下面看一下構(gòu)造函數(shù):
PhotoViewGallery.builder( scrollPhysics: BouncingScrollPhysics(), // 滑動到邊界的交互 默認(rèn)Android效果 scrollDirection: Axis.horizontal,// 滑動方向 默認(rèn)水平 reverse: false,//是否逆轉(zhuǎn)滑動的閱讀順序方向 默認(rèn)false,true水平的話,圖片從右向左滑動 builder: _buildItem,// 圖片構(gòu)造器 itemCount: widget.bigImageList.length, // 圖片數(shù)量 loadingBuilder: widget.loadingBuilder ?? // 圖片加載過程中顯示的組件 可以顯示加載進(jìn)度 (context, e) { return MyImage(image: MyImage.defImg); }, backgroundDecoration: widget.backgroundDecoration ?? // 背景樣式自定義 BoxDecoration(color: Colors.black87), scaleStateChangedCallback: (photoViewScaleState){ // 用戶雙擊圖片放大縮小時的回調(diào) }, enableRotation:false,//是否支持手勢旋轉(zhuǎn)圖片 customSize: MediaQuery.of(context).size, //定義圖片默認(rèn)縮放基礎(chǔ)的大小,默認(rèn)全屏 MediaQuery.of(context).size allowImplicitScrolling: true,//是否允許隱式滾動 提供視障人士用的一個字段 默認(rèn)false pageController: widget.pageController, // 切換圖片控制器 onPageChanged: (index) { // 圖片切換回調(diào) setState(() { this.index = index + 1; }); }, ),
我們可以看到builder方法是來加載圖片的,下面我們就具體看下builderItem方法:
我們可以看到返回的是PhotoViewGalleryPageOptions
對象,這個對象就是加載圖片的具體類。下面是一些常用的構(gòu)造方法,這個類還支持手勢相關(guān)的回調(diào),有興趣的可以自己研究下。這里就不過多介紹了。
PhotoViewGalleryPageOptions _buildItem(BuildContext context, int index) { final BigImageBean item = widget.bigImageList[index]; return PhotoViewGalleryPageOptions( // 圖片加載器 支持本地、網(wǎng)絡(luò) imageProvider: NetworkImage(item.imageUrl ?? ""), // 初始化大小 全部展示 initialScale: PhotoViewComputedScale.contained, // 最小展示 縮放最小值 minScale: PhotoViewComputedScale.contained * 0.5, // 最大展示 縮放最大值 maxScale: PhotoViewComputedScale.covered * 4, // hero動畫設(shè)置 heroAttributes: PhotoViewHeroAttributes(tag: item.imageUrl ?? ""), ); }
至此,我們就完成了圖片的預(yù)覽大圖操作,是不是很簡單??梢圆榭戳酥?接下來我們還需要將這個圖片保存到相冊,那就更簡單了,我們來看下image_gallery_saver
插件是如何保存圖片的,
一個是通過字節(jié)數(shù)組保存,一個是保存文件,那就很簡單了,只需要將網(wǎng)絡(luò)圖片轉(zhuǎn)換為字節(jié)碼然后調(diào)用保存就可以了,當(dāng)然這里需要進(jìn)行文件存儲權(quán)限的驗(yàn)證,權(quán)限驗(yàn)證插件:permission_handler
,這里我們通過dio網(wǎng)絡(luò)庫將網(wǎng)絡(luò)圖片轉(zhuǎn)換為字節(jié), 網(wǎng)絡(luò)封裝庫見另一篇文章:dio的二次封裝。
Future<Uint8List> imageToBytes(String imageUrl) async { var response = await _dio?.get(imageUrl, options: Options(responseType: ResponseType.bytes)); return Uint8List.fromList(response?.data); }
最后來個效果圖展示吧:
我們發(fā)現(xiàn)剛才那張圖片已經(jīng)被我們保存到相冊了。
總結(jié)
站在巨人的肩膀,有些事情可以讓我們?nèi)菀椎膶?shí)現(xiàn),這也是Flutter社區(qū)給與開發(fā)者強(qiáng)大的后盾,這兩個插件是我經(jīng)過實(shí)戰(zhàn)檢驗(yàn)過的,在Android、iOS上目前都沒有問題,就不貼完整源碼了吧,核心代碼基本都在上面了,自己動手敲一敲使用起來你會更得心應(yīng)手,嘿嘿
到此這篇關(guān)于Android實(shí)現(xiàn)圖片預(yù)覽與保存功能的文章就介紹到這了,更多相關(guān)Android 圖片預(yù)覽保存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
學(xué)習(xí)使用Material Design控件(二)使用DrawerLayout實(shí)現(xiàn)側(cè)滑菜單欄效果
這篇文章主要為大家介紹了學(xué)習(xí)使用Material Design控件的詳細(xì)教程,使用DrawerLayout和NavigationView實(shí)現(xiàn)側(cè)滑菜單欄效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07Android App開發(fā)中Gradle構(gòu)建過程的配置方法
這篇文章主要介紹了Android App開發(fā)中Gradle構(gòu)建過程的配置方法,包括在Gradle中配置manifest的方法,需要的朋友可以參考下2016-06-06AndroidStudio 3.6 中 R.layout 找不到對應(yīng)的xml文件問題及解決方法
這篇文章主要介紹了AndroidStudio 3.6 中 R.layout 找不到對應(yīng)的xml文件問題,本文給出了解決方法對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03Android應(yīng)用圖標(biāo)上的小紅點(diǎn)Badge實(shí)踐代碼
本篇文章主要介紹了Android應(yīng)用圖標(biāo)上的小紅點(diǎn)Badge實(shí)踐代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Android自定義狀態(tài)欄顏色與APP風(fēng)格保持一致的實(shí)現(xiàn)方法
我們知道iOS上的應(yīng)用,狀態(tài)欄的顏色總能與應(yīng)用標(biāo)題欄顏色保持一致,用戶體驗(yàn)很不錯,那安卓是否可以呢?下面小編給大家?guī)砹薃ndroid自定義狀態(tài)欄顏色與APP風(fēng)格保持一致的實(shí)現(xiàn)方法,跟著小編一起學(xué)習(xí)吧2016-10-10Flutter持久化存儲之?dāng)?shù)據(jù)庫存儲(sqflite)詳解
這篇文章主要給大家介紹了關(guān)于Flutter持久化存儲之?dāng)?shù)據(jù)庫存儲的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03