Browse Source

feat(translation): 为翻译选项添加渐变背景和颜色配置

修改翻译选项卡片样式,使用渐变背景替代纯色背景
更新 TranslationOption 类新增 startColor/endColor/iconBgColor 字段
调整阴影偏移量和图标背景透明度以增强视觉效果
weicu
lxm 11 months ago
parent
commit
29a53a49a1
  1. 38
      lib/modules/translation/middleware/controllers/translation_middleware_controller.dart
  2. 26
      lib/modules/translation/middleware/views/translation_middleware_view.dart

38
lib/modules/translation/middleware/controllers/translation_middleware_controller.dart

@ -16,7 +16,10 @@ class TranslationMiddlewareController extends GetxController {
title: 'simultaneousTranslation'.tr, // 实时翻译
// description: 'realtimeTranslationDescription', // 实时语音翻译,支持多种语言
icon: Icons.record_voice_over,
iconColor: 0xFF2196F3, // 蓝色
startColor: Colors.blue[400]!, // 亮蓝
endColor: Colors.blue[600]!, //深蓝
iconBgColor: Colors.white, // 白色
iconColor: Colors.blue[500]!, // 主蓝
targetRoute: Routes.translation,
),
TranslationOption(
@ -24,7 +27,10 @@ class TranslationMiddlewareController extends GetxController {
title: 'callTranslation'.tr, // 通话翻译
// description: 'simultaneousTranslationInfo', // 双向对话翻译,面对面交流
icon: Icons.call,
iconColor: 0xFF4CAF50, // 绿色
startColor: Colors.green[400]!, // 绿色
endColor: Colors.green[600]!, // 深绿
iconBgColor: Colors.white, // 白色
iconColor: Colors.green[500]!, // 主绿
targetRoute: Routes.translation,
),
TranslationOption(
@ -32,7 +38,10 @@ class TranslationMiddlewareController extends GetxController {
title: 'faceToFaceTranslation'.tr, // 面对面翻译
// description: 'faceToFaceTranslationDescription', // 面对面交流,支持多种语言
icon: Icons.people,
iconColor: 0xFFFF9800, // 橙色
startColor: Colors.orange[400]!, // 橙色
endColor: Colors.orange[600]!, // 深橙
iconBgColor: Colors.white, // 白色
iconColor: Colors.orange[500]!, // 主橙
targetRoute: Routes.translation,
),
TranslationOption(
@ -40,21 +49,30 @@ class TranslationMiddlewareController extends GetxController {
title: 'audioVideoTranslation'.tr, // 多媒体翻译
//description: 'audioVideoTranslationDescription', // 支持音频和视频翻译
icon: Icons.videocam,
iconColor: 0xFF9C27B0, // 紫色
startColor: Colors.purple[400]!, // 亮紫
endColor: Colors.purple[600]!, // 深紫
iconBgColor: Colors.white, // 白色
iconColor: Colors.purple[500]!, // 主紫
targetRoute: Routes.translation,
),
TranslationOption(
translationId: 'picture_translator',
title: 'pictureTranslation'.tr, // 图片翻译
icon: Icons.image,
iconColor: 0xFF009688, // 青色
startColor: Colors.teal[400]!, // 青色
endColor: Colors.teal[600]!, // 深青
iconBgColor: Colors.white, // 白色
iconColor: Colors.teal[500]!, // 主青
targetRoute: Routes.pictureTranslation,
),
TranslationOption(
translationId: 'text_translator',
title: 'textTranslation'.tr, // 文本翻译
icon: Icons.text_fields,
iconColor: 0xFF3F51B5, // 棕色
startColor: Colors.indigo[400]!, // 靛蓝
endColor: Colors.indigo[600]!, // 深靛
iconBgColor: Colors.white, // 白色
iconColor: Colors.indigo[500]!, // 主靛
targetRoute: Routes.textTranslation,
),
];
@ -103,7 +121,10 @@ class TranslationOption {
final String title;
// final String description;
final IconData icon;
final int iconColor;
final Color startColor;
final Color endColor;
final Color iconBgColor;
final Color iconColor;
final String targetRoute;
TranslationOption({
@ -111,6 +132,9 @@ class TranslationOption {
required this.title,
// required this.description,
required this.icon,
required this.startColor,
required this.endColor,
required this.iconBgColor,
required this.iconColor,
required this.targetRoute,
});

26
lib/modules/translation/middleware/views/translation_middleware_view.dart

@ -91,7 +91,23 @@ class TranslationMiddlewareView
onTap: () => controller.navigateToTranslationFeature(option),
child: Container(
decoration: BoxDecoration(
color: isDarkMode ? AppColors.cardBackground : Colors.white,
// 使用新的 startColor/endColor 构建渐变背景
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
option.startColor.withOpacity(
isEnabled
? (isDarkMode ? 0.3 : 0.3)
: (isDarkMode ? 0.15 : 0.08),
),
option.endColor.withOpacity(
isEnabled
? (isDarkMode ? 0.3 : 0.3)
: (isDarkMode ? 0.15 : 0.08),
),
],
),
borderRadius: BorderRadius.circular(16.r),
boxShadow: [
BoxShadow(
@ -99,7 +115,7 @@ class TranslationMiddlewareView
? Colors.black.withOpacity(0.3)
: Colors.grey.withOpacity(0.1),
blurRadius: 8,
offset: const Offset(0, 2),
offset: const Offset(0, 4),
),
],
),
@ -113,15 +129,13 @@ class TranslationMiddlewareView
width: 60.w,
height: 60.h,
decoration: BoxDecoration(
color: Color(option.iconColor)
.withOpacity(isEnabled ? 0.1 : 0.05),
color: option.iconBgColor.withOpacity(isEnabled ? 0.2 : 0.05),
borderRadius: BorderRadius.circular(16.r),
),
child: Icon(
option.icon,
size: 32.sp,
color: Color(option.iconColor)
.withOpacity(isEnabled ? 1.0 : 0.5),
color: option.iconColor.withOpacity(isEnabled ? 1.0 : 0.5),
),
),
SizedBox(height: 16.h),

Loading…
Cancel
Save