From d3f2605d86143f5a08b269d3fe541aa17e96f08a Mon Sep 17 00:00:00 2001 From: lxm <1274844347@qq.com> Date: Sun, 24 Aug 2025 00:01:33 +0800 Subject: [PATCH] =?UTF-8?q?refactor(translation):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E7=BF=BB=E8=AF=91=E6=A8=A1=E5=BC=8F=E9=80=89=E6=8B=A9=E5=99=A8?= =?UTF-8?q?=E4=B8=BA=E5=BA=95=E9=83=A8=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将原有的下拉菜单式翻译模式选择器重构为底部弹窗样式，提升用户体验 新增 _showTranslationModeSelector 和 _buildTranslationModeSelector 方法 移除不再使用的 _buildPopupMenuItem 辅助方法 --- .../translation/views/translation_view.dart | 227 +++++++++++++----- 1 file changed, 163 insertions(+), 64 deletions(-) diff --git a/lib/modules/translation/views/translation_view.dart b/lib/modules/translation/views/translation_view.dart index bf11fd7bd..70ba2f2c3 100644 --- a/lib/modules/translation/views/translation_view.dart +++ b/lib/modules/translation/views/translation_view.dart @@ -26,24 +26,6 @@ class TranslationView extends GetView { } PreferredSizeWidget _buildAppBar(bool isDarkMode) { - // 在同一个类中添加辅助方法 - PopupMenuItem _buildPopupMenuItem(String value, String text, - {bool enabled = true // 默认启用 - }) { - return PopupMenuItem( - value: value, - enabled: enabled, // 设置启用状态 - child: Text( - text, - style: TextStyle( - color: enabled - ? null // 使用默认颜色 - : Colors.grey, // 禁用时显示灰色 - ), - ), - ); - } - return AppBar( backgroundColor: isDarkMode ? AppColors.cardBackground : Colors.white, elevation: 1, @@ -59,53 +41,20 @@ class TranslationView extends GetView { Get.back(); }, ), - title: Obx(() => PopupMenuButton( - onSelected: (value) { - controller.changeTranslationMode(value); + title: Obx(() => GestureDetector( + onTap: () { + // 点击标题时弹出翻译模式选择器 + _showTranslationModeSelector(isDarkMode); }, - color: isDarkMode ? AppColors.cardBackground : Colors.white, - itemBuilder: (BuildContext context) => [ - _buildPopupMenuItem('simultaneous', 'simultaneousTranslation'.tr), - _buildPopupMenuItem('faceToFace', 'faceToFaceTranslation'.tr), - _buildPopupMenuItem( - 'audioVideo', - 'audioVideoTranslation'.tr, - enabled: controller.bleManager.isConnected, // 根据连接状态启用/禁用 - ), - _buildPopupMenuItem( - 'call', - 'callTranslation'.tr, - enabled: controller.bleManager.isConnected, // 根据连接状态启用/禁用 + child: Text( + controller.currentModeTitle.value.tr, + style: TextStyle( + fontSize: 18.sp, + fontWeight: FontWeight.w600, + color: isDarkMode ? Colors.white : Colors.black, ), - ], - child: Row( - mainAxisSize: MainAxisSize.min, // 关键修改：让宽度自适应内容 - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Flexible( - // 防止文本溢出 - child: FittedBox( - // 保持文本缩放比例 - fit: BoxFit.scaleDown, - child: Text( - controller.currentModeTitle.value.tr, - style: TextStyle( - fontSize: 18.sp, - fontWeight: FontWeight.w600, // 保持字体加粗 - color: isDarkMode ? Colors.white : Colors.black, - ), - overflow: TextOverflow.ellipsis, // 长文本显示省略号 - maxLines: 1, - ), - ), - ), - SizedBox(width: 4), // 添加间距 - Icon( - Icons.arrow_drop_down, - color: isDarkMode ? Colors.white : Colors.black, - size: 20.sp, - ), - ], + overflow: TextOverflow.ellipsis, + maxLines: 1, ), )), centerTitle: true, @@ -499,7 +448,8 @@ class TranslationView extends GetView { if (isRecognizing) { controller.stopAll(); } else { - controller.startRecognition(); + // 弹出翻译模式选择器 + _showTranslationModeSelector(isDarkMode); } }, child: Container( @@ -1118,4 +1068,153 @@ class TranslationView extends GetView { ); } } + + // 显示翻译模式选择器 + void _showTranslationModeSelector(bool isDarkMode) { + Get.bottomSheet( + _buildTranslationModeSelector(), + isScrollControlled: true, + backgroundColor: Colors.transparent, + ); + } + + // 构建翻译模式选择器 - 参考会议模块样式 + Widget _buildTranslationModeSelector() { + return Builder( + builder: (BuildContext context) { + return SafeArea( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + _buildModeItem( + context, + 'simultaneousTranslation'.tr, + Icons.translate, + Colors.blue, + onTap: () async { + Get.back(); + await controller.changeTranslationMode('simultaneous'); + controller.startRecognition(); + }, + ), + _buildModeItem( + context, + 'faceToFaceTranslation'.tr, + Icons.people, + Colors.green, + onTap: () async { + Get.back(); + await controller.changeTranslationMode('faceToFace'); + controller.startRecognition(); + }, + ), + _buildModeItem( + context, + 'audioVideoTranslation'.tr, + Icons.videocam, + Colors.orange, + onTap: controller.bleManager.isConnected + ? () async { + Get.back(); + await controller.changeTranslationMode('audioVideo'); + controller.startRecognition(); + } + : null, + ), + _buildModeItem( + context, + 'callTranslation'.tr, + Icons.phone, + Colors.purple, + onTap: controller.bleManager.isConnected + ? () async { + Get.back(); + await controller.changeTranslationMode('call'); + controller.startRecognition(); + } + : null, + ), + SizedBox(height: 24.w), + GestureDetector( + onTap: () => Get.back(), + child: Container( + width: 42, + height: 42, + decoration: BoxDecoration( + color: Colors.black.withValues(alpha: 0.8), + borderRadius: BorderRadius.circular(50), + ), + child: const Icon(Icons.close, color: Colors.white), + ), + ), + const SizedBox(height: 19), + ], + ), + ); + }, + ); + } + + // 构建单个模式选项 - 完全参考会议模块的 _buildItem 方法 + Widget _buildModeItem( + BuildContext context, + String title, + IconData icon, + Color color, { + Function()? onTap, + }) { + final isDarkMode = Theme.of(context).brightness == Brightness.dark; + + return GestureDetector( + onTap: onTap, + child: Container( + width: 220.w, + height: 60.w, + padding: EdgeInsets.all(5.w), + margin: EdgeInsets.only(top: 15.w), + decoration: BoxDecoration( + color: isDarkMode + ? Colors.grey[800]!.withValues(alpha: onTap != null ? 1 : 0.5) + : Colors.white.withValues(alpha: onTap != null ? 1 : 0.5), + borderRadius: BorderRadius.circular(60.w), + ), + child: Row( + children: [ + Container( + width: 46.w, + height: 46.w, + margin: EdgeInsets.only(right: 5.w), + decoration: BoxDecoration( + color: color.withValues(alpha: onTap != null ? 0.3 : 0.2), + borderRadius: BorderRadius.circular(60.w), + ), + child: Icon( + icon, + color: color.withValues(alpha: onTap != null ? 1 : 0.5), + ), + ), + Expanded( + child: Text( + title, + style: TextStyle( + fontSize: 15.sp, + color: isDarkMode + ? Colors.white.withValues(alpha: onTap != null ? 1 : 0.5) + : Colors.black87 + .withValues(alpha: onTap != null ? 1 : 0.5), + fontWeight: FontWeight.bold, + ), + ), + ), + Icon( + Icons.arrow_forward_ios, + size: 16.w, + color: Colors.grey.withValues(alpha: onTap != null ? 1 : 0.5), + ), + SizedBox(width: 5.w), + ], + ), + ), + ); + } }