lxm
11 months ago
5 changed files with 225 additions and 136 deletions
@ -0,0 +1,191 @@ |
|||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
|
|
||||
|
import '../../controllers/translation_controller.dart'; |
||||
|
import '../../models/translation_models.dart'; |
||||
|
import '../dialogs/translation_long_press_menu.dart'; |
||||
|
|
||||
|
class TranslationItemWidget extends GetView<TranslationController> { |
||||
|
// 传入的翻译条目 |
||||
|
final TranslationItem item; |
||||
|
|
||||
|
// 传入用于控制操作按钮显隐的时间戳状态 |
||||
|
final Rx<DateTime?> activeActionTimestamp; |
||||
|
|
||||
|
// 点击气泡时切换操作按钮显隐 |
||||
|
final void Function(TranslationItem item) onToggleActionItem; |
||||
|
|
||||
|
// 长按时弹出菜单（需要上下文、暗色模式、手势详情、条目） |
||||
|
final void Function( |
||||
|
BuildContext context, |
||||
|
bool isDarkMode, |
||||
|
LongPressStartDetails details, |
||||
|
TranslationItem item, |
||||
|
) onLongPressStart; |
||||
|
|
||||
|
// 删除按钮点击时的确认对话框 |
||||
|
final void Function(TranslationItem item) onDeleteItemConfirm; |
||||
|
|
||||
|
const TranslationItemWidget({ |
||||
|
Key? key, |
||||
|
required this.item, |
||||
|
required this.activeActionTimestamp, |
||||
|
required this.onToggleActionItem, |
||||
|
required this.onLongPressStart, |
||||
|
required this.onDeleteItemConfirm, |
||||
|
}) : super(key: key); |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
final isDarkMode = Theme.of(context).brightness == Brightness.dark; |
||||
|
|
||||
|
// 定义自适应颜色（与原实现保持一致） |
||||
|
final selfColor = |
||||
|
isDarkMode ? Colors.blue[800]!.withOpacity(0.15) : Colors.blue[50]!; |
||||
|
final otherColor = |
||||
|
isDarkMode ? Colors.green[800]!.withOpacity(0.15) : Colors.green[50]!; |
||||
|
|
||||
|
// 判断是否是己方的翻译项（依据控制器当前源语言） |
||||
|
final bool isSelf = |
||||
|
item.sourceLanguageCode == controller.sourceLanguageCode.value; |
||||
|
|
||||
|
return GestureDetector( |
||||
|
onTap: () => onToggleActionItem(item), // 触碰气泡时切换按钮显隐 |
||||
|
onLongPressStart: (details) => |
||||
|
onLongPressStart(context, isDarkMode, details, item), |
||||
|
child: Align( |
||||
|
alignment: item.isIntermediate |
||||
|
? Alignment.center |
||||
|
: (isSelf ? Alignment.centerLeft : Alignment.centerRight), |
||||
|
child: Container( |
||||
|
margin: EdgeInsets.only(bottom: 8.h), |
||||
|
padding: EdgeInsets.all(12.w), |
||||
|
constraints: BoxConstraints(maxWidth: 0.8.sw, minWidth: 0.35.sw), |
||||
|
decoration: BoxDecoration( |
||||
|
color: item.isIntermediate |
||||
|
? Colors.grey.withOpacity(isDarkMode ? 0.15 : 0.1) // 中间结果 |
||||
|
: (isSelf ? selfColor : otherColor), // 自己 / 对方 |
||||
|
borderRadius: BorderRadius.circular(12.r), |
||||
|
border: Border.all( |
||||
|
color: item.isIntermediate |
||||
|
? Colors.grey.withOpacity(isDarkMode ? 0.3 : 0.2) |
||||
|
: Colors.transparent, |
||||
|
width: 1, |
||||
|
), |
||||
|
), |
||||
|
child: Column( |
||||
|
crossAxisAlignment: CrossAxisAlignment.start, |
||||
|
children: [ |
||||
|
// 源文本 |
||||
|
Text( |
||||
|
item.sourceText, |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
color: Theme.of(context).textTheme.bodyLarge?.color, |
||||
|
), |
||||
|
), |
||||
|
SizedBox(height: 8.h), |
||||
|
// 分隔线 + 译文 |
||||
|
Container( |
||||
|
padding: EdgeInsets.only(top: 8.h), |
||||
|
decoration: BoxDecoration( |
||||
|
border: Border( |
||||
|
top: BorderSide( |
||||
|
color: item.isIntermediate |
||||
|
? (isDarkMode |
||||
|
? Colors.grey[400]!.withOpacity(0.15) |
||||
|
: Colors.grey[400]!.withOpacity(0.25)) |
||||
|
: (isSelf |
||||
|
? (isDarkMode |
||||
|
? Colors.blue[300]!.withOpacity(0.15) |
||||
|
: Colors.blue[300]!.withOpacity(0.25)) |
||||
|
: (isDarkMode |
||||
|
? Colors.green[300]!.withOpacity(0.15) |
||||
|
: Colors.green[300]!.withOpacity(0.25))), |
||||
|
width: 1, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
child: Text( |
||||
|
item.translatedText, |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
color: Theme.of(context).textTheme.bodyMedium?.color, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
// 操作按钮：复制 / 播放 / 删除（仅非中间态且显隐状态为激活时显示） |
||||
|
Obx(() { |
||||
|
final bool isActive = activeActionTimestamp.value |
||||
|
?.isAtSameMomentAs(item.timestamp) ?? |
||||
|
false; |
||||
|
if (!item.isIntermediate && isActive) { |
||||
|
return Column( |
||||
|
children: [ |
||||
|
SizedBox(height: 8.h), |
||||
|
Row( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
children: [ |
||||
|
// 复制按钮（复用长按菜单的复制逻辑） |
||||
|
GestureDetector( |
||||
|
onTap: () => |
||||
|
TranslationLongPressMenu.copyTranslationItem( |
||||
|
item), |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.all(4.w), |
||||
|
child: Tooltip( |
||||
|
message: 'copy'.tr, // 翻译键代表的中文文本内容 |
||||
|
child: Icon( |
||||
|
Icons.copy, |
||||
|
size: 20.sp, |
||||
|
color: Theme.of(context).colorScheme.primary, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
SizedBox(width: 8.w), |
||||
|
// 播放按钮（调用控制器原有方法） |
||||
|
GestureDetector( |
||||
|
onTap: () => controller.playTranslationItem(item), |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.all(4.w), |
||||
|
child: Icon( |
||||
|
Icons.volume_up, |
||||
|
size: 20.sp, |
||||
|
color: Theme.of(context).colorScheme.primary, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
SizedBox(width: 8.w), |
||||
|
// 删除按钮（弹出确认） |
||||
|
GestureDetector( |
||||
|
onTap: () => onDeleteItemConfirm(item), |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.all(4.w), |
||||
|
child: Tooltip( |
||||
|
message: 'delete'.tr, // 翻译键代表的中文文本内容 |
||||
|
child: Icon( |
||||
|
Icons.delete_outline, |
||||
|
size: 20.sp, |
||||
|
color: Colors.grey[500], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
) |
||||
|
], |
||||
|
); |
||||
|
} else { |
||||
|
return const SizedBox.shrink(); |
||||
|
} |
||||
|
}), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue