Flutter 圖片全家桶

時間 2020-04-14

標籤 flutter 圖片全家欄目應用數學简体版

原文原文鏈接

你們好，我是戴着眼鏡口罩會起霧的200。不得不說Flutter在UI方面，只要是能想到的效果，你用心都能實現。git

圖片是一個應用中的重要部分，展現，壓縮，裁剪，pub三方庫應該說是應有盡有。 FlutterCandies 中也有多個關於圖片的庫,能夠說是比較全面了。github

extended_image

功能最全面的圖片展現庫，加粗爲最近新增功能api

主要功能緩存

緩存網絡圖片
加載狀態(正在加載，完成，失敗)
拖拽縮放圖片
圖片編輯(裁剪，旋轉，翻轉)
圖片預覽(跟微信掘金同樣)
滑動退出效果(跟微信掘金同樣)
設置圓角，邊框
支持進度顯示
圖片預覽上滑顯示詳情(跟圖蟲同樣)

支持進度顯示

增長loadingProgress參數，用於顯示進度。微信

ExtendedImage.network(
              'https://raw.githubusercontent.com/fluttercandies/flutter_candies/master/gif/extended_text/special_text.jpg',
              handleLoadingProgress: true,
              clearMemoryCacheIfFailed: true,
              clearMemoryCacheWhenDispose: true,
              cache: false,
              loadStateChanged: (ExtendedImageState state) {
                if (state.extendedImageLoadState == LoadState.loading) {
                  final loadingProgress = state.loadingProgress;
                  final progress = loadingProgress?.expectedTotalBytes != null
                      ? loadingProgress.cumulativeBytesLoaded /
                          loadingProgress.expectedTotalBytes
                      : null;
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        SizedBox(
                          width: 150.0,
                          child: LinearProgressIndicator(
                            value: progress,
                          ),
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Text('${((progress ?? 0.0) * 100).toInt()}%'),
                      ],
                    ),
                  );
                }
                return null;
              },
            ),
複製代碼

圖片預覽上滑顯示詳情(跟圖蟲同樣)

當時在製做圖片預覽功能的時候，就暴露多了足夠的api，提供給用戶自定義各類效果，因爲Flutter手勢的複雜以及衝突，我特地作了一個Demo提供出來。網絡

至此pic_swiper.dart已擁有如下功能:ide

縮放
平移
上下一頁圖片
拖動退出預覽
上滑顯示詳情

extended_image_library

爲extended_image的基礎庫，若是你只須要網絡圖片緩存功能，你能夠只引用這個庫post

Image(
      image: ExtendedNetworkImageProvider("", cache: true),
    );
複製代碼

支持Web，小姐姐在線Demo
提供獲取緩存圖片的各類方法
方便獲取圖片的原數據(image的toByteData方法性能不佳)

flutter_image_editor

flutter_image_editor能夠說是低調爲extended_image量身打造的原生插件，支持旋轉裁剪翻轉，extended_image負責圖片編輯UI，flutter_image_editor提供原生裁剪圖片數據能力。因爲dart image庫在處理圖片的效率問題，原生庫(期待純C++庫)就有了很大的優點(大圖片能夠有10倍速度的提高)。性能