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

refactor: 优化多个视图的布局和文本显示 

- 修复登录控制器中的缩进问题并更新验证码提示文本
- 重构首页断开连接信息的布局，改进多行文本显示
- 优化探索视图的文本布局，支持多行显示和更好的对齐
- 改进设置视图的更新按钮布局和文本显示
- 重构导航卡片布局，优化图标对齐和文本显示
weicu
lxm 1 year ago
parent
439dca672a
commit
c976c97e18
5 changed files with 304 additions and 229 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 126
      lib/modules/agent/views/navigation_card.dart
  2. 21
      lib/modules/explore/views/explore_view.dart
  3. 26
      lib/modules/home/views/home_view.dart
  4. 2
      lib/modules/login/controllers/login_controller.dart
  5. 54
      lib/modules/settings/views/settings_view.dart

126
lib/modules/agent/views/navigation_card.dart
View File

@ -221,52 +221,53 @@ Widget navigationCard(
// 底部：目的地信息和操作按钮 // 底部：目的地信息和操作按钮
Container( Container(
padding: EdgeInsets.fromLTRB(20.w, 8.h, 20.w, 16.h), padding: EdgeInsets.fromLTRB(20.w, 8.h, 20.w, 16.h),
child: Stack(
children: [
// 目的地和距离时间信息
Padding(
padding: EdgeInsets.only(right: 70.w), // 为右下角按钮留出空间
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// 路径显示：当前位置 → 目的地 // 第一层：起点 → 目的地信息（独占整个宽度）
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center, // 确保垂直居中对齐
children: [ children: [
// 起点图标 // 起点图标 - 统一图标容器宽度，确保对齐
Icon( SizedBox(
width: 16.sp, // 固定图标容器宽度
child: Icon(
Icons.my_location, Icons.my_location,
size: 16.sp, size: 15.sp, // 统一图标大小
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
), ),
// SizedBox(width: 6.w), ),
// // 当前位置文本 SizedBox(width: 6.w), // 统一间距
// Text( // 当前位置文本
// 'currentLocation'.tr, // 当前位置 Text(
// style: TextStyle( 'currentLocation'.tr, // 当前位置
// fontSize: 14.sp, style: TextStyle(
// fontWeight: FontWeight.w500, fontSize: 14.sp,
// color: isDarkMode fontWeight: FontWeight.w500,
// ? Colors.white70 color: isDarkMode
// : Colors.black54, ? Colors.white70
// ), : Colors.black54,
// ), height: 1.3, // 设置行高，提升多行文本可读性
),
softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
),
SizedBox(width: 8.w), SizedBox(width: 8.w),
// 箭头图标 // 箭头图标
Icon( Icon(
Icons.arrow_forward, Icons.arrow_forward,
size: 16.sp, size: 15.sp, // 统一图标大小
color: color: isDarkMode ? Colors.white54 : Colors.black45,
isDarkMode ? Colors.white54 : Colors.black45,
), ),
SizedBox(width: 8.w), SizedBox(width: 8.w),
// 目的地图标 // 目的地图标
Icon( Icon(
Icons.location_on, Icons.location_on,
size: 16.sp, size: 15.sp, // 统一图标大小
color: Colors.red, color: Colors.red,
), ),
SizedBox(width: 6.w), SizedBox(width: 6.w), // 统一间距
// 目的地名称 // 目的地名称 - 使用Expanded确保自动换行
Expanded( Expanded(
child: Text( child: Text(
destination, destination,
@ -276,34 +277,52 @@ Widget navigationCard(
color: isDarkMode color: isDarkMode
? Colors.white ? Colors.white
: Colors.black87, : Colors.black87,
height: 1.2, // 设置行高，提升多行文本可读性
), ),
maxLines: 1, softWrap: true, // 启用软换行
overflow: TextOverflow.ellipsis, overflow: TextOverflow.visible, // 确保文本完全显示
), ),
), ),
], ],
), ),
SizedBox(height: 4.h),
// 距离和时间信息 SizedBox(height: 4.h), // 第一层和第二层之间的间距
Column(
// 第二层：距离时间信息（左侧）+ 导航按钮（右侧）
Row(
crossAxisAlignment: CrossAxisAlignment.end, // 底部对齐
children: [
// 左侧：距离和时间信息
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// 距离信息 // 距离信息
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center, // 确保垂直居中对齐
children: [ children: [
Icon( // 距离图标 - 统一图标容器宽度，确保与第一层对齐
SizedBox(
width: 16.sp, // 与第一层图标容器宽度一致
child: Icon(
Icons.straighten, Icons.straighten,
size: 14.sp, size: 15.sp, // 统一图标大小
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
), ),
SizedBox(width: 4.w), ),
Text( SizedBox(width: 6.w), // 与第一层间距一致
Flexible(
child: Text(
formatDistance( formatDistance(
modes[currentIndex]["distance"]), modes[currentIndex]["distance"]),
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
height: 1.3, // 设置行高，提升多行文本可读性
),
softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
), ),
], ],
@ -311,22 +330,30 @@ Widget navigationCard(
SizedBox(height: 4.h), SizedBox(height: 4.h),
// 时间信息 // 时间信息
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center, // 确保垂直居中对齐
children: [ children: [
Icon( // 时间图标 - 统一图标容器宽度，确保与第一层对齐
SizedBox(
width: 16.sp, // 与第一层图标容器宽度一致
child: Icon(
Icons.access_time, Icons.access_time,
size: 14.sp, size: 15.sp, // 统一图标大小
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
), ),
SizedBox(width: 4.w), ),
Text( SizedBox(width: 6.w), // 与第一层间距一致
Flexible(
child: Text(
'${'approximate'.tr}${formatDuration(modes[currentIndex]["duration"])}', // 约 '${'approximate'.tr}${formatDuration(modes[currentIndex]["duration"])}', // 约
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
height: 1.3, // 设置行高，提升多行文本可读性
), ),
softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
],
), ),
], ],
), ),
@ -348,18 +375,21 @@ Widget navigationCard(
fontSize: 12.sp, fontSize: 12.sp,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
height: 1.3, // 设置行高，提升多行文本可读性
), ),
softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
), ),
], ],
], ],
), ),
), ),
// 开始导航按钮 - 绝对定位到右下角
Positioned( SizedBox(width: 16.w), // 左右内容之间的间距
right: 0,
bottom: 0, // 右侧：开始导航按钮
child: Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
colors: [ colors: [
@ -372,8 +402,7 @@ Widget navigationCard(
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: color: Theme.of(context).primaryColor.withOpacity(0.3),
Theme.of(context).primaryColor.withOpacity(0.3),
blurRadius: 8, blurRadius: 8,
offset: const Offset(0, 2), offset: const Offset(0, 2),
), ),
@ -400,6 +429,7 @@ Widget navigationCard(
), ),
), ),
), ),
],
), ),
], ],
), ),

