lxm
12 months ago
9 changed files with 412 additions and 610 deletions
@ -0,0 +1,172 @@ |
|||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
|
import '../../../core/theme/app_colors.dart'; |
||||
|
|
||||
|
/// 通用语言选择栏组件 |
||||
|
/// - 统一源/目标语言胶囊样式与交换按钮样式 |
||||
|
/// - 通过函数读取语言显示文本，以便模块内保持最小改动 |
||||
|
/// - 文案默认走 .tr，本地化显示语言名称（翻译键代表的中文文本内容） |
||||
|
class LanguageSelectorBar extends StatelessWidget { |
||||
|
const LanguageSelectorBar({ |
||||
|
Key? key, |
||||
|
required this.sourceText, |
||||
|
required this.targetText, |
||||
|
required this.onTapSource, |
||||
|
required this.onTapTarget, |
||||
|
required this.onSwap, |
||||
|
this.translateLanguageNames = true, |
||||
|
this.fontSizeSp = 15, |
||||
|
this.sourceSuffix, |
||||
|
this.targetSuffix, |
||||
|
}) : super(key: key); |
||||
|
|
||||
|
/// 返回源语言显示文本（建议返回语言中文名或翻译键） |
||||
|
final String Function() sourceText; |
||||
|
|
||||
|
/// 返回目标语言显示文本（建议返回语言中文名或翻译键） |
||||
|
final String Function() targetText; |
||||
|
|
||||
|
/// 源语言点击事件（打开语言选择弹窗） |
||||
|
final VoidCallback onTapSource; |
||||
|
|
||||
|
/// 目标语言点击事件（打开语言选择弹窗） |
||||
|
final VoidCallback onTapTarget; |
||||
|
|
||||
|
/// 语言交换事件 |
||||
|
final VoidCallback onSwap; |
||||
|
|
||||
|
/// 是否将语言名称作为翻译键进行翻译（翻译键代表的中文文本内容） |
||||
|
final bool translateLanguageNames; |
||||
|
|
||||
|
/// 字号（sp单位），默认 15，与语音翻译一致 |
||||
|
final double fontSizeSp; |
||||
|
|
||||
|
/// 源语言后缀（可选），用于追加图标等 |
||||
|
final Widget? sourceSuffix; |
||||
|
|
||||
|
/// 目标语言后缀（可选），用于追加图标等 |
||||
|
final Widget? targetSuffix; |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
final isDarkMode = Get.isDarkMode; |
||||
|
final capsuleBg = |
||||
|
isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[100]; |
||||
|
final textColor = isDarkMode ? Colors.white : Colors.black; |
||||
|
final swapBg = |
||||
|
isDarkMode ? AppColors.primary.withOpacity(0.2) : Colors.blue[50]; |
||||
|
final swapIconColor = isDarkMode ? AppColors.primary : Colors.blue; |
||||
|
|
||||
|
// 规范化特殊项的翻译键，例如：自动检测 -> autoDetect（翻译键代表的中文文本内容） |
||||
|
String _normalizeKey(String text) { |
||||
|
switch (text) { |
||||
|
case '自动检测': |
||||
|
return 'autoDetect'; |
||||
|
default: |
||||
|
return text; // 其他保持原值，由 .tr 决定是否命中 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
// 源语言胶囊 |
||||
|
Expanded( |
||||
|
child: GestureDetector( |
||||
|
onTap: onTapSource, |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), |
||||
|
decoration: BoxDecoration( |
||||
|
color: capsuleBg, |
||||
|
borderRadius: BorderRadius.circular(16.r), |
||||
|
), |
||||
|
child: Obx(() { |
||||
|
final raw = sourceText(); |
||||
|
final text = translateLanguageNames ? _normalizeKey(raw) : raw; |
||||
|
return Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
Flexible( |
||||
|
child: Text( |
||||
|
translateLanguageNames ? text.tr : text, |
||||
|
style: TextStyle( |
||||
|
fontSize: fontSizeSp.sp, |
||||
|
fontWeight: FontWeight.w600, |
||||
|
color: textColor, |
||||
|
), |
||||
|
textAlign: TextAlign.center, |
||||
|
overflow: TextOverflow.ellipsis, |
||||
|
), |
||||
|
), |
||||
|
if (sourceSuffix != null) ...[ |
||||
|
SizedBox(width: 4.w), |
||||
|
sourceSuffix!, |
||||
|
], |
||||
|
], |
||||
|
); |
||||
|
}), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
|
||||
|
// 语言互换按钮 |
||||
|
GestureDetector( |
||||
|
onTap: onSwap, |
||||
|
child: Container( |
||||
|
margin: EdgeInsets.symmetric(horizontal: 8.w), |
||||
|
padding: EdgeInsets.all(4.r), |
||||
|
decoration: BoxDecoration( |
||||
|
color: swapBg, |
||||
|
shape: BoxShape.circle, |
||||
|
), |
||||
|
child: Icon( |
||||
|
Icons.swap_horiz, |
||||
|
color: swapIconColor, |
||||
|
size: 20.sp, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
|
||||
|
// 目标语言胶囊 |
||||
|
Expanded( |
||||
|
child: GestureDetector( |
||||
|
onTap: onTapTarget, |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), |
||||
|
decoration: BoxDecoration( |
||||
|
color: capsuleBg, |
||||
|
borderRadius: BorderRadius.circular(16.r), |
||||
|
), |
||||
|
child: Obx(() { |
||||
|
final raw = targetText(); |
||||
|
final text = translateLanguageNames ? _normalizeKey(raw) : raw; |
||||
|
return Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
Flexible( |
||||
|
child: Text( |
||||
|
translateLanguageNames ? text.tr : text, |
||||
|
style: TextStyle( |
||||
|
fontSize: fontSizeSp.sp, |
||||
|
fontWeight: FontWeight.w600, |
||||
|
color: textColor, |
||||
|
), |
||||
|
textAlign: TextAlign.center, |
||||
|
overflow: TextOverflow.ellipsis, |
||||
|
), |
||||
|
), |
||||
|
if (targetSuffix != null) ...[ |
||||
|
SizedBox(width: 4.w), |
||||
|
targetSuffix!, |
||||
|
], |
||||
|
], |
||||
|
); |
||||
|
}), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue