flutter写一个页面,页面上有一个图片,点击图片出现保存和分享两个选项,点击保存可以将图片保存到本地相册,点击分享可以将图片分享到qq
时间: 2023-12-01 14:03:12 浏览: 197
Flutter – 图片点击全屏浏览
5星 · 资源好评率100%
好的,下面是一个简单的实现,将图片保存到本地相册和分享到QQ:
```dart
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:flutter_qq_share/flutter_qq_share.dart';
class ImagePage extends StatefulWidget {
@override
_ImagePageState createState() => _ImagePageState();
}
class _ImagePageState extends State<ImagePage> {
Uint8List _imageBytes;
@override
void initState() {
super.initState();
_loadImage();
}
Future<void> _loadImage() async {
String imagePath = "assets/images/test.jpg";
ByteData imageByteData = await rootBundle.load(imagePath);
setState(() {
_imageBytes = imageByteData.buffer.asUint8List();
});
}
Future<void> _saveImage() async {
try {
// 获取应用程序目录
Directory appDocDir = await getApplicationDocumentsDirectory();
// 获取文件名
String fileName = "test.jpg";
// 组合路径
String filePath = "${appDocDir.path}/$fileName";
// 保存图片到本地
File file = File(filePath);
await file.writeAsBytes(_imageBytes);
// 保存图片到相册
await ImageGallerySaver.saveImage(_imageBytes);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("图片已保存到相册"),
));
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("保存图片失败: $e"),
));
}
}
Future<void> _shareImageToQQ() async {
try {
// 获取应用程序目录
Directory appDocDir = await getApplicationDocumentsDirectory();
// 获取文件名
String fileName = "test.jpg";
// 组合路径
String filePath = "${appDocDir.path}/$fileName";
// 保存图片到本地
File file = File(filePath);
await file.writeAsBytes(_imageBytes);
// 分享图片到QQ
await FlutterQQShare.shareImageToQQ(filePath);
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("分享图片失败: $e"),
));
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("图片"),
),
body: Center(
child: _imageBytes != null
? GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 120,
child: Column(
children: [
ListTile(
leading: Icon(Icons.save),
title: Text("保存到相册"),
onTap: () {
Navigator.of(context).pop();
_saveImage();
},
),
ListTile(
leading: Icon(Icons.share),
title: Text("分享到QQ"),
onTap: () {
Navigator.of(context).pop();
_shareImageToQQ();
},
),
],
),
);
},
);
},
child: Image.memory(_imageBytes),
)
: CircularProgressIndicator(),
),
);
}
}
```
这个页面加载了一个本地图片,并在图片上添加了一个手势识别器,当用户点击图片时,会弹出一个底部菜单,用户可以选择保存到相册或分享到QQ。当用户选择保存到相册时,会将图片保存到本地并保存到相册中,当用户选择分享到QQ时,会将图片保存到本地并分享到QQ。
阅读全文