快捷導(dǎo)航

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

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

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

前言

在App開發(fā)中，通常為了省流提高加載速度提升用戶體驗我們通常在列表中或新聞中的插圖都是以縮略圖壓縮過的圖片來進(jìn)行展示，當(dāng)用戶點擊圖片時我們再去加載真正像素的大圖讓用戶預(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
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)限的驗證，權(quá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)菀椎膶崿F(xiàn)，這也是Flutter社區(qū)給與開發(fā)者強大的后盾，這兩個插件是我經(jīng)過實戰(zhàn)檢驗過的，在Android、iOS上目前都沒有問題，就不貼完整源碼了吧，核心代碼基本都在上面了，自己動手敲一敲使用起來你會更得心應(yīng)手，嘿嘿

到此這篇關(guān)于Android實現(xiàn)圖片預(yù)覽與保存功能的文章就介紹到這了,更多相關(guān)Android 圖片預(yù)覽保存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: