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

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

前言

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

引入插件

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

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

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

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

@override

Widgetbuild(BuildContextcontext){

returnContainer(

child:PhotoView(

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

imageProvider:NetworkImage("imageUrl"),

}

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

文檔翻譯:

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

Toshowseveralimagesandletuserchangebetweenthem,usePhotoViewGallery.

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

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

PhotoViewGallery.builder(

scrollPhysics:BouncingScrollPhysics(),//滑動到邊界的交互默認Android效果

scrollDirection:Axis.horizontal,//滑動方向默認水平

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

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

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

loadingBuilder:widget.loadingBuilder//圖片加載過程中顯示的組件可以顯示加載進度

(context,e){

returnMyImage(image:MyImage.defImg);

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

BoxDecoration(color:Colors.black87),

scaleStateChangedCallback:(photoViewScaleState){

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

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

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

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

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

onPageChanged:(index){

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

setState((){

this.index=index+1;

),

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

我們可以看到返回的是PhotoViewGalleryPageOptions對象，這個對象就是加載圖片的具體類。下面是一些常用的構(gòu)造方法，這個類還支持手勢相關(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ù)覽大圖操作，是不是很簡單?？梢圆榭戳酥?接下來我們還需要將這個圖片保存到相冊，那就更簡單了，我們來看下image_gallery_saver插件是如何保存圖片的，

一個是通過字節(jié)數(shù)組保存，一個是保存文件，那就很簡單了，只需要將網(wǎng)絡(luò)圖片轉(zhuǎn)換為字節(jié)碼然后調(diào)用保存就可以了，當然這里需要進行文件存儲權(quán)限的驗證，權(quá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);

}

最后來個效果圖展示吧：

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