21
lib/modules/explore/views/explore_view.dart
View File

@ -208,31 +208,44 @@ class ExploreView extends GetView<ExploreController> {
), ),
// 文本内容 // 文本内容
Padding( Positioned(
bottom: 0,
left: 0,
right: 0,
child: Padding(
padding: EdgeInsets.all(24.w), padding: EdgeInsets.all(24.w),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.end, mainAxisSize: MainAxisSize.min, // 使用最小尺寸，避免占用过多空间
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// 标题文本 - 支持多行显示
Text( Text(
title, title,
style: TextStyle( style: TextStyle(
fontSize: 22.sp, fontSize: 22.sp,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white, color: Colors.white,
height: 1.2, // 设置行高，提升多行文本可读性
), ),
softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
SizedBox(height: 4.h), SizedBox(height: 6.h), // 稍微增加间距，适应多行布局
// 描述文本 - 支持多行显示
Text( Text(
description, description,
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: Colors.white.withOpacity(0.8), color: Colors.white.withOpacity(0.8),
height: 1.3, // 设置行高，提升多行文本可读性
), ),
softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
], ],
), ),
), ),
),
], ],
); );
} }
@ -341,7 +354,7 @@ class ExploreView extends GetView<ExploreController> {
fontSize: 12.sp, fontSize: 12.sp,
color: isDarkMode ? Colors.grey[400] : Colors.grey[600], color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
), ),
maxLines: 1, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
], ],

