Android實(shí)現(xiàn)圖片預(yù)覽與保存功能
前言
在App開(kāi)發(fā)中,通常為了省流提高加載速度提升用戶體驗(yàn)我們通常在列表中或新聞中的插圖都是以縮略圖壓縮過(guò)的圖片來(lái)進(jìn)行展示,當(dāng)用戶點(diǎn)擊圖片時(shí)我們?cè)偃ゼ虞d真正像素的大圖讓用戶預(yù)覽,如果用戶想保存并且可以保存到自己的相冊(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
Widget build(BuildContext context) {
return Container(
child: PhotoView(
// imageProvider: AssetImage("assets/xxx.jpg"),
imageProvider: NetworkImage("imageUrl"),
)
);
}但是這顯然是不能滿足我們的需求,一般我們需要查看大圖都是一個(gè)圖片列表,看下面:
文檔翻譯:
//如果使用畫(huà)廊列表效果請(qǐng)使用 PhotoViewGallery;
To show several images and let user change between them, usePhotoViewGallery.
也就是說(shuō)我們?nèi)绻幸粋€(gè)圖片列表進(jìn)行查看的話,可以用上面的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水平的話,圖片從右向左滑動(dòng)
builder: _buildItem,// 圖片構(gòu)造器
itemCount: widget.bigImageList.length, // 圖片數(shù)量
loadingBuilder: widget.loadingBuilder ?? // 圖片加載過(guò)程中顯示的組件 可以顯示加載進(jìn)度
(context, e) {
return MyImage(image: MyImage.defImg);
},
backgroundDecoration: widget.backgroundDecoration ?? // 背景樣式自定義
BoxDecoration(color: Colors.black87),
scaleStateChangedCallback: (photoViewScaleState){
// 用戶雙擊圖片放大縮小時(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ì)象就是加載圖片的具體類。下面是一些常用的構(gòu)造方法,這個(gè)類還支持手勢(shì)相關(guān)的回調(diào),有興趣的可以自己研究下。這里就不過(guò)多介紹了。
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動(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的二次封裝。
Future<Uint8List> imageToBytes(String imageUrl) async {
var response = await _dio?.get(imageUrl,
options: Options(responseType: ResponseType.bytes));
return Uint8List.fromList(response?.data);
}最后來(lái)個(gè)效果圖展示吧:

我們發(fā)現(xiàn)剛才那張圖片已經(jīng)被我們保存到相冊(cè)了。

總結(jié)
站在巨人的肩膀,有些事情可以讓我們?nèi)菀椎膶?shí)現(xiàn),這也是Flutter社區(qū)給與開(kāi)發(fā)者強(qiáng)大的后盾,這兩個(gè)插件是我經(jīng)過(guò)實(shí)戰(zhàn)檢驗(yàn)過(guò)的,在Android、iOS上目前都沒(méi)有問(wèn)題,就不貼完整源碼了吧,核心代碼基本都在上面了,自己動(dòng)手敲一敲使用起來(lái)你會(huì)更得心應(yīng)手,嘿嘿
到此這篇關(guān)于Android實(shí)現(xiàn)圖片預(yù)覽與保存功能的文章就介紹到這了,更多相關(guān)Android 圖片預(yù)覽保存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Android實(shí)現(xiàn)圖片九宮格
- Android不壓縮圖片實(shí)現(xiàn)高清加載巨圖實(shí)例
- Android實(shí)現(xiàn)手勢(shì)劃定區(qū)域裁剪圖片
- AndroidStudio實(shí)現(xiàn)能在圖片上涂鴉程序
- Android studio實(shí)現(xiàn)左右滑動(dòng)切換圖片
- Android實(shí)現(xiàn)左右滑動(dòng)切換圖片
- Android開(kāi)發(fā)實(shí)現(xiàn)圖片大小與質(zhì)量壓縮及保存
- Android性能優(yōu)化之圖片大小,尺寸壓縮綜合解決方案
- Android自定義視圖中圖片的處理
相關(guān)文章
Kotlin 匿名類實(shí)現(xiàn)接口和抽象類的區(qū)別詳解
這篇文章主要介紹了Kotlin 匿名類實(shí)現(xiàn)接口和抽象類的區(qū)別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
Android14原生PackageInstaller安裝某些apk報(bào)錯(cuò)問(wèn)題
本文主要介紹了在Android 14上安裝大型應(yīng)用時(shí)遇到的java.lang.RuntimeException: Could not copy bitmap to parcel blob錯(cuò)誤,下面就一起來(lái)介紹一下解決方法,感興趣的可以了解一下2025-03-03
Android如何實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫(huà)效果(卡片翻轉(zhuǎn))
卡片翻轉(zhuǎn)這個(gè)效果大家應(yīng)該都不陌生,這篇文章主要給大家介紹了關(guān)于Android如何實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫(huà)效果的相關(guān)資料,文中將實(shí)現(xiàn)的源代碼以及過(guò)程中遇到的bug都介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
Android開(kāi)發(fā)中Intent用法總結(jié)
這篇文章主要介紹了Android開(kāi)發(fā)中Intent用法,總結(jié)分析了Android中Intent的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-10-10
flutter 輸入框組件TextField的實(shí)現(xiàn)代碼
這篇文章主要介紹了flutter 輸入框組件TextField的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Android?startActivityForResult的調(diào)用與封裝詳解
startActivityForResult?可以說(shuō)是我們常用的一種操作了,目前有哪些方式實(shí)現(xiàn)?startActivityForResult?的功能呢?本文就來(lái)和大家詳細(xì)聊聊2023-03-03
Android DynamicGrid實(shí)現(xiàn)拖曳交換位置功能
這篇文章主要為大家詳細(xì)介紹了Android DynamicGrid實(shí)現(xiàn)拖曳交換位置功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06
android獲取及監(jiān)聽(tīng)手機(jī)網(wǎng)絡(luò)狀態(tài)
大家好,本篇文章主要講的是android獲取及監(jiān)聽(tīng)手機(jī)網(wǎng)絡(luò)狀態(tài),感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下,方便下次瀏覽2022-01-01

