Browse Source

style(ui): 优化主题颜色适配和代码可读性

调整翻译视图和个人资料页面的颜色方案,使其更好地适配深色/浅色模式
统一颜色变量定义,提高代码可维护性
newdev_shunjiawei
lxm 1 year ago
parent
commit
4cd3987f10
  1. 19
      lib/modules/profile/views/profile_view.dart
  2. 23
      lib/modules/translation/views/translation_view.dart

19
lib/modules/profile/views/profile_view.dart

@ -750,11 +750,11 @@ class EditProfileView extends GetView<ProfileController> {
title: 'clean'.tr, // 清理缓存
icon: Icons.cleaning_services,
iconBgColor: isDarkMode
? Colors.red[900]!.withOpacity(0.3)
: Colors.red[50]!,
iconColor: isDarkMode ? Colors.red[300]! : Colors.red[600]!,
titleColor:
isDarkMode ? Colors.red[300]! : Colors.red[600]!,
? Colors.blue[900]!.withOpacity(0.3)
: Colors.blue[50]!,
iconColor:
isDarkMode ? Colors.blue[300]! : Colors.blue[600]!,
titleColor: isDarkMode ? Colors.white : Colors.black87,
onTap: () {
// 退出登录确认对话框
Get.dialog(
@ -816,11 +816,12 @@ class EditProfileView extends GetView<ProfileController> {
title: 'logout'.tr, // 退出登录
icon: Icons.logout,
iconBgColor: isDarkMode
? Colors.red[900]!.withOpacity(0.3)
: Colors.red[50]!,
iconColor: isDarkMode ? Colors.red[300]! : Colors.red[600]!,
? Colors.orange[900]!.withOpacity(0.3)
: Colors.orange[50]!,
iconColor:
isDarkMode ? Colors.orange[300]! : Colors.orange[600]!,
titleColor:
isDarkMode ? Colors.red[300]! : Colors.red[600]!,
isDarkMode ? Colors.orange[300]! : Colors.orange[600]!,
onTap: () {
// 退出登录确认对话框
Get.dialog(

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

@ -419,6 +419,15 @@ class TranslationView extends GetView<TranslationController> {
BuildContext context, TranslationItem item) {
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]!; // 浅色模式:浅绿
return GestureDetector(
onLongPressStart: (details) => _onLongPressTranslationItem(
context,
@ -431,20 +440,14 @@ class TranslationView extends GetView<TranslationController> {
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: item.isIntermediate
? Colors.grey.withOpacity(0.1) // 中间结果使用浅灰色底色
? Colors.grey.withOpacity(isDarkMode ? 0.15 : 0.1) // 中间结果
: (item.sourceLanguageCode == controller.sourceLanguageCode.value
? Theme.of(context)
.colorScheme
.primary
.withOpacity(0.08) // 源语言匹配时使用主题色底色
: Theme.of(context)
.colorScheme
.secondary
.withOpacity(0.08)), // 否则使用次要色底色
? selfColor // 自己说的话
: otherColor), // 对方说的话
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: item.isIntermediate
? Colors.grey.withOpacity(0.2)
? Colors.grey.withOpacity(isDarkMode ? 0.3 : 0.2)
: Colors.transparent,
width: 1,
),

Loading…
Cancel
Save