Browse Source

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

- 使用GestureDetector替代ListTile提升点击体验
- 统一圆角尺寸和内边距保持设计一致性
- 改进选中状态视觉反馈,增加背景色和边框
- 优化暗黑模式下的颜色对比度
- 简化代码结构,移除冗余容器
newdev_shunjiawei
lxm 1 year ago
parent
commit
baeeff8da9
  1. 129
      lib/modules/translation/views/translation_view.dart

129
lib/modules/translation/views/translation_view.dart

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

Loading…
Cancel
Save