Android實(shí)現(xiàn)圖片預(yù)覽與保存功能

第Android實(shí)現(xiàn)圖片預(yù)覽與保存功能目錄前言引入插件總結(jié)

前言

在App開發(fā)中，通常為了省流提高加載速度提升用戶體驗(yàn)我們通常在列表中或新聞中的插圖都是以縮略圖壓縮過的圖片來進(jìn)行展示，當(dāng)用戶點(diǎn)擊圖片時(shí)我們再去加載真正像素的大圖讓用戶預(yù)覽，如果用戶想保存并且可以保存到自己的相冊中，那么在Flutter中如何實(shí)現(xiàn)這樣的功能，看完這篇文章讓你1分鐘瞬間實(shí)現(xiàn)。

引入插件

首先，我們需要引入強(qiáng)大的Flutter社區(qū)中的兩個(gè)插件，分別是:

photo_view:^0.13.0用來加載查看大圖。

image_gallery_saver:^1.7.1用來保存圖片到本地。

首先我們先來看下如何查看大圖，使用非常簡單，使用PhotoView只需兩行代碼就可實(shí)現(xiàn)圖片的放大及縮小，支持本地圖片和網(wǎng)絡(luò)圖片查看。

@override

Widgetbuild(BuildContextcontext){

returnContainer(

child:PhotoView(

//imageProvider:AssetImage("assets/xxx.jpg"),

imageProvider:NetworkImage("imageUrl"),

}

但是這顯然是不能滿足我們的需求，一般我們需要查看大圖都是一個(gè)圖片列表，看下面：

文檔翻譯:

//如果使用畫廊列表效果請使用PhotoViewGallery;

Toshowseveralimagesandletuserchangebetweenthem,usePhotoViewGallery.

也就是說我們?nèi)绻幸粋€(gè)圖片列表進(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){

returnMyImage(image:MyImage.defImg);

backgroundDecoration:widget.backgroundDecoration//背景樣式自定義

BoxDecoration(color:Colors.black87),

scaleStateChangedCallback:(photoViewScaleState){

//用戶雙擊圖片放大縮小時(shí)的回調(diào)

enableRotation:false,//是否支持手勢旋轉(zhuǎn)圖片

customSize:MediaQuery.of(context).size,//定義圖片默認(rèn)縮放基礎(chǔ)的大小,默認(rèn)全屏MediaQuery.of(context).size

allowImplicitScrolling:true,//是否允許隱式滾動提供視障人士用的一個(gè)字段默認(rèn)false

pageController:widget.pageController,//切換圖片控制器

onPageChanged:(index){

//圖片切換回調(diào)

setState((){

this.index=index+1;

),

我們可以看到builder方法是來加載圖片的，下面我們就具體看下builderItem方法：

我們可以看到返回的是PhotoViewGalleryPageOptions對象，這個(gè)對象就是加載圖片的具體類。下面是一些常用的構(gòu)造方法，這個(gè)類還支持手勢相關(guān)的回調(diào)，有興趣的可以自己研究下。這里就不過多介紹了。

PhotoViewGalleryPageOptions_buildItem(BuildContextcontext,intindex){

finalBigImageBeanitem=widget.bigImageList[index];

returnPhotoViewGalleryPageOptions(

//圖片加載器支持本地、網(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ù)覽大圖操作，是不是很簡單?？梢圆榭戳酥?接下來我們還需要將這個(gè)圖片保存到相冊，那就更簡單了，我們來看下image_gallery_saver插件是如何保存圖片的，

一個(gè)是通過字節(jié)數(shù)組保存，一個(gè)是保存文件，那就很簡單了，只需要將網(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的二次封裝。

FutureUint8ListimageToBytes(StringimageUrl)async{

varresponse=await_dio.get(imageUrl,

options:Options(responseType:ResponseType.bytes));

returnUint8List.fromList(response.data);

}

最后來個(gè)效果圖展示吧：

我們發(fā)現(xiàn)剛才那張圖