26
lib/modules/home/views/home_view.dart
View File

@ -519,7 +519,6 @@ class HomeView extends GetView<HomeController> {
Widget _buildDisconnectedInfo(bool isDarkMode) { Widget _buildDisconnectedInfo(bool isDarkMode) {
return Container( return Container(
padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 12.w), padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 12.w),
alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
color: isDarkMode ? Colors.grey[900] : Colors.grey[100], color: isDarkMode ? Colors.grey[900] : Colors.grey[100],
borderRadius: BorderRadius.circular(10.r), borderRadius: BorderRadius.circular(10.r),
@ -528,27 +527,38 @@ class HomeView extends GetView<HomeController> {
width: 1, width: 1,
), ),
), ),
child: IntrinsicHeight(
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, // 整体居中对齐
crossAxisAlignment: CrossAxisAlignment.start, // 顶部对齐，适应多行文本
children: [ children: [
Icon( // 图标容器，与文本第一行基线对齐
Padding(
padding: EdgeInsets.only(top: 1.h), // 微调图标位置，与文本第一行基线对齐
child: Icon(
Icons.bluetooth_disabled, Icons.bluetooth_disabled,
size: 14.sp, size: 14.sp,
color: isDarkMode ? Colors.grey[400] : Colors.grey[700], color: isDarkMode ? Colors.grey[400] : Colors.grey[700],
), ),
SizedBox(height: 12.h), ),
Text( SizedBox(width: 6.w), // 图标和文本间距
// 文本容器，使用Flexible确保自动换行且保持居中效果
Flexible(
child: Text(
'disconnectedDevice'.tr, // 未连接设备，点击下方按钮连接 'disconnectedDevice'.tr, // 未连接设备，点击下方按钮连接
style: TextStyle( style: TextStyle(
fontSize: 12.sp, fontSize: 12.sp,
color: isDarkMode ? Colors.grey[400] : Colors.grey[700], color: isDarkMode ? Colors.grey[400] : Colors.grey[700],
// height: 1.4, height: 1.4, // 启用行高，提升多行文本可读性
// fontWeight: FontWeight.w500, ),
textAlign: TextAlign.center, // 文本居中对齐
softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
//textAlign: TextAlign.center,
), ),
], ],
), ),
),
); );
} }

2
lib/modules/login/controllers/login_controller.dart
View File

