9 changed files with 569 additions and 33 deletions
@ -0,0 +1,447 @@ |
|||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
import '../controllers/agent_controller.dart'; |
||||
|
|
||||
|
String formatDistance(String distanceStr) { |
||||
|
final distance = double.tryParse(distanceStr); |
||||
|
if (distance == null) return distanceStr; // 如果无法解析，则返回原始字符串 |
||||
|
|
||||
|
if (distance >= 1000) { |
||||
|
final km = distance / 1000; |
||||
|
return '${km.toStringAsFixed(1)} KM'; |
||||
|
} else { |
||||
|
return '${distance.toStringAsFixed(0)} M'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
String formatDuration(String secondsStr) { |
||||
|
int totalSeconds = int.tryParse(secondsStr) ?? 0; |
||||
|
Duration duration = Duration(seconds: totalSeconds); |
||||
|
|
||||
|
int hours = duration.inHours; |
||||
|
int minutes = duration.inMinutes.remainder(60); |
||||
|
int seconds = duration.inSeconds.remainder(60); |
||||
|
|
||||
|
List<String> parts = []; |
||||
|
if (hours > 0) parts.add('$hours${'hours'.tr}'); // 小时 |
||||
|
if (minutes > 0) parts.add('$minutes${'minutes'.tr}'); // 分钟 |
||||
|
//不需要秒 |
||||
|
//if (seconds > 0 || parts.isEmpty) parts.add('$seconds${'seconds'.tr}'); // 秒 |
||||
|
|
||||
|
return parts.join(''); |
||||
|
} |
||||
|
|
||||
|
/// 导航卡片组件 |
||||
|
/// |
||||
|
/// 各元素含义分析： |
||||
|
/// - [start]: 起点坐标 (经纬度格式) |
||||
|
/// - [end]: 终点坐标 (经纬度格式) |
||||
|
/// - [destination]: 目的地名称显示 |
||||
|
/// - [modes]: 导航方式列表，包含驾车、步行、公交等选项 |
||||
|
/// - [navigation]: 当前导航状态信息（可选） |
||||
|
/// - [height]: 卡片高度 |
||||
|
Widget googlenavigationCard( |
||||
|
BuildContext context, { |
||||
|
required String start, |
||||
|
required String end, |
||||
|
required String destination, |
||||
|
required List<Map<String, dynamic>> modes, |
||||
|
Map<String, dynamic>? navigation, |
||||
|
double? height, // 改为可选参数，允许自适应高度 |
||||
|
}) { |
||||
|
int currentIndex = 0; |
||||
|
final controller = Get.find<AgentController>(); |
||||
|
final isDarkMode = Theme.of(context).brightness == Brightness.dark; |
||||
|
|
||||
|
return Container( |
||||
|
height: height?.h ?? 350.h, // 如果没有指定高度，使用350作为默认高度 |
||||
|
decoration: BoxDecoration( |
||||
|
borderRadius: BorderRadius.circular(16.r), |
||||
|
color: isDarkMode ? const Color(0xFF1E1E1E) : Colors.white, |
||||
|
boxShadow: [ |
||||
|
BoxShadow( |
||||
|
blurRadius: 12, |
||||
|
color: Colors.black.withValues(alpha: isDarkMode ? 0.4 : 0.08), |
||||
|
offset: const Offset(0, 2), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
child: StatefulBuilder( |
||||
|
builder: (context, setInnerState) { |
||||
|
return Column( |
||||
|
children: [ |
||||
|
// 顶部：路线预览图片区域 |
||||
|
Expanded( |
||||
|
flex: 4, // 增加图片区域的flex值，让图片占更多空间 |
||||
|
child: ClipRRect( |
||||
|
borderRadius: BorderRadius.vertical(top: Radius.circular(16.r)), |
||||
|
child: Stack( |
||||
|
children: [ |
||||
|
// 路线图片 |
||||
|
AnimatedSwitcher( |
||||
|
duration: const Duration(milliseconds: 300), |
||||
|
child: Image.network( |
||||
|
modes[currentIndex]["image"] as String, |
||||
|
key: ValueKey<String>( |
||||
|
modes[currentIndex]["ntype"] as String), |
||||
|
height: double.infinity, |
||||
|
width: double.infinity, |
||||
|
fit: BoxFit.cover, |
||||
|
errorBuilder: (context, error, stackTrace) { |
||||
|
return Container( |
||||
|
color: isDarkMode |
||||
|
? Colors.grey[800] |
||||
|
: Colors.grey[200], |
||||
|
child: Icon( |
||||
|
Icons.map_outlined, |
||||
|
size: 48.sp, |
||||
|
color: isDarkMode |
||||
|
? Colors.grey[600] |
||||
|
: Colors.grey[400], |
||||
|
), |
||||
|
); |
||||
|
}, |
||||
|
), |
||||
|
), |
||||
|
// 导航状态覆盖层 |
||||
|
if (navigation != null) |
||||
|
Positioned( |
||||
|
top: 12.h, |
||||
|
left: 12.w, |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.symmetric( |
||||
|
horizontal: 8.w, vertical: 4.h), |
||||
|
decoration: BoxDecoration( |
||||
|
color: |
||||
|
Theme.of(context).primaryColor.withOpacity(0.9), |
||||
|
borderRadius: BorderRadius.circular(12.r), |
||||
|
), |
||||
|
child: Row( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
children: [ |
||||
|
Icon( |
||||
|
Icons.navigation, |
||||
|
color: Colors.white, |
||||
|
size: 14.sp, |
||||
|
), |
||||
|
SizedBox(width: 4.w), |
||||
|
Text( |
||||
|
'navigating'.tr, // 导航中 |
||||
|
style: TextStyle( |
||||
|
color: Colors.white, |
||||
|
fontSize: 12.sp, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
|
||||
|
// 中部：导航方式选择器 |
||||
|
Container( |
||||
|
padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 16.w), |
||||
|
child: Row( |
||||
|
children: List.generate(modes.length, (index) { |
||||
|
final mode = modes[index]; |
||||
|
final isSelected = index == currentIndex; |
||||
|
final isEnabled = mode['enable'] as bool; |
||||
|
|
||||
|
return Expanded( |
||||
|
child: GestureDetector( |
||||
|
onTap: isEnabled |
||||
|
? () { |
||||
|
setInnerState(() => currentIndex = index); |
||||
|
} |
||||
|
: null, |
||||
|
child: Container( |
||||
|
margin: EdgeInsets.symmetric(horizontal: 4.w), |
||||
|
padding: EdgeInsets.symmetric( |
||||
|
vertical: 8.h, horizontal: 12.w), |
||||
|
decoration: BoxDecoration( |
||||
|
color: isSelected |
||||
|
? Theme.of(context).primaryColor.withOpacity(0.1) |
||||
|
: Colors.transparent, |
||||
|
borderRadius: BorderRadius.circular(8.r), |
||||
|
border: Border.all( |
||||
|
color: isSelected |
||||
|
? Theme.of(context).primaryColor |
||||
|
: (isDarkMode |
||||
|
? Colors.grey[700]! |
||||
|
: Colors.grey[300]!), |
||||
|
width: isSelected ? 2 : 1, |
||||
|
), |
||||
|
), |
||||
|
child: Column( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
children: [ |
||||
|
Icon( |
||||
|
_getNavigationIcon(mode["ntype"] as String), |
||||
|
color: isEnabled |
||||
|
? (isSelected |
||||
|
? Theme.of(context).primaryColor |
||||
|
: (isDarkMode |
||||
|
? Colors.white70 |
||||
|
: Colors.black87)) |
||||
|
: Colors.grey, |
||||
|
size: 20.sp, |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
}), |
||||
|
), |
||||
|
), |
||||
|
|
||||
|
// 底部：目的地信息和操作按钮 |
||||
|
Container( |
||||
|
padding: EdgeInsets.fromLTRB(20.w, 8.h, 20.w, 16.h), |
||||
|
child: Column( |
||||
|
crossAxisAlignment: CrossAxisAlignment.start, |
||||
|
children: [ |
||||
|
// 第一层：起点 → 目的地信息（独占整个宽度） |
||||
|
Row( |
||||
|
crossAxisAlignment: CrossAxisAlignment.center, // 确保垂直居中对齐 |
||||
|
children: [ |
||||
|
// 起点图标 - 统一图标容器宽度，确保对齐 |
||||
|
SizedBox( |
||||
|
width: 16.sp, // 固定图标容器宽度 |
||||
|
child: Icon( |
||||
|
Icons.my_location, |
||||
|
size: 15.sp, // 统一图标大小 |
||||
|
color: Theme.of(context).primaryColor, |
||||
|
), |
||||
|
), |
||||
|
SizedBox(width: 6.w), // 统一间距 |
||||
|
// 当前位置文本 |
||||
|
Text( |
||||
|
'currentLocation'.tr, // 当前位置 |
||||
|
style: TextStyle( |
||||
|
fontSize: 14.sp, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
color: isDarkMode ? Colors.white70 : Colors.black54, |
||||
|
height: 1.3, // 设置行高，提升多行文本可读性 |
||||
|
), |
||||
|
softWrap: true, // 启用软换行 |
||||
|
overflow: TextOverflow.visible, // 确保文本完全显示 |
||||
|
), |
||||
|
SizedBox(width: 8.w), |
||||
|
// 箭头图标 |
||||
|
Icon( |
||||
|
Icons.arrow_forward, |
||||
|
size: 15.sp, // 统一图标大小 |
||||
|
color: isDarkMode ? Colors.white54 : Colors.black45, |
||||
|
), |
||||
|
SizedBox(width: 8.w), |
||||
|
// 目的地图标 |
||||
|
Icon( |
||||
|
Icons.location_on, |
||||
|
size: 15.sp, // 统一图标大小 |
||||
|
color: Colors.red, |
||||
|
), |
||||
|
SizedBox(width: 6.w), // 统一间距 |
||||
|
// 目的地名称 - 使用Expanded确保自动换行 |
||||
|
Expanded( |
||||
|
child: Text( |
||||
|
destination, |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
fontWeight: FontWeight.w600, |
||||
|
color: isDarkMode ? Colors.white : Colors.black87, |
||||
|
height: 1.2, // 设置行高，提升多行文本可读性 |
||||
|
), |
||||
|
softWrap: true, // 启用软换行 |
||||
|
overflow: TextOverflow.visible, // 确保文本完全显示 |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
|
||||
|
SizedBox(height: 4.h), // 第一层和第二层之间的间距 |
||||
|
|
||||
|
// 第二层：距离时间信息（左侧）+ 导航按钮（右侧） |
||||
|
Row( |
||||
|
crossAxisAlignment: CrossAxisAlignment.end, // 底部对齐 |
||||
|
children: [ |
||||
|
// 左侧：距离和时间信息 |
||||
|
Expanded( |
||||
|
child: Column( |
||||
|
crossAxisAlignment: CrossAxisAlignment.start, |
||||
|
children: [ |
||||
|
// 距离信息 |
||||
|
Row( |
||||
|
crossAxisAlignment: |
||||
|
CrossAxisAlignment.center, // 确保垂直居中对齐 |
||||
|
children: [ |
||||
|
// 距离图标 - 统一图标容器宽度，确保与第一层对齐 |
||||
|
SizedBox( |
||||
|
width: 16.sp, // 与第一层图标容器宽度一致 |
||||
|
child: Icon( |
||||
|
Icons.straighten, |
||||
|
size: 15.sp, // 统一图标大小 |
||||
|
color: Theme.of(context).primaryColor, |
||||
|
), |
||||
|
), |
||||
|
SizedBox(width: 6.w), // 与第一层间距一致 |
||||
|
Flexible( |
||||
|
child: Text( |
||||
|
formatDistance( |
||||
|
modes[currentIndex]["distance"]), |
||||
|
style: TextStyle( |
||||
|
fontSize: 14.sp, |
||||
|
color: Theme.of(context).primaryColor, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
height: 1.3, // 设置行高，提升多行文本可读性 |
||||
|
), |
||||
|
softWrap: true, // 启用软换行 |
||||
|
overflow: TextOverflow.visible, // 确保文本完全显示 |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
SizedBox(height: 4.h), |
||||
|
// 时间信息 |
||||
|
Row( |
||||
|
crossAxisAlignment: |
||||
|
CrossAxisAlignment.center, // 确保垂直居中对齐 |
||||
|
children: [ |
||||
|
// 时间图标 - 统一图标容器宽度，确保与第一层对齐 |
||||
|
SizedBox( |
||||
|
width: 16.sp, // 与第一层图标容器宽度一致 |
||||
|
child: Icon( |
||||
|
Icons.access_time, |
||||
|
size: 15.sp, // 统一图标大小 |
||||
|
color: Theme.of(context).primaryColor, |
||||
|
), |
||||
|
), |
||||
|
SizedBox(width: 6.w), // 与第一层间距一致 |
||||
|
Flexible( |
||||
|
child: Text( |
||||
|
'${'approximate'.tr}${formatDuration(modes[currentIndex]["duration"])}', // 约 |
||||
|
style: TextStyle( |
||||
|
fontSize: 14.sp, |
||||
|
color: Theme.of(context).primaryColor, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
height: 1.3, // 设置行高，提升多行文本可读性 |
||||
|
), |
||||
|
softWrap: true, // 启用软换行 |
||||
|
overflow: TextOverflow.visible, // 确保文本完全显示 |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
// 导航状态信息 |
||||
|
if (navigation != null) ...[ |
||||
|
SizedBox(height: 6.h), |
||||
|
Container( |
||||
|
padding: EdgeInsets.symmetric( |
||||
|
horizontal: 8.w, vertical: 4.h), |
||||
|
decoration: BoxDecoration( |
||||
|
color: Theme.of(context) |
||||
|
.primaryColor |
||||
|
.withOpacity(0.1), |
||||
|
borderRadius: BorderRadius.circular(6.r), |
||||
|
), |
||||
|
child: Text( |
||||
|
"${navigation["distanceText"]}${'enterRoad'.tr}${navigation["nextRoad"]}", // 进入 |
||||
|
style: TextStyle( |
||||
|
fontSize: 12.sp, |
||||
|
color: Theme.of(context).primaryColor, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
height: 1.3, // 设置行高，提升多行文本可读性 |
||||
|
), |
||||
|
softWrap: true, // 启用软换行 |
||||
|
overflow: TextOverflow.visible, // 确保文本完全显示 |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
|
||||
|
SizedBox(width: 16.w), // 左右内容之间的间距 |
||||
|
|
||||
|
// 右侧：开始导航按钮 |
||||
|
Container( |
||||
|
decoration: BoxDecoration( |
||||
|
gradient: LinearGradient( |
||||
|
colors: [ |
||||
|
Theme.of(context).primaryColor, |
||||
|
Theme.of(context).primaryColor.withOpacity(0.8), |
||||
|
], |
||||
|
begin: Alignment.topLeft, |
||||
|
end: Alignment.bottomRight, |
||||
|
), |
||||
|
borderRadius: BorderRadius.circular(12.r), |
||||
|
boxShadow: [ |
||||
|
BoxShadow( |
||||
|
color: Theme.of(context) |
||||
|
.primaryColor |
||||
|
.withOpacity(0.3), |
||||
|
blurRadius: 8, |
||||
|
offset: const Offset(0, 2), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
child: Material( |
||||
|
color: Colors.transparent, |
||||
|
child: InkWell( |
||||
|
borderRadius: BorderRadius.circular(12.r), |
||||
|
onTap: () { |
||||
|
controller.openGoogleMap( |
||||
|
end, modes[currentIndex]["ntype"] as String); |
||||
|
}, |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.symmetric( |
||||
|
horizontal: 16.w, |
||||
|
vertical: 12.h, |
||||
|
), |
||||
|
child: Icon( |
||||
|
Icons.navigation, |
||||
|
color: Colors.white, |
||||
|
size: 20.sp, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
); |
||||
|
}, |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/// 根据导航类型获取对应图标 |
||||
|
IconData _getNavigationIcon(String ntype) { |
||||
|
switch (ntype.toLowerCase()) { |
||||
|
case 'driving': |
||||
|
case '驾车': |
||||
|
return Icons.directions_car; |
||||
|
case 'walking': |
||||
|
case '步行': |
||||
|
return Icons.directions_walk; |
||||
|
case 'transit': |
||||
|
case 'tsransit': // 修正拼写错误 |
||||
|
case '公交': |
||||
|
return Icons.directions_transit; |
||||
|
case 'bicycling': // 修正为正确的英文值 |
||||
|
case 'cycling': |
||||
|
case '骑行': |
||||
|
return Icons.directions_bike; |
||||
|
default: |
||||
|
return Icons.navigation; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue