liwei1dao
/
deepvoice_client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(translation): 优化语言选择对话框的UI和交互 

- 使用GestureDetector替代ListTile提升点击体验
- 统一圆角尺寸和内边距保持设计一致性
- 改进选中状态视觉反馈，增加背景色和边框
- 优化暗黑模式下的颜色对比度
- 简化代码结构，移除冗余容器
weicu
lxm 1 year ago
parent
1894fc49d0
commit
e6af8fa4c5
1 changed files with 126 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 201
      lib/modules/translation/views/translation_view.dart

201
lib/modules/translation/views/translation_view.dart
View File

@ -668,61 +668,49 @@ class TranslationView extends GetView<TranslationController> {
// 显示语言选择对话框
void _showLanguageSelectionDialog(bool isSource, bool isDarkMode) {
Get.dialog(
Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24.r),
),
insetPadding: EdgeInsets.symmetric(horizontal: 20.w),
backgroundColor: isDarkMode ? AppColors.cardBackground : Colors.white,
child: Container(
width: 0.9.sw,
padding: EdgeInsets.only(top: 32.h, bottom: 16.h),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 24.w),
child: Text(
isSource
? 'selectSourceLanguage'.tr // 选择源语言
: 'selectTargetLanguage'.tr, // 选择目标语言
style: TextStyle(
fontSize: 20.sp,
fontWeight: FontWeight.bold,
color: isDarkMode ? Colors.white : Colors.black,
),
Get.dialog(
Dialog(
backgroundColor: isDarkMode ? Colors.grey[900] : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.r), // 统一圆角尺寸为16
),
insetPadding: EdgeInsets.symmetric(horizontal: 20.w),
child: Padding( // 使用Padding替代Container的padding
padding: EdgeInsets.all(12.w), // 统一内边距
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题区域
Padding(
padding: EdgeInsets.symmetric(horizontal: 8.w),
child: Text(
isSource
? 'selectSourceLanguage'.tr
: 'selectTargetLanguage'.tr, // 保留源语言/目标语言区分
style: TextStyle(
fontSize: 18.sp, // 调整字号
fontWeight: FontWeight.w600, // 使用数字字重
color: isDarkMode ? Colors.white : Colors.black87, // 优化文本颜色
),
),
SizedBox(height: 16.h),
Container(
constraints: BoxConstraints(maxHeight: 0.5.sh),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children:
controller.supportedLanguages.keys.map((language) {
return ListTile(
title: Text(
'${language}'.tr,
style: TextStyle(
color: isDarkMode ? Colors.white : Colors.black,
),
),
trailing: Obx(() {
final currentLanguage = isSource
? controller.sourceLanguage.value
: controller.targetLanguage.value;
return currentLanguage == language
? Icon(
Icons.check_circle,
color: isDarkMode
? AppColors.primary
: Colors.blue,
)
: const SizedBox.shrink();
}),
),
SizedBox(height: 16.h),
// 语言列表区域
Container(
constraints: BoxConstraints(maxHeight: 0.5.sh),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: controller.supportedLanguages.keys.map((language) {
return Obx(() {
final currentLanguage = isSource
? controller.sourceLanguage.value
: controller.targetLanguage.value;
final isSelected = currentLanguage == language;
return GestureDetector( // 改用手势检测器实现点击
onTap: () {
if (isSource) {
controller.setSourceLanguage(language);
@ -731,34 +719,97 @@ class TranslationView extends GetView<TranslationController> {
}
Get.back();
},
child: Container(
margin: EdgeInsets.only(bottom: 10.h), // 添加项间距
padding: EdgeInsets.all(10.w), // 统一内边距
decoration: BoxDecoration(
color: isSelected // 选中状态背景色
? (isDarkMode
? const Color(0xFF6200EE).withOpacity(0.2)
: Colors.blue.withOpacity(0.1))
: (isDarkMode // 未选中状态背景色
? Colors.white.withOpacity(0.05)
: Colors.grey[200]!),
borderRadius: BorderRadius.circular(12.r), // 项圆角
border: Border.all( // 选中状态边框
color: isSelected
? (isDarkMode
? const Color(0xFF6200EE)
: Colors.blue)
: (isDarkMode // 未选中状态背景色
? Colors.white.withOpacity(0.05)
: Colors.grey[200]!),
width: 1,
),
),
child: Row(
children: [
// 语言名称
Expanded(
child: Text(
language.tr,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w500,
color: isDarkMode
? Colors.white
: Colors.black87,
overflow: TextOverflow.ellipsis,
),
),
),
// 选中指示器
Container(
width: 24.w,
height: 24.w,
decoration: BoxDecoration(
color: isSelected // 动态颜色
? (isDarkMode
? const Color(0xFF6200EE)
: Colors.blue)
: (isDarkMode
? Colors.white.withOpacity(0.1)
: Colors.grey[300]),
shape: BoxShape.circle, // 圆形样式
),
child: isSelected
? Icon( // 选中时显示对勾
Icons.check,
size: 16.w,
color: Colors.white,
)
: null,
),
],
),
),
);
}).toList(),
),
});
}).toList(),
),
),
SizedBox(height: 16.h),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.only(right: 24.w),
child: TextButton(
onPressed: () => Get.back(),
child: Text(
'cancel'.tr, // 取消
style: TextStyle(
color: isDarkMode ? AppColors.primary : Colors.blue,
fontSize: 16.sp,
),
),
),
SizedBox(height: 16.h),
// 取消按钮
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () => Get.back(),
child: Text(
'cancel'.tr,
style: TextStyle(
color: isDarkMode ? const Color(0xFF6200EE) : Colors.blue,
),
),
),
],
),
),
],
),
),
);
}
),
);
}
// 构建加载更多指示器
Widget _buildLoadMoreIndicator() {
@ -979,7 +1030,7 @@ class TranslationView extends GetView<TranslationController> {
// 显示删除成功提示
Get.snackbar(
'删除成功', // deleteSuccess
'success'.tr, // deleteSuccess
'已删除该翻译记录', // deleteTranslationSuccess
snackPosition: SnackPosition.BOTTOM,
backgroundColor: Get.isDarkMode ? Colors.grey[800] : Colors.grey[200],
@ -989,7 +1040,7 @@ class TranslationView extends GetView<TranslationController> {
} catch (e) {
// 显示删除失败提示
Get.snackbar(
'删除失败', // deleteFailed
'error'.tr, // deleteFailed
'删除翻译记录时发生错误: ${e.toString()}', // deleteTranslationError
snackPosition: SnackPosition.BOTTOM,
backgroundColor: Colors.red[400],

Write Preview
Loading…
Cancel
Save