liwei1dao
/
deepvoice_client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(翻译视图): 优化语言显示和麦克风按钮样式 

- 将目标语言文本显示改为行布局并添加图标
- 修改麦克风按钮为长条形并显示对应语言名称
- 调整按钮阴影效果和文本溢出处理
newdev_shunjiawei
lxm 1 year ago
parent
1c0b3be573
commit
686028abf8
1 changed files with 86 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      lib/modules/translation/views/translation_view.dart

135
lib/modules/translation/views/translation_view.dart
View File

@ -206,16 +206,39 @@ class TranslationView extends GetView<TranslationController> {
: Colors.grey[100],
borderRadius: BorderRadius.circular(16.r),
),
child: Obx(() => Text(
'${controller.targetLanguage.value.split(' ')[0]}'
.tr, // Just show the English part
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
color: isDarkMode ? Colors.white : Colors.black,
),
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
child: Obx(() => Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Text(
'${controller.targetLanguage.value.split(' ')[0]}'
.tr,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w600,
color:
isDarkMode ? Colors.white : Colors.black,
),
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(width: 4.w),
// Icon(
// Icons.public,
// size: 20.sp,
// color: isDarkMode
// ? Colors.white70
// : Colors.grey[600],
// ),
Icon(
Icons.person_pin_circle,
size: 20.sp,
color: isDarkMode
? Colors.white70
: Colors.grey[600],
),
],
)),
),
),
@ -418,23 +441,27 @@ class TranslationView extends GetView<TranslationController> {
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 耳机图标按钮 (说话者1)
_buildHoldToTalkButton(
isDarkMode: isDarkMode,
speakerId: 1,
activeSpeaker: controller.activeSpeaker.value,
icon: Icons.headset,
label: "headsetUser".tr,
),
SizedBox(width: 40.w),
// 手机图标按钮 (说话者2)
_buildHoldToTalkButton(
isDarkMode: isDarkMode,
speakerId: 2,
activeSpeaker: controller.activeSpeaker.value,
icon: Icons.phone_android,
label: "phoneUser".tr,
),
// 耳机图标按钮 (说话者1)-显示源语言
Obx(() => _buildHoldToTalkButton(
isDarkMode: isDarkMode,
speakerId: 1,
activeSpeaker: controller.activeSpeaker.value,
icon: Icons.mic_none,
label: controller.sourceLanguage.value
.split(' ')[0]
.tr, // 源语言名称
)),
SizedBox(width: 16.w),
// 手机图标按钮 (说话者2)-显示目标语言
Obx(() => _buildHoldToTalkButton(
isDarkMode: isDarkMode,
speakerId: 2,
activeSpeaker: controller.activeSpeaker.value,
icon: Icons.mic_none,
label: controller.targetLanguage.value
.split(' ')[0]
.tr, // 目标语言名称
)),
],
)
else
@ -569,15 +596,15 @@ class TranslationView extends GetView<TranslationController> {
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 80.w,
height: 80.w,
width: 160.w, // 长条形宽度
height: 54.h, // 长条形高度
decoration: BoxDecoration(
color: isActive
? (isDarkMode ? Colors.green[700] : Colors.green)
: (isDisabled
? (isDarkMode ? Colors.grey[800] : Colors.grey[300])
: (isDarkMode ? AppColors.primary : Colors.blue)),
shape: BoxShape.circle,
borderRadius: BorderRadius.circular(25.r), // 圆角长条形
boxShadow: isActive
? [
BoxShadow(
@ -586,32 +613,42 @@ class TranslationView extends GetView<TranslationController> {
spreadRadius: 3,
)
]
: null,
: [
BoxShadow(
color: (isDarkMode ? Colors.black : Colors.grey)
.withOpacity(0.2),
blurRadius: 8,
spreadRadius: 1,
offset: Offset(0, 2),
)
],
),
child: Column(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
alignment: Alignment.center,
children: [
// 设备类型图标
Icon(
icon,
// 左边图标
Icon(
icon,
color: isActive
? Colors.white
: Colors.white.withOpacity(isDisabled ? 0.3 : 0.9),
size: 20.sp,
),
SizedBox(width: 8.w), // 图标和文字间距
// 右边语言名称
Flexible(
child: Text(
label,
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w500,
color: isActive
? Colors.white
: Colors.white.withOpacity(isDisabled ? 0.3 : 0.9),
size: 24.sp,
),
],
),
SizedBox(height: 4.h),
Text(
label,
style: TextStyle(
fontSize: 12.sp,
color: isActive
? Colors.white
: Colors.white.withOpacity(isDisabled ? 0.3 : 0.9),
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis, // 防止文本溢出
),
),
],

Write Preview
Loading…
Cancel
Save