Browse Source
实现翻译功能中间层页面,提供四种翻译模式的统一入口 添加翻译中间层控制器、视图和绑定 更新路由配置和国际化文本 修改原有翻译功能跳转逻辑使用中间层入口newdev_shunjiawei
10 changed files with 331 additions and 4 deletions
@ -0,0 +1,11 @@ |
|||||
|
import 'package:get/get.dart'; |
||||
|
import '../controllers/translation_middleware_controller.dart'; |
||||
|
|
||||
|
/// 翻译中间层页面依赖绑定 |
||||
|
class TranslationMiddlewareBinding extends Bindings { |
||||
|
@override |
||||
|
void dependencies() { |
||||
|
// 注册翻译中间层控制器 |
||||
|
Get.lazyPut<TranslationMiddlewareController>(() => TranslationMiddlewareController()); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
import 'package:get/get.dart'; |
||||
|
import 'package:flutter/material.dart'; |
||||
|
import '../../../../routes/app_routes.dart'; |
||||
|
|
||||
|
/// 翻译中间层控制器 |
||||
|
/// 负责管理翻译功能入口的导航和状态 |
||||
|
class TranslationMiddlewareController extends GetxController { |
||||
|
/// 翻译功能选项列表 |
||||
|
final List<TranslationOption> translationOptions = [ |
||||
|
TranslationOption( |
||||
|
translationId: 'simultaneous', |
||||
|
title: 'simultaneousTranslation', // 实时翻译 |
||||
|
description: 'realtimeTranslationDescription', // 实时语音翻译,支持多种语言 |
||||
|
icon: Icons.record_voice_over, |
||||
|
iconColor: 0xFF2196F3, // 蓝色 |
||||
|
targetRoute: Routes.translation, |
||||
|
), |
||||
|
TranslationOption( |
||||
|
translationId: 'call', |
||||
|
title: 'callTranslation', // 电话翻译 |
||||
|
description: 'simultaneousTranslationInfo', // 双向对话翻译,面对面交流 |
||||
|
icon: Icons.call, |
||||
|
iconColor: 0xFF4CAF50, // 绿色 |
||||
|
targetRoute: Routes.translation, |
||||
|
), |
||||
|
TranslationOption( |
||||
|
translationId: 'faceToFace', |
||||
|
title: 'faceToFaceTranslation', // 面对面翻译 |
||||
|
description: 'faceToFaceTranslationDescription', // 面对面交流,支持多种语言 |
||||
|
icon: Icons.people, |
||||
|
iconColor: 0xFFFF9800, // 橙色 |
||||
|
targetRoute: Routes.translation, |
||||
|
), |
||||
|
TranslationOption( |
||||
|
translationId: 'audioVideo', |
||||
|
title: 'audioVideoTranslation', // 音频视频翻译 |
||||
|
description: 'audioVideoTranslationDescription', // 支持音频和视频翻译 |
||||
|
icon: Icons.videocam, |
||||
|
iconColor: 0xFF9C27B0, // 紫色 |
||||
|
targetRoute: Routes.translation, |
||||
|
), |
||||
|
]; |
||||
|
|
||||
|
/// 导航到指定的翻译功能 |
||||
|
void navigateToTranslationFeature(TranslationOption option) { |
||||
|
Get.toNamed(option.targetRoute, |
||||
|
arguments: {'translationId': option.translationId}); |
||||
|
} |
||||
|
|
||||
|
/// 获取翻译选项的本地化标题 |
||||
|
String getLocalizedTitle(TranslationOption option) { |
||||
|
return option.title.tr; |
||||
|
} |
||||
|
|
||||
|
/// 获取翻译选项的本地化描述 |
||||
|
String getLocalizedDescription(TranslationOption option) { |
||||
|
return option.description.tr; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/// 翻译功能选项数据模型 |
||||
|
class TranslationOption { |
||||
|
final String translationId; |
||||
|
final String title; |
||||
|
final String description; |
||||
|
final IconData icon; |
||||
|
final int iconColor; |
||||
|
final String targetRoute; |
||||
|
|
||||
|
TranslationOption({ |
||||
|
required this.translationId, |
||||
|
required this.title, |
||||
|
required this.description, |
||||
|
required this.icon, |
||||
|
required this.iconColor, |
||||
|
required this.targetRoute, |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,204 @@ |
|||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
|
import '../controllers/translation_middleware_controller.dart'; |
||||
|
import '../../../../core/theme/app_colors.dart'; |
||||
|
|
||||
|
/// 翻译中间层视图 |
||||
|
/// 展示四种翻译功能的入口选项 |
||||
|
class TranslationMiddlewareView |
||||
|
extends GetView<TranslationMiddlewareController> { |
||||
|
const TranslationMiddlewareView({Key? key}) : super(key: key); |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
final isDarkMode = Theme.of(context).brightness == Brightness.dark; |
||||
|
|
||||
|
return Scaffold( |
||||
|
backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.grey[50], |
||||
|
appBar: _buildAppBar(isDarkMode), |
||||
|
body: _buildBody(isDarkMode), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/// 构建应用栏 |
||||
|
PreferredSizeWidget _buildAppBar(bool isDarkMode) { |
||||
|
return AppBar( |
||||
|
backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.white, |
||||
|
elevation: 0, |
||||
|
centerTitle: true, |
||||
|
leading: IconButton( |
||||
|
icon: Icon( |
||||
|
Icons.arrow_back_ios, |
||||
|
color: isDarkMode ? Colors.white : Colors.black, |
||||
|
size: 20.sp, |
||||
|
), |
||||
|
onPressed: () => Get.back(), |
||||
|
), |
||||
|
title: Text( |
||||
|
'translationServices'.tr, // 翻译服务 |
||||
|
style: TextStyle( |
||||
|
fontSize: 20.sp, |
||||
|
fontWeight: FontWeight.bold, |
||||
|
color: isDarkMode ? Colors.white : Colors.black, |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/// 构建主体内容 |
||||
|
Widget _buildBody(bool isDarkMode) { |
||||
|
return SafeArea( |
||||
|
child: Padding( |
||||
|
padding: EdgeInsets.all(20.w), |
||||
|
child: Column( |
||||
|
crossAxisAlignment: CrossAxisAlignment.start, |
||||
|
children: [ |
||||
|
// 页面标题和描述 |
||||
|
// _buildHeader(isDarkMode), |
||||
|
// SizedBox(height: 30.h), |
||||
|
|
||||
|
// 翻译功能选项网格 |
||||
|
Expanded( |
||||
|
child: _buildTranslationOptionsGrid(isDarkMode), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/// 构建页面头部 |
||||
|
Widget _buildHeader(bool isDarkMode) { |
||||
|
return Column( |
||||
|
crossAxisAlignment: CrossAxisAlignment.start, |
||||
|
children: [ |
||||
|
Text( |
||||
|
'chooseTranslationService'.tr, // 选择翻译服务 |
||||
|
style: TextStyle( |
||||
|
fontSize: 24.sp, |
||||
|
fontWeight: FontWeight.bold, |
||||
|
color: isDarkMode ? Colors.white : Colors.black87, |
||||
|
), |
||||
|
), |
||||
|
SizedBox(height: 8.h), |
||||
|
Text( |
||||
|
'translationServiceDescription'.tr, // 选择适合您需求的翻译功能 |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
color: isDarkMode ? Colors.grey[300] : Colors.grey[600], |
||||
|
height: 1.4, |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/// 构建翻译选项网格 |
||||
|
Widget _buildTranslationOptionsGrid(bool isDarkMode) { |
||||
|
return GridView.builder( |
||||
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( |
||||
|
crossAxisCount: 2, |
||||
|
crossAxisSpacing: 16.w, |
||||
|
mainAxisSpacing: 16.h, |
||||
|
childAspectRatio: 0.85, |
||||
|
), |
||||
|
itemCount: controller.translationOptions.length, |
||||
|
itemBuilder: (context, index) { |
||||
|
final option = controller.translationOptions[index]; |
||||
|
return _buildTranslationOptionCard(option, isDarkMode); |
||||
|
}, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/// 构建单个翻译选项卡片 |
||||
|
Widget _buildTranslationOptionCard( |
||||
|
TranslationOption option, |
||||
|
bool isDarkMode, |
||||
|
) { |
||||
|
return GestureDetector( |
||||
|
onTap: () => controller.navigateToTranslationFeature(option), |
||||
|
child: Container( |
||||
|
decoration: BoxDecoration( |
||||
|
color: isDarkMode ? AppColors.cardBackground : Colors.white, |
||||
|
borderRadius: BorderRadius.circular(16.r), |
||||
|
boxShadow: [ |
||||
|
BoxShadow( |
||||
|
color: isDarkMode |
||||
|
? Colors.black.withOpacity(0.3) |
||||
|
: Colors.grey.withOpacity(0.1), |
||||
|
blurRadius: 8, |
||||
|
offset: const Offset(0, 2), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
child: Padding( |
||||
|
padding: EdgeInsets.all(20.w), |
||||
|
child: Column( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
// 图标 |
||||
|
Container( |
||||
|
width: 60.w, |
||||
|
height: 60.h, |
||||
|
decoration: BoxDecoration( |
||||
|
color: Color(option.iconColor).withOpacity(0.1), |
||||
|
borderRadius: BorderRadius.circular(16.r), |
||||
|
), |
||||
|
child: Icon( |
||||
|
option.icon, |
||||
|
size: 32.sp, |
||||
|
color: Color(option.iconColor), |
||||
|
), |
||||
|
), |
||||
|
SizedBox(height: 16.h), |
||||
|
|
||||
|
// 标题 |
||||
|
Text( |
||||
|
controller.getLocalizedTitle(option), |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
fontWeight: FontWeight.bold, |
||||
|
color: isDarkMode ? Colors.white : Colors.black87, |
||||
|
), |
||||
|
textAlign: TextAlign.center, |
||||
|
maxLines: 2, |
||||
|
overflow: TextOverflow.ellipsis, |
||||
|
), |
||||
|
SizedBox(height: 8.h), |
||||
|
|
||||
|
// 描述 |
||||
|
Text( |
||||
|
controller.getLocalizedDescription(option), |
||||
|
style: TextStyle( |
||||
|
fontSize: 12.sp, |
||||
|
color: isDarkMode ? Colors.grey[400] : Colors.grey[600], |
||||
|
height: 1.3, |
||||
|
), |
||||
|
textAlign: TextAlign.center, |
||||
|
maxLines: 3, |
||||
|
overflow: TextOverflow.ellipsis, |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/// 根据图标名称获取图标数据 |
||||
|
IconData _getIconData(String iconName) { |
||||
|
switch (iconName) { |
||||
|
case 'translate': |
||||
|
return Icons.translate; |
||||
|
case 'people': |
||||
|
return Icons.people; |
||||
|
case 'history': |
||||
|
return Icons.history; |
||||
|
case 'bar_chart': |
||||
|
return Icons.bar_chart; |
||||
|
default: |
||||
|
return Icons.help_outline; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue