快捷導(dǎo)航

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

更新時間：2022年04月16日 08:31:27 作者：老李code

在App開發(fā)中，通常為了省流提高加載速度提升用戶體驗(yàn)我們通常在列表中或新聞中的插圖都是以縮略圖壓縮過的圖片來進(jìn)行展示，當(dāng)用戶點(diǎn)擊圖片時我們再去加載真正像素的大圖讓用戶預(yù)覽。本文將利用Flutter實(shí)現(xiàn)這一功能，需要的可以參考一下

前言

在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, use PhotoViewGallery.

也就是說我們?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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: