wangliankun/flutter_common
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feat(update):添加图片长按下载

Browse Source
This commit is contained in:
王连坤
2026-04-22 11:35:25 +08:00
parent d6f27690c6
commit 74a5bba5f1
8 changed files with 427 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
example/android/app/src/main/AndroidManifest.xml
View File

@@ -1,4 +1,13 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE"
android:maxSdkVersion="28" />
<application
android:label="example"
android:name="${applicationName}"

6
example/ios/Runner/Info.plist
View File

@@ -22,6 +22,12 @@
<string>????</string>
<key>CFBundleVersion</key>
<string>$(FLUTTER_BUILD_NUMBER)</string>
<key>NSCameraUsageDescription</key>
<string>示例需要使用相机拍照后上传到 OSS。</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>示例需要访问相册以选择图片进行上传和预览。</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>示例需要将长按查看的图片保存到系统相册。</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>

291
example/lib/main.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_common/flutter_common.dart';
import 'package:get/get.dart';
@@ -14,6 +15,7 @@ class MyApp extends StatelessWidget {
return GetMaterialApp(
title: 'flutter_common Demo',
debugShowCheckedModeBanner: false,
builder: EasyLoading.init(),
theme: ThemeData(
scaffoldBackgroundColor: const Color(0xFFF5F7FB),
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF4D6FD5)),
@@ -36,8 +38,89 @@ class MyHomePage extends StatefulWidget {
}
class _MyHomePageState extends State<MyHomePage> {
static const String _ossAccessKeyId = 'LTAI5tRJh3W4TrfQC3mDK9Vp';
static const String _ossHost =
'https://jingheyijia-cop.oss-cn-chengdu.aliyuncs.com';
static const String _bindHost = 'https://static.cop.jingheyijia.com';
static const String _policy =
'eyJleHBpcmF0aW9uIjoiMjAyNi0wNi0zMFQyMTo0OTozNVoiLCJjb25kaXRpb25zIjpbWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJ3eGFwcC1tYXAyL3VwbG9hZC8iXV19';
static const String _signature = 're2VV8BiN5oS2altXSmiTG/Y0wc=';
static const String _ossDirectory = 'wxapp-map2/upload/';
static const String _callback =
'eyJjYWxsYmFja1VybCI6Imh0dHBzOi8vdGVzdGluZy52aWN0b3JtZW4uY29tL2FwaS9haXN0b3JlL29zcy9jYWxsYmFjayIsImNhbGxiYWNrQm9keSI6ImZpbGVuYW1lPSR7b2JqZWN0fVx1MDAyNnNpemU9JHtzaXplfVx1MDAyNm1pbWVUeXBlPSR7bWltZVR5cGV9XHUwMDI2aGVpZ2h0PSR7aW1hZ2VJbmZvLmhlaWdodH1cdTAwMjZ3aWR0aD0ke2ltYWdlSW5mby53aWR0aH0iLCJjYWxsYmFja0JvZHlUeXBlIjoiYXBwbGljYXRpb24veC13d3ctZm9ybS11cmxlbmNvZGVkIn0=';
static const String _seedImageUrl =
'$_bindHost/wxapp-map2/upload/moment/2025625/app-yctgxYDwcPkh.jpg';
String _singleDateText = '未选择';
String _rangeDateText = '未选择';
String _imageStatus = '已预置 1 张示例图，点击缩略图预览，长按大图保存到相册';
late List<String> _imageUrls;
@override
void initState() {
super.initState();
_imageUrls = [_seedImageUrl];
}
Future<void> _uploadImages() async {
await UploadImagesTool.uploadImagesTool(
context: context,
max: 9,
isShowLoading: true,
oSSAccessKeyId: _ossAccessKeyId,
policy: _policy,
callback: _callback,
signature: _signature,
ossDirectory: _ossDirectory,
ossHost: _ossHost,
chooseImagesTap: (list) {
final uploadedUrls = List<String>.from(list as List)
.where((item) => item.isNotEmpty)
.toList();
if (uploadedUrls.isEmpty) {
return;
}
setState(() {
_imageUrls = [..._imageUrls, ...uploadedUrls];
_imageStatus =
'已上传 ${uploadedUrls.length} 张图片，当前共 ${_imageUrls.length} 张';
});
},
);
}
void _openPreview(int index) {
if (_imageUrls.isEmpty) {
return;
}
LookImagesTool.lookImages(
listData: _imageUrls,
currentPage: index,
isShowEdit: true,
oSSAccessKeyId: _ossAccessKeyId,
policy: _policy,
callback: _callback,
signature: _signature,
ossDirectory: _ossDirectory,
ossHost: _ossHost,
onEditCallBack: (imageUrl, currentIndex) {
setState(() {
_imageUrls[currentIndex] = imageUrl;
_imageStatus = '第 ${currentIndex + 1} 张图片已重新编辑并上传';
});
},
);
}
void _removeImage(int index) {
setState(() {
_imageUrls.removeAt(index);
_imageStatus = _imageUrls.isEmpty
? '暂无图片，请先上传后再体验预览和下载'
: '已删除 1 张图片，当前剩余 ${_imageUrls.length} 张';
});
}
@override
Widget build(BuildContext context) {
@@ -52,6 +135,8 @@ class _MyHomePageState extends State<MyHomePage> {
children: [
_buildIntroCard(),
const SizedBox(height: 16),
_buildImageDemoCard(),
const SizedBox(height: 16),
_buildDemoCard(
title: '单日选择组件',
description: '使用 `CalendarChooseWidget` 的单选模式，适合筛选某一天的数据。',
@@ -114,8 +199,8 @@ class _MyHomePageState extends State<MyHomePage> {
),
SizedBox(height: 12),
Text(
'lib/calendarcalendar 里提供了日期选择相关组件，'
'lib/upload_image 聚合图片上传与预览能力，'
'lib/calendarcalendar 提供日期筛选能力，'
'lib/upload_image 包含 OSS 上传、图片预览、编辑和下载到相册的能力，'
'lib/utils 则放了日期、弹窗等通用工具。',
style: TextStyle(
fontSize: 15,
@@ -129,6 +214,172 @@ class _MyHomePageState extends State<MyHomePage> {
);
}
Widget _buildImageDemoCard() {
return Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'LookImagesTool 图片预览',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: Color(0xFF1A1A1A),
),
),
const SizedBox(height: 8),
const Text(
'这个示例使用你提供的 OSS 配置上传图片，点击缩略图进入 `LookImagesTool` 预览，支持编辑后重新上传，也支持长按大图保存到手机相册。',
style: TextStyle(
fontSize: 14,
height: 1.6,
color: Color(0xFF5C6670),
),
),
const SizedBox(height: 14),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
const _InfoChip(
label: 'Host',
value: 'jingheyijia-cop.oss-cn-chengdu.aliyuncs.com',
),
_InfoChip(label: 'Bind', value: _bindHost),
const _InfoChip(label: '目录', value: _ossDirectory),
],
),
const SizedBox(height: 16),
FilledButton.icon(
onPressed: _uploadImages,
icon: const Icon(Icons.cloud_upload_outlined),
label: const Text('上传图片到 OSS'),
),
const SizedBox(height: 16),
Wrap(
spacing: 12,
runSpacing: 12,
children: [
for (int index = 0; index < _imageUrls.length; index++)
_buildImageTile(
imageUrl: _imageUrls[index],
index: index,
),
],
),
const SizedBox(height: 14),
Text(
_imageStatus,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF4D6FD5),
),
),
],
),
),
);
}
Widget _buildImageTile({
required String imageUrl,
required int index,
}) {
return SizedBox(
width: 104,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Material(
color: Colors.white,
child: InkWell(
onTap: () => _openPreview(index),
child: Stack(
children: [
SizedBox(
width: 104,
height: 104,
child: Image.network(
imageUrl,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) {
return Container(
color: const Color(0xFFF1F4FA),
alignment: Alignment.center,
child: const Icon(
Icons.broken_image_outlined,
color: Color(0xFF7A8694),
),
);
},
),
),
Positioned(
left: 8,
top: 8,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'${index + 1}',
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
),
Positioned(
right: 6,
top: 6,
child: GestureDetector(
onTap: () => _removeImage(index),
child: Container(
width: 24,
height: 24,
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.45),
shape: BoxShape.circle,
),
child: const Icon(
Icons.close,
size: 14,
color: Colors.white,
),
),
),
),
],
),
),
),
),
const SizedBox(height: 8),
Text(
'点击预览',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF5C6670),
),
),
],
),
);
}
Widget _buildDemoCard({
required String title,
required String description,
@@ -205,3 +456,39 @@ class _MyHomePageState extends State<MyHomePage> {
)} ${DateTimeUtils.getWeekDay(date)}';
}
}
class _InfoChip extends StatelessWidget {
final String label;
final String value;
const _InfoChip({
required this.label,
required this.value,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
decoration: BoxDecoration(
color: const Color(0xFFF1F4FA),
borderRadius: BorderRadius.circular(999),
),
child: RichText(
text: TextSpan(
style: const TextStyle(
fontSize: 12,
color: Color(0xFF5C6670),
),
children: [
TextSpan(
text: '$label: ',
style: const TextStyle(fontWeight: FontWeight.w700),
),
TextSpan(text: value),
],
),
),
);
}
}

2
example/pubspec.lock
View File

@@ -326,7 +326,7 @@ packages:
source: path
version: "0.0.1"
flutter_easyloading:
dependency: transitive
dependency: "direct main"
description:
name: flutter_easyloading
sha256: ba21a3c883544e582f9cc455a4a0907556714e1e9cf0eababfcb600da191d17c

1
example/pubspec.yaml
View File

@@ -39,6 +39,7 @@ dependencies:
image_editor_plus: ^1.0.6
get: ^4.6.5
dio: ^5.9.0
flutter_easyloading: ^3.0.5
image_picker: ^1.1.0 #相册单选
# native_exif: ^0.6.2
# exif: ^3.3.0

4
lib/flutter_common.dart
View File

@@ -1,6 +1,6 @@
library flutter_common;
export 'calendarcalendar/calendar_choose_widget.dart';
export 'calendarcalendar/custom_calendar_range_picker_widget.dart';
export 'calendarcalendar/custom_date_picker.dart';
export 'upload_image/look_images_widget.dart';
export 'upload_image/upload_images_tool.dart';
export 'utils/date_utils.dart';

43
lib/upload_image/down_load_image_tool.dart
View File

@@ -11,45 +11,50 @@ import 'package:image_gallery_saver_plus/image_gallery_saver_plus.dart';
import 'package:permission_handler/permission_handler.dart';
class DownLoadImageTool {
// 请求照片库权限
static Future<bool> requestPhotoPermission() async {
// 检查当前权限状态
// var status = await Permission.photos.status;
var status = await Permission.storage.request();
if (status.isDenied) {
// 请求权限
PermissionStatus status;
if (Platform.isIOS) {
status = await Permission.photosAddOnly.request();
} else {
status = await Permission.photos.request();
}
// 如果用户拒绝了权限，可以显示一个解释
if (status.isPermanentlyDenied) {
// 打开应用设置，让用户手动启用权限
await openAppSettings();
}
}
return status.isGranted;
return status.isGranted || status.isLimited;
}
// 或者请求存储权限（适用于Android）
static Future<bool> requestStoragePermission() async {
if (Platform.isIOS) {
return requestPhotoPermission();
}
if (Platform.isAndroid) {
// 对于Android 13及以上版本
if (await DeviceInfoPlugin().androidInfo.then((info) => info.version.sdkInt) >= 33) {
if (await DeviceInfoPlugin()
.androidInfo
.then((info) => info.version.sdkInt) >=
33) {
var status = await Permission.photos.request();
if(status == PermissionStatus.denied){
await requestPhotoPermission();
if (status.isPermanentlyDenied) {
await openAppSettings();
}
return status.isGranted;
return status.isGranted || status.isLimited;
} else {
// 对于Android 13以下版本
var status = await Permission.storage.request();
if (status.isPermanentlyDenied) {
await openAppSettings();
}
return status.isGranted;
}
} else {
// iOS使用照片权限
return await requestPhotoPermission();
}
return false;
}
///保存到相册
@@ -98,10 +103,9 @@ class DownLoadImageTool {
final result = await ImageGallerySaverPlus.saveImage(
Uint8List.fromList(response.data),
quality: 60,
name: "hello",
name: "flutter_common_${DateTime.now().millisecondsSinceEpoch}",
isReturnImagePathOfIOS: true,
);
print('=result ============ $result');
return result;
}
@@ -127,7 +131,6 @@ class DownLoadImageTool {
EasyLoading.dismiss();
return null;
}
} catch (e) {
EasyLoading.dismiss();
// debugPrint('Error fetching image: $e');

87
lib/upload_image/look_images_widget.dart
View File

@@ -3,7 +3,9 @@ import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_common/upload_image/down_load_image_tool.dart';
import 'package:flutter_common/upload_image/ossUtil.dart';
import 'package:flutter_common/utils/toast_utils.dart';
import 'package:get/get.dart';
import 'package:image_editor_plus/image_editor_plus.dart';
import 'package:path_provider/path_provider.dart';
@@ -14,6 +16,7 @@ class LookImagesTool {
required List<String> listData,
int? currentPage,
void Function(String)? onCallBack,
void Function(String, int)? onEditCallBack,
String? oSSAccessKeyId,
Function? callBack,
bool? isShowEdit,
@@ -31,6 +34,7 @@ class LookImagesTool {
listData: listData,
currentPage: currentPage,
onCallBack: onCallBack,
onEditCallBack: onEditCallBack,
oSSAccessKeyId: oSSAccessKeyId,
policy: policy,
callback: callback,
@@ -52,6 +56,7 @@ class LookImagesWidget extends StatefulWidget {
final String? ossDirectory;
final String? ossHost;
final void Function(String)? onCallBack;
final void Function(String, int)? onEditCallBack;
final bool? isShowEdit;
const LookImagesWidget({
@@ -65,6 +70,7 @@ class LookImagesWidget extends StatefulWidget {
this.ossDirectory,
this.ossHost,
this.onCallBack,
this.onEditCallBack,
this.isShowEdit,
});
@@ -73,7 +79,7 @@ class LookImagesWidget extends StatefulWidget {
}
class _LookImagesWidgetState extends State<LookImagesWidget> {
List listData = [];
List<String> listData = [];
late int currentPage;
late int initialPage = 0;
@@ -87,9 +93,11 @@ class _LookImagesWidgetState extends State<LookImagesWidget> {
options: Options(responseType: ResponseType.bytes),
);
// 响应成功且数据非空时，直接转为 Uint8List
return response.statusCode == 200 && response.data != null ? Uint8List.fromList(response.data!) : null;
return response.statusCode == 200 && response.data != null
? Uint8List.fromList(response.data!)
: null;
} catch (e) {
print('图片转换失败：$e'); // 捕获网络错误、URL 非法等异常
debugPrint('图片转换失败：$e'); // 捕获网络错误、URL 非法等异常
return null;
}
}
@@ -143,11 +151,16 @@ class _LookImagesWidgetState extends State<LookImagesWidget> {
if (uint8List.length < 4) return "bin"; // 无法识别时返回二进制后缀
// PNG 头：89 50 4E 47
if (uint8List[0] == 0x89 && uint8List[1] == 0x50 && uint8List[2] == 0x4E && uint8List[3] == 0x47) {
if (uint8List[0] == 0x89 &&
uint8List[1] == 0x50 &&
uint8List[2] == 0x4E &&
uint8List[3] == 0x47) {
return "png";
}
// JPG 头：FF D8 FF
else if (uint8List[0] == 0xFF && uint8List[1] == 0xD8 && uint8List[2] == 0xFF) {
else if (uint8List[0] == 0xFF &&
uint8List[1] == 0xD8 &&
uint8List[2] == 0xFF) {
return "jpg";
}
// MP4 头：00 00 00 18 66 74 79 70
@@ -169,7 +182,8 @@ class _LookImagesWidgetState extends State<LookImagesWidget> {
}
/// Uint8List 转临时 File 并且上传到oss并返回访问路径
Future<String?> uint8ListToTempFile(Uint8List uint8List, {String fileName = "temp_file"}) async {
Future<String?> uint8ListToTempFile(Uint8List uint8List,
{String fileName = "temp_file"}) async {
if (uint8List.isEmpty) return null;
try {
// 1. 获取临时存储目录（跨平台兼容）
@@ -178,7 +192,8 @@ class _LookImagesWidgetState extends State<LookImagesWidget> {
String tempPath = tempDir.path;
// 2. 拼接文件路径（可自定义后缀，如 .png、.mp4 等）
File tempFile = File("$tempPath/$fileName.${getExtension(uint8List)}"); // 自动识别后缀（可选）
File tempFile =
File("$tempPath/$fileName.${getExtension(uint8List)}"); // 自动识别后缀（可选）
// 3. 将 Uint8List 写入文件
await tempFile.writeAsBytes(uint8List);
@@ -198,14 +213,29 @@ class _LookImagesWidgetState extends State<LookImagesWidget> {
// print("上传后的访问路径：$imageUrl");
return imageUrl;
} catch (e) {
print("转换临时文件失败：$e");
debugPrint("转换临时文件失败：$e");
return null;
}
}
Future<void> _saveCurrentImage() async {
if (listData.isEmpty) {
ToastUtils.showToast(msg: '暂无可保存的图片');
return;
}
final result = await DownLoadImageTool.savePhoto(
imageUrl: listData[currentPage],
);
if (result != null) {
ToastUtils.showToast(msg: '已保存到相册');
}
}
@override
void initState() {
listData = widget.listData;
listData = List<String>.from(widget.listData);
if (widget.currentPage == null) {
initialPage = 0;
currentPage = 0;
@@ -220,7 +250,10 @@ class _LookImagesWidgetState extends State<LookImagesWidget> {
return Scaffold(
body: Stack(
children: [
PhotoViewGallery.builder(
GestureDetector(
behavior: HitTestBehavior.translucent,
onLongPress: _saveCurrentImage,
child: PhotoViewGallery.builder(
itemCount: listData.length,
pageController: PageController(initialPage: currentPage),
onPageChanged: (index) {
@@ -236,24 +269,44 @@ class _LookImagesWidgetState extends State<LookImagesWidget> {
);
},
),
),
Positioned(
left: 15,
top: 50,
child: GestureDetector(onTap: () => Get.back(), child: Icon(Icons.arrow_back_ios, color: Colors.white))),
child: GestureDetector(
onTap: () => Get.back(),
child: const Icon(Icons.arrow_back_ios, color: Colors.white),
),
),
Positioned(
right: 15,
top: 50,
child: GestureDetector(
onTap: () async {
Uint8List? imageFile = await editImage(url: listData[currentPage]);
String? url = await uint8ListToTempFile(imageFile ?? Uint8List(0));
if(widget.onCallBack != null){
widget.onCallBack!(url??'');
Uint8List? imageFile =
await editImage(url: listData[currentPage]);
if (imageFile == null || imageFile.isEmpty) {
return;
}
String? url = await uint8ListToTempFile(imageFile);
if (url == null || url.isEmpty) {
ToastUtils.showToast(msg: '图片上传失败');
return;
}
setState(() {
listData[currentPage] = url;
});
widget.onEditCallBack?.call(url, currentPage);
widget.onCallBack?.call(url);
},
child: Visibility(
visible: widget.isShowEdit??false,
child: Icon(Icons.edit, color: Colors.white)))),
visible: widget.isShowEdit ?? false,
child: const Icon(Icons.edit, color: Colors.white),
),
),
),
//图片张数指示器
Positioned(
left: 0,