Browse Source

feat: 添加图片消息点击查看功能

在消息气泡中点击图片时,打开全屏图片查看器。新增 `photo_view` 依赖并实现 `openImageViewer` 方法,提升用户体验。
weicu
lxm 1 year ago
parent
commit
30082ed176
  1. 25
      lib/modules/agent/controllers/agent_controller.dart
  2. 42
      lib/modules/agent/views/message_bubble.dart
  3. 1
      pubspec.yaml

25
lib/modules/agent/controllers/agent_controller.dart

@ -15,6 +15,7 @@ import 'package:permission_handler/permission_handler.dart';
import 'package:app_settings/app_settings.dart';
import 'package:deep_voice/core/utils/logger.dart';
import 'package:path_provider/path_provider.dart';
import 'package:photo_view/photo_view.dart';
class Message {
final bool isUser; //标识信息是否来自用户还是AI
@ -959,4 +960,28 @@ class AgentController extends GetxController {
void openNavigation(String start, String end, String ntype) {
_navigationManager.open(start, end, ntype);
}
// 打开图片查看器
void openImageViewer(BuildContext context, String imagePath) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
iconTheme: IconThemeData(color: Colors.white),
),
body: Container(
color: Colors.black,
child: PhotoView(
imageProvider: FileImage(File(imagePath)),
minScale: PhotoViewComputedScale.contained,
maxScale: PhotoViewComputedScale.covered * 2,
backgroundDecoration: BoxDecoration(color: Colors.black),
),
),
),
),
);
}
}

42
lib/modules/agent/views/message_bubble.dart

@ -215,13 +215,20 @@ class MessageBubble extends GetView<AgentController> {
if (message == '[图片]') {
return Container(
padding: const EdgeInsets.all(8),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.file(
File(imagePath!),
width: 200,
height: 200,
fit: BoxFit.cover,
child: GestureDetector(
onTap: () {
// 点击图片时打开图片查看器
Get.find<AgentController>()
.openImageViewer(context, imagePath ?? '');
},
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.file(
File(imagePath!),
width: 200,
height: 200,
fit: BoxFit.cover,
),
),
),
);
@ -241,13 +248,20 @@ class MessageBubble extends GetView<AgentController> {
),
),
const SizedBox(height: 8),
ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.file(
File(imagePath!),
width: 200,
height: 200,
fit: BoxFit.cover,
GestureDetector(
onTap: () {
// 点击图片时打开图片查看器
Get.find<AgentController>()
.openImageViewer(context, imagePath ?? '');
},
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.file(
File(imagePath!),
width: 200,
height: 200,
fit: BoxFit.cover,
),
),
),
],

1
pubspec.yaml

@ -37,6 +37,7 @@ dependencies:
file_picker: ^10.1.5
haptic_feedback: ^0.5.1+1
tencentcloud_cos_sdk_plugin: ^1.2.3
photo_view: ^0.15.0
window_size:
git:

Loading…
Cancel
Save