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

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

前言

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

引入插件

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

photo_view:^0.13.0用來(lái)加載查看大圖。

image_gallery_saver:^1.7.1用來(lái)保存圖片到本地。

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

@override

Widgetbuild(BuildContextcontext){

returnContainer(

child:PhotoView(

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

imageProvider:NetworkImage("imageUrl"),

}

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

文檔翻譯:

//如果使用畫(huà)廊列表效果請(qǐng)使用PhotoViewGallery;

Toshowseveralimagesandletuserchangebetweenthem,usePhotoViewGallery.

也就是說(shuō)我們?nèi)绻幸粋€(gè)圖片列表進(jìn)行查看的話(huà)，可以用上面的PhotoView,如果是圖片列表那么就需要用PhotoViewGallery。

一般我們用的是PhotoViewGallery.builder()方法，下面看一下構(gòu)造函數(shù)：

PhotoViewGallery.builder(

scrollPhysics:BouncingScrollPhysics(),//滑動(dòng)到邊界的交互默認(rèn)Android效果

scrollDirection:Axis.horizontal,//滑動(dòng)方向默認(rèn)水平

reverse:false,//是否逆轉(zhuǎn)滑動(dòng)的閱讀順序方向默認(rèn)false,true水平的話(huà)，圖片從右向左滑動(dòng)

builder:_buildItem,//圖片構(gòu)造器

itemCount:widget.bigImageList.length,//圖片數(shù)量

loadingBuilder:widget.loadingBuilder//圖片加載過(guò)程中顯示的組件可以顯示加載進(jìn)度

(context,e){

returnMyImage(image:MyImage.defImg);

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

BoxDecoration(color:Colors.black87),

scaleStateChangedCallback:(photoViewScaleState){

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

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

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

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

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

onPageChanged:(index){

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

setState((){

this.index=index+1;

),

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

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

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動(dòng)畫(huà)設(shè)置

heroAttributes:PhotoViewHeroAttributes(tag:item.imageUrl""),

}

至此，我們就完成了圖片的預(yù)覽大圖操作，是不是很簡(jiǎn)單。可以查看了之后,接下來(lái)我們還需要將這個(gè)圖片保存到相冊(cè)，那就更簡(jiǎn)單了，我們來(lái)看下image_gallery_saver插件是如何保存圖片的，

一個(gè)是通過(guò)字節(jié)數(shù)組保存，一個(gè)是保存文件，那就很簡(jiǎn)單了，只需要將網(wǎng)絡(luò)圖片轉(zhuǎn)換為字節(jié)碼然后調(diào)用保存就可以了，當(dāng)然這里需要進(jìn)行文件存儲(chǔ)權(quán)限的驗(yàn)證，權(quán)限驗(yàn)證插件：permission_handler，這里我們通過(guò)dio網(wǎng)絡(luò)庫(kù)將網(wǎng)絡(luò)圖片轉(zhuǎn)換為字節(jié),網(wǎng)絡(luò)封裝庫(kù)見(jiàn)另一篇文章：dio的二次封裝。

FutureUint8ListimageToBytes(StringimageUrl)async{

varresponse=await_dio.get(imageUrl,

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

returnUint8List.fromList(response.data);

}

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

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