@ -731,7 +731,7 @@ class LoginController extends GetxController {
if (!isVerificationCodeComplete()) { if (!isVerificationCodeComplete()) {
Get.snackbar( Get.snackbar(
'tip'.tr, 'tip'.tr,
'pleaseEnterVerificationCode'.tr, 'pleaseEnterCompleteCode'.tr,
snackPosition: SnackPosition.TOP, snackPosition: SnackPosition.TOP,
backgroundColor: Colors.red.withOpacity(0.1), backgroundColor: Colors.red.withOpacity(0.1),
colorText: Colors.red, colorText: Colors.red,

54
lib/modules/settings/views/settings_view.dart
View File

@ -715,8 +715,8 @@ class SettingsView extends GetView<SettingsController> {
? ImageFilter.blur(sigmaX: 5, sigmaY: 5) ? ImageFilter.blur(sigmaX: 5, sigmaY: 5)
: ImageFilter.blur(sigmaX: 0, sigmaY: 0), : ImageFilter.blur(sigmaX: 0, sigmaY: 0),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
// 左侧应用信息区域 - 使用固定宽度
Row( Row(
children: [ children: [
Container( Container(
@ -770,18 +770,23 @@ class SettingsView extends GetView<SettingsController> {
), ),
], ],
), ),
InkWell(
// 间距
SizedBox(width: 16.w),
// 右侧检查更新按钮 - 使用Expanded确保充分利用剩余空间
Expanded(
child: InkWell(
onTap: () { onTap: () {
// 调用检查更新方法 // 调用检查更新方法
controller.checkForUpdate(); controller.checkForUpdate();
}, },
child: Container( child: Container(
constraints: BoxConstraints( constraints: BoxConstraints(
minWidth: 100.w, minHeight: 36.h, // 设置最小高度而不是宽度约束
maxWidth: 180.w,
), ),
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: 16.w, horizontal: 12.w,
vertical: 8.h, vertical: 8.h,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
@ -790,16 +795,21 @@ class SettingsView extends GetView<SettingsController> {
: Colors.blue[100], : Colors.blue[100],
borderRadius: BorderRadius.circular(16.r), borderRadius: BorderRadius.circular(16.r),
), ),
child: Center(
child: FittedBox(
fit: BoxFit.scaleDown, // 如果文本过长，自动缩小字体
child: Text( child: Text(
'checkUpdates'.tr, // 检查更新 'checkUpdates'.tr, // 检查更新
style: TextStyle( style: TextStyle(
fontSize: 12.sp, fontSize: 12.sp,
color: color: isDarkMode ? Colors.blue[300] : Colors.blue[600],
isDarkMode ? Colors.blue[300] : Colors.blue[600], height: 1.2, // 稍微减少行高，适应FittedBox
),
textAlign: TextAlign.center,
maxLines: 2, // 最多显示2行，配合FittedBox使用
),
),
), ),
overflow: TextOverflow.ellipsis, // 添加省略号
maxLines: 1, // 限制为单行
textAlign: TextAlign.center, // 保持居中
), ),
), ),
), ),
@ -905,8 +915,10 @@ class SettingsView extends GetView<SettingsController> {
fontSize: 16.sp, fontSize: 16.sp,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: isDarkMode ? Colors.white : Colors.black87, color: isDarkMode ? Colors.white : Colors.black87,
height: 1.2, // 设置行高，提升多行文本可读性
), ),
overflow: TextOverflow.ellipsis, softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
if (subtitle != null) SizedBox(height: 2.h), if (subtitle != null) SizedBox(height: 2.h),
if (subtitle != null) if (subtitle != null)
@ -915,8 +927,10 @@ class SettingsView extends GetView<SettingsController> {
style: TextStyle( style: TextStyle(
fontSize: 12.sp, fontSize: 12.sp,
color: isDarkMode ? Colors.white70 : Colors.black54, color: isDarkMode ? Colors.white70 : Colors.black54,
height: 1.3, // 设置行高，提升多行文本可读性
), ),
overflow: TextOverflow.ellipsis, softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
], ],
), ),
@ -980,8 +994,10 @@ class SettingsView extends GetView<SettingsController> {
fontSize: 16.sp, fontSize: 16.sp,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: isDarkMode ? Colors.white : Colors.black87, color: isDarkMode ? Colors.white : Colors.black87,
height: 1.2, // 设置行高，提升多行文本可读性
), ),
overflow: TextOverflow.ellipsis, softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
if (subtitle != null) SizedBox(height: 2.h), if (subtitle != null) SizedBox(height: 2.h),
if (subtitle != null) if (subtitle != null)
@ -991,8 +1007,10 @@ class SettingsView extends GetView<SettingsController> {
fontSize: 12.sp, fontSize: 12.sp,
color: color:
isDarkMode ? Colors.white70 : Colors.black54, isDarkMode ? Colors.white70 : Colors.black54,
height: 1.3, // 设置行高，提升多行文本可读性
), ),
overflow: TextOverflow.ellipsis, softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
], ],
), ),
@ -1085,8 +1103,10 @@ class SettingsView extends GetView<SettingsController> {
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: titleColor ?? color: titleColor ??
(isDarkMode ? Colors.white : Colors.black87), (isDarkMode ? Colors.white : Colors.black87),
height: 1.2, // 设置行高，提升多行文本可读性
), ),
overflow: TextOverflow.ellipsis, softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
if (subtitle != null) SizedBox(height: 2.h), if (subtitle != null) SizedBox(height: 2.h),
if (subtitle != null) if (subtitle != null)
@ -1098,8 +1118,10 @@ class SettingsView extends GetView<SettingsController> {
(isDarkMode (isDarkMode
? Colors.white70 ? Colors.white70
: Colors.black54), : Colors.black54),
height: 1.3, // 设置行高，提升多行文本可读性
), ),
overflow: TextOverflow.ellipsis, softWrap: true, // 启用软换行
overflow: TextOverflow.visible, // 确保文本完全显示
), ),
], ],
), ),

Write Preview
Loading…
Cancel
Save