From baeeff8da9b0ba8673fe41162e1d2e9bcad65617 Mon Sep 17 00:00:00 2001 From: lxm <1274844347@qq.com> Date: Thu, 17 Jul 2025 16:09:56 +0800 Subject: [PATCH] =?UTF-8?q?refactor(translation):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=AF=AD=E8=A8=80=E9=80=89=E6=8B=A9=E5=AF=B9=E8=AF=9D=E6=A1=86?= =?UTF-8?q?=E7=9A=84UI=E5=92=8C=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 使用GestureDetector替代ListTile提升点击体验 - 统一圆角尺寸和内边距保持设计一致性 - 改进选中状态视觉反馈，增加背景色和边框 - 优化暗黑模式下的颜色对比度 - 简化代码结构，移除冗余容器 --- .../translation/views/translation_view.dart | 201 +++++++++++------- 1 file changed, 126 insertions(+), 75 deletions(-) diff --git a/lib/modules/translation/views/translation_view.dart b/lib/modules/translation/views/translation_view.dart index ed9d193eb..e9797d055 100644 --- a/lib/modules/translation/views/translation_view.dart +++ b/lib/modules/translation/views/translation_view.dart @@ -668,61 +668,49 @@ class TranslationView extends GetView { // 显示语言选择对话框 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 { } 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 { // 显示删除成功提示 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 { } catch (e) { // 显示删除失败提示 Get.snackbar( - '删除失败', // deleteFailed + 'error'.tr, // deleteFailed '删除翻译记录时发生错误: ${e.toString()}', // deleteTranslationError snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.red[400],