Android實現圖片預覽與儲存功能

2022-04-16 13:01:03

前言

在App開發中，通常為了省流提高載入速度提升使用者體驗我們通常在列表中或新聞中的插圖都是以縮圖壓縮過的圖片來進行展示，當用戶點選圖片時我們再去載入真正畫素的大圖讓使用者預覽，如果使用者想儲存並且可以儲存到自己的相簿中，那麼在Flutter中如何實現這樣的功能，看完這篇文章讓你1分鐘瞬間實現。

引入外掛

首先，我們需要引入強大的Flutter社群中的兩個外掛，分別是:

photo_view: ^0.13.0 用來載入檢視大圖。

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

首先我們先來看下如何檢視大圖，使用非常簡單，使用PhotoView只需兩行程式碼就可實現圖片的放大及縮小，支援本地圖片和網路圖片檢視。

@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.

也就是說我們如果有一個圖片列表進行檢視的話，可以用上面的PhotoView,如果是圖片列表那麼就需要用 PhotoViewGallery。

一般我們用的是PhotoViewGallery.builder()方法，下面看一下建構函式：

PhotoViewGallery.builder(
  scrollPhysics: BouncingScrollPhysics(), // 滑動到邊界的互動 預設Android效果
  scrollDirection: Axis.horizontal,// 滑動方向 預設水平
  reverse: false,//是否逆轉滑動的閱讀順序方向 預設false,true水平的話，圖片從右向左滑動
  builder: _buildItem,// 圖片構造器
  itemCount: widget.bigImageList.length,  // 圖片數量
  loadingBuilder: widget.loadingBuilder ?? // 圖片載入過程中顯示的元件 可以顯示載入進度
      (context, e) {
        return MyImage(image: MyImage.defImg);
      },
  backgroundDecoration: widget.backgroundDecoration ?? // 背景樣式自定義
      BoxDecoration(color: Colors.black87),
  scaleStateChangedCallback: (photoViewScaleState){
    // 使用者雙擊圖片放大縮小時的回撥
    },
  enableRotation:false,//是否支援手勢旋轉圖片
 
  customSize: MediaQuery.of(context).size, //定義圖片預設縮放基礎的大小,預設全螢幕 MediaQuery.of(context).size
  allowImplicitScrolling: true,//是否允許隱式捲動 提供視障人士用的一個欄位 預設false
  pageController: widget.pageController, // 切換圖片控制器
  onPageChanged: (index) {
    // 圖片切換回撥
    setState(() {
      this.index = index + 1;
    });
  },
),

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

我們可以看到返回的是PhotoViewGalleryPageOptions物件，這個物件就是載入圖片的具體類。下面是一些常用的構造方法，這個類還支援手勢相關的回撥，有興趣的可以自己研究下。這裡就不過多介紹了。

PhotoViewGalleryPageOptions _buildItem(BuildContext context, int index) {
  final BigImageBean item = widget.bigImageList[index];
  return PhotoViewGalleryPageOptions(
    // 圖片載入器 支援本地、網路
    imageProvider: NetworkImage(item.imageUrl ?? ""),
    // 初始化大小 全部展示
    initialScale: PhotoViewComputedScale.contained,
    // 最小展示 縮放最小值
    minScale: PhotoViewComputedScale.contained * 0.5,
    // 最大展示 縮放最大值
    maxScale: PhotoViewComputedScale.covered * 4,
    // hero動畫設定 
    heroAttributes: PhotoViewHeroAttributes(tag: item.imageUrl ?? ""),
  );
}

至此，我們就完成了圖片的預覽大圖操作，是不是很簡單。可以檢視了之後,接下來我們還需要將這個圖片儲存到相簿，那就更簡單了，我們來看下image_gallery_saver外掛是如何儲存圖片的，

一個是通過位元組陣列儲存，一個是儲存檔案，那就很簡單了，只需要將網路圖片轉換為位元組碼然後呼叫儲存就可以了，當然這裡需要進行檔案儲存許可權的驗證，許可權驗證外掛：permission_handler，這裡我們通過dio網路庫將網路圖片轉換為位元組, 網路封裝庫見另一篇文章：dio的二次封裝。

Future<Uint8List> imageToBytes(String imageUrl) async {
  var response = await _dio?.get(imageUrl,
      options: Options(responseType: ResponseType.bytes));
  return Uint8List.fromList(response?.data);
}

最後來個效果圖展示吧：

我們發現剛才那張圖片已經被我們儲存到相簿了。

總結

站在巨人的肩膀，有些事情可以讓我們容易的實現，這也是Flutter社群給與開發者強大的後盾，這兩個外掛是我經過實戰檢驗過的，在Android、iOS上目前都沒有問題，就不貼完整原始碼了吧，核心程式碼基本都在上面了，自己動手敲一敲使用起來你會更得心應手，嘿嘿

到此這篇關於Android實現圖片預覽與儲存功能的文章就介紹到這了,更多相關Android 圖片預覽儲存內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Android實現圖片預覽與儲存功能

目錄

前言

引入外掛

總結

熱門文章