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

refactor(home_view): 优化设备连接状态显示和电池信息布局 

重构设备连接状态显示逻辑，调整电池信息布局为紧凑型设计，提升界面可读性和用户体验。同时修复部分代码格式问题，确保代码风格一致。
weicu
lxm 1 year ago
parent
1f905c5c43
commit
13ef7fad1e
1 changed files with 200 additions and 182 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. 382
      lib/modules/home/views/home_view.dart

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

@ -1,17 +1,17 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:ui';
import '../controllers/home_controller.dart'; import '../controllers/home_controller.dart';
import '../../../routes/app_pages.dart'; import '../../../routes/app_pages.dart';
import '../../../routes/app_routes.dart'; import '../../../routes/app_routes.dart';
import '../../../core/widgets/common_bottom_nav.dart'; import '../../../core/widgets/common_bottom_nav.dart';
// 导入枚举 // 导入枚举
import '../controllers/home_controller.dart' show ConnectionStatus; import '../controllers/home_controller.dart' show ConnectionStatus;
// 呼吸光动画组件 // 呼吸灯动画组件
class AnimatedPulsing extends StatefulWidget { class AnimatedPulsing extends StatefulWidget {
const AnimatedPulsing({Key? key}) : super(key: key);
@override @override
_AnimatedPulsingState createState() => _AnimatedPulsingState(); _AnimatedPulsingState createState() => _AnimatedPulsingState();
} }
@ -25,14 +25,11 @@ class _AnimatedPulsingState extends State<AnimatedPulsing>
void initState() { void initState() {
super.initState(); super.initState();
_controller = AnimationController( _controller = AnimationController(
duration: Duration(seconds: 2), duration: const Duration(seconds: 2),
vsync: this, vsync: this,
)..repeat(reverse: true); )..repeat(reverse: true);
_animation = Tween<double>(begin: 0.5, end: 0.8).animate( _animation = Tween<double>(begin: 0.5, end: 0.8).animate(
CurvedAnimation( CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
parent: _controller,
curve: Curves.easeInOut,
),
); );
} }
@ -49,36 +46,36 @@ class _AnimatedPulsingState extends State<AnimatedPulsing>
builder: (context, child) { builder: (context, child) {
return Opacity( return Opacity(
opacity: _animation.value, opacity: _animation.value,
child: Container( child: child,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.r),
gradient: RadialGradient(
colors: [
Colors.white.withOpacity(0.3),
Colors.transparent,
],
center: Alignment.topRight,
radius: 0.8,
stops: [0.0, 1.0],
),
),
),
); );
}, },
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.r),
gradient: RadialGradient(
colors: [
Colors.white.withOpacity(0.3),
Colors.transparent,
],
center: Alignment.topRight,
radius: 0.8,
stops: const [0.0, 1.0],
),
),
),
); );
} }
} }
//首页视图 // 首页视图
class HomeView extends GetView<HomeController> { class HomeView extends GetView<HomeController> {
const HomeView({Key? key}) : super(key: key); const HomeView({Key? key}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final bool isDarkMode = Theme.of(context).brightness == Brightness.dark; final bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
return Scaffold( return Scaffold(
backgroundColor: isDarkMode ? Colors.black : Color(0xFFF9FAFC), backgroundColor: isDarkMode ? Colors.black : const Color(0xFFF9FAFC),
body: SafeArea( body: SafeArea(
child: SingleChildScrollView( child: SingleChildScrollView(
padding: EdgeInsets.all(16.w), padding: EdgeInsets.all(16.w),
@ -210,7 +207,7 @@ class HomeView extends GetView<HomeController> {
Widget _buildDeviceStatusCard(bool isDarkMode) { Widget _buildDeviceStatusCard(bool isDarkMode) {
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: isDarkMode ? Color(0xFF1A1A1A) : Colors.white, color: isDarkMode ? const Color(0xFF1A1A1A) : Colors.white,
borderRadius: BorderRadius.circular(16.r), borderRadius: BorderRadius.circular(16.r),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
@ -229,20 +226,22 @@ class HomeView extends GetView<HomeController> {
// 设备信息 // 设备信息
SizedBox(height: 12.h), SizedBox(height: 12.h),
Obx(() { Obx(() {
print('连接状态: ${controller.connectionStatus}'); // 添加调试打印
print('错误信息: ${controller.connectionErrorMsg}'); // 添加调试打印
// 如果连接失败且有错误信息，显示错误提示 // 如果连接失败且有错误信息，显示错误提示
if (controller.connectionStatus == ConnectionStatus.failed && if (controller.connectionStatus == ConnectionStatus.failed &&
controller.connectionErrorMsg.isNotEmpty) { controller.connectionErrorMsg.isNotEmpty) {
return _buildConnectionErrorSection(isDarkMode); return _buildConnectionErrorSection(isDarkMode); //错误提示
} }
// 如果正在连接中，显示连接中提示 // 如果正在连接中，显示连接中提示
if (controller.connectionStatus == ConnectionStatus.connecting) { if (controller.connectionStatus == ConnectionStatus.connecting) {
return _buildConnectingIndicator(); return _buildConnectingIndicator(); //连接中提示
} }
return controller.isConnected return controller.isConnected
? _buildConnectedDeviceInfo(isDarkMode) ? _buildConnectedDeviceInfo(isDarkMode) //已连接设备信息
: _buildDisconnectedInfo(isDarkMode); : _buildDisconnectedInfo(isDarkMode); //未连接提示
}), }),
// 连接按钮（仅在未连接时显示） // 连接按钮（仅在未连接时显示）
@ -285,6 +284,7 @@ class HomeView extends GetView<HomeController> {
Obx(() => Row( Obx(() => Row(
children: [ children: [
Container( Container(
//状态指示灯
width: 8.w, width: 8.w,
height: 8.w, height: 8.w,
decoration: BoxDecoration( decoration: BoxDecoration(
@ -344,7 +344,8 @@ class HomeView extends GetView<HomeController> {
isDarkMode ? Colors.red[900]!.withOpacity(0.2) : Colors.red[50], isDarkMode ? Colors.red[900]!.withOpacity(0.2) : Colors.red[50],
borderRadius: BorderRadius.circular(12.r), borderRadius: BorderRadius.circular(12.r),
border: Border.all( border: Border.all(
color: isDarkMode ? Colors.red[800]! : Colors.red[200]!), color: isDarkMode ? Colors.red[800]! : Colors.red[200]!,
),
), ),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -410,7 +411,7 @@ class HomeView extends GetView<HomeController> {
), ),
SizedBox(height: 12.h), SizedBox(height: 12.h),
Text( Text(
'connectingDevice'.tr, // 正在连接设备... 'connectingDevice'.tr,
style: TextStyle( style: TextStyle(
fontSize: 13.sp, fontSize: 13.sp,
color: Colors.blue, color: Colors.blue,
@ -423,13 +424,45 @@ class HomeView extends GetView<HomeController> {
); );
} }
// 已连接设备信息 // 已连接设备信息（新增设备名称 + 信号强度 + 电池信息）
Widget _buildConnectedDeviceInfo(bool isDarkMode) { Widget _buildConnectedDeviceInfo(bool isDarkMode) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// 电池状态网格布局 Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
'${'connectedTo'.tr}：${controller.getDeviceName()}',
style: TextStyle(
fontSize: 13.sp,
fontWeight: FontWeight.w500,
color: isDarkMode ? Colors.grey[300] : Colors.grey[700],
),
overflow: TextOverflow.ellipsis,
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.1),
borderRadius: BorderRadius.circular(4.r),
),
child: Text(
'${'signal'.tr}: ${controller.getSignalStrength()}',
style: TextStyle(
fontSize: 11.sp,
color: Colors.blue[700],
),
),
),
],
),
SizedBox(height: 12.h),
_buildBatteryInfoGrid(isDarkMode), _buildBatteryInfoGrid(isDarkMode),
SizedBox(height: 16.h),
_buildDeviceDetailsCard(isDarkMode),
], ],
); );
} }
@ -441,53 +474,66 @@ class HomeView extends GetView<HomeController> {
final leftBattery = controller.leftEarBattery; final leftBattery = controller.leftEarBattery;
final rightBattery = controller.rightEarBattery; final rightBattery = controller.rightEarBattery;
final caseBattery = controller.caseBattery; final caseBattery = controller.caseBattery;
// 获取充电状态 // 获取充电状态
final leftEarCharging = controller.leftEarCharging; final leftEarCharging = controller.leftEarCharging;
final rightEarCharging = controller.rightEarCharging; final rightEarCharging = controller.rightEarCharging;
final caseCharging = controller.caseCharging; final caseCharging = controller.caseCharging;
return GridView.count( // 使用更紧凑的布局
crossAxisCount: 3, return Container(
shrinkWrap: true, padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 4.w),
physics: NeverScrollableScrollPhysics(), decoration: BoxDecoration(
crossAxisSpacing: 12.w, color: isDarkMode ? Colors.grey[900] : Colors.grey[50],
childAspectRatio: 0.85, borderRadius: BorderRadius.circular(12.r),
children: [ ),
// 左耳机 child: Row(
_buildBatteryGridItem( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
icon: Icons.headphones, children: [
label: '左耳机', // 左耳机
batteryLevel: leftBattery.value, _buildCompactBatteryItem(
isCharging: leftEarCharging.value, label: '左',
isDarkMode: isDarkMode, batteryLevel: leftBattery.value,
), isCharging: leftEarCharging.value,
isDarkMode: isDarkMode,
),
// 右耳机 // 分隔线
_buildBatteryGridItem( Container(
icon: Icons.headphones, height: 30.h,
label: '右耳机', width: 1,
batteryLevel: rightBattery.value, color: isDarkMode ? Colors.grey[800] : Colors.grey[300],
isCharging: rightEarCharging.value, ),
isDarkMode: isDarkMode,
),
// 充电盒 // 右耳机
_buildBatteryGridItem( _buildCompactBatteryItem(
icon: Icons.charging_station, label: '右',
label: '充电盒', batteryLevel: rightBattery.value,
batteryLevel: caseBattery.value, isCharging: rightEarCharging.value,
isCharging: caseCharging.value, isDarkMode: isDarkMode,
isDarkMode: isDarkMode, ),
),
], // 分隔线
Container(
height: 30.h,
width: 1,
color: isDarkMode ? Colors.grey[800] : Colors.grey[300],
),
// 充电盒
_buildCompactBatteryItem(
label: '充电盒',
batteryLevel: caseBattery.value,
isCharging: caseCharging.value,
isDarkMode: isDarkMode,
),
],
),
); );
}); });
} }
// 单个电池网格项 // 紧凑型电池项
Widget _buildBatteryGridItem({ Widget _buildCompactBatteryItem({
required IconData icon,
required String label, required String label,
required int batteryLevel, required int batteryLevel,
required bool isDarkMode, required bool isDarkMode,
@ -496,7 +542,6 @@ class HomeView extends GetView<HomeController> {
// 获取电池图标和颜色 // 获取电池图标和颜色
IconData batteryIcon; IconData batteryIcon;
Color batteryColor; Color batteryColor;
if (batteryLevel > 75) { if (batteryLevel > 75) {
batteryIcon = Icons.battery_full; batteryIcon = Icons.battery_full;
batteryColor = Colors.green[600]!; batteryColor = Colors.green[600]!;
@ -505,7 +550,7 @@ class HomeView extends GetView<HomeController> {
batteryColor = Colors.green[600]!; batteryColor = Colors.green[600]!;
} else if (batteryLevel > 25) { } else if (batteryLevel > 25) {
batteryIcon = Icons.battery_4_bar; batteryIcon = Icons.battery_4_bar;
batteryColor = Colors.yellow[600]!; batteryColor = Colors.orange[600]!;
} else if (batteryLevel > 10) { } else if (batteryLevel > 10) {
batteryIcon = Icons.battery_3_bar; batteryIcon = Icons.battery_3_bar;
batteryColor = Colors.orange[600]!; batteryColor = Colors.orange[600]!;
@ -514,80 +559,52 @@ class HomeView extends GetView<HomeController> {
batteryColor = Colors.red[600]!; batteryColor = Colors.red[600]!;
} }
return Container( return Expanded(
decoration: BoxDecoration( child: Padding(
color: isDarkMode ? Colors.grey[900] : Colors.grey[100], padding: EdgeInsets.symmetric(vertical: 6.h),
borderRadius: BorderRadius.circular(12.r), child: Column(
boxShadow: [ mainAxisSize: MainAxisSize.min,
BoxShadow( children: [
color: isDarkMode // 标签
? Colors.black.withOpacity(0.1) Text(
: Colors.grey.withOpacity(0.1), label,
blurRadius: 4, style: TextStyle(
spreadRadius: 0, fontSize: 11.sp,
offset: Offset(0, 2), color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
), fontWeight: FontWeight.normal,
], ),
), textAlign: TextAlign.center,
padding: EdgeInsets.all(10.w),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 设备图标
Container(
padding: EdgeInsets.all(8.w),
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: Icon(
icon,
size: 24.sp,
color: isDarkMode ? Colors.grey[300] : Colors.grey[800],
),
),
SizedBox(height: 6.h),
// 标签
Text(
label,
style: TextStyle(
fontSize: 12.sp,
color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
fontWeight: FontWeight.normal,
), ),
textAlign: TextAlign.center, SizedBox(height: 4.h),
),
SizedBox(height: 6.h),
// 电池指示器 // 电池指示器
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon( Icon(
batteryIcon, batteryIcon,
size: 14.sp, size: 12.sp,
color: batteryColor,
),
SizedBox(width: 4.w),
Text(
'$batteryLevel%',
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w500,
color: batteryColor, color: batteryColor,
), ),
),
if (isCharging) ...[
SizedBox(width: 2.w), SizedBox(width: 2.w),
Icon( Text(
Icons.bolt, '$batteryLevel%',
size: 12.sp, style: TextStyle(
color: Colors.green[600], fontSize: 11.sp,
fontWeight: FontWeight.w500,
color: batteryColor,
),
), ),
if (isCharging)
Icon(
Icons.bolt,
size: 10.sp,
color: Colors.green[600],
),
], ],
], ),
), ],
], ),
), ),
); );
} }
@ -625,37 +642,37 @@ class HomeView extends GetView<HomeController> {
), ),
// 连接状态标签 // 连接状态标签
SizedBox(height: 10.h), // SizedBox(height: 10.h),
Container( // Container(
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), // padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
decoration: BoxDecoration( // decoration: BoxDecoration(
color: controller.getConnectionStatusColor().withOpacity(0.1), // color: controller.getConnectionStatusColor().withOpacity(0.1),
borderRadius: BorderRadius.circular(6.r), // borderRadius: BorderRadius.circular(6.r),
border: Border.all( // border: Border.all(
color: controller.getConnectionStatusColor().withOpacity(0.3), // color: controller.getConnectionStatusColor().withOpacity(0.3),
width: 1, // width: 1,
), // ),
), // ),
child: Row( // child: Row(
mainAxisSize: MainAxisSize.min, // mainAxisSize: MainAxisSize.min,
children: [ // children: [
Icon( // Icon(
Icons.check_circle_outline, // Icons.check_circle_outline,
size: 12.sp, // size: 12.sp,
color: controller.getConnectionStatusColor(), // color: controller.getConnectionStatusColor(),
), // ),
SizedBox(width: 4.w), // SizedBox(width: 4.w),
Text( // Text(
controller.getConnectionStatusText(), // controller.getConnectionStatusText(),
style: TextStyle( // style: TextStyle(
fontSize: 11.sp, // fontSize: 11.sp,
color: controller.getConnectionStatusColor(), // color: controller.getConnectionStatusColor(),
fontWeight: FontWeight.w500, // fontWeight: FontWeight.w500,
), // ),
), // ),
], // ],
), // ),
), // ),
], ],
), ),
); );
@ -701,33 +718,34 @@ class HomeView extends GetView<HomeController> {
// 未连接信息 // 未连接信息
Widget _buildDisconnectedInfo(bool isDarkMode) { Widget _buildDisconnectedInfo(bool isDarkMode) {
return Container( return Container(
padding: EdgeInsets.symmetric(vertical: 16.h, horizontal: 12.w), padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 12.w),
alignment: Alignment.center, 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(12.r), borderRadius: BorderRadius.circular(10.r),
border: Border.all( border: Border.all(
color: isDarkMode ? Colors.grey[800]! : Colors.grey[300]!, color: isDarkMode ? Colors.grey[800]! : Colors.grey[300]!,
width: 1, width: 1,
), ),
), ),
child: Column( child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon( Icon(
Icons.bluetooth_disabled, Icons.bluetooth_disabled,
size: 32.sp, size: 14.sp,
color: isDarkMode ? Colors.grey[600] : Colors.grey[500], color: isDarkMode ? Colors.grey[400] : Colors.grey[700],
), ),
SizedBox(height: 12.h), SizedBox(height: 12.h),
Text( Text(
'disconnectedDevice'.tr, // 未连接设备，点击下方按钮连接 'disconnectedDevice'.tr, // 未连接设备，点击下方按钮连接
style: TextStyle( style: TextStyle(
fontSize: 13.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, // fontWeight: FontWeight.w500,
), ),
textAlign: TextAlign.center, //textAlign: TextAlign.center,
), ),
], ],
), ),
@ -750,7 +768,7 @@ class HomeView extends GetView<HomeController> {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon(Icons.bluetooth_searching, size: 18.sp), Icon(Icons.bluetooth_searching, size: 16.sp),
SizedBox(width: 8.w), SizedBox(width: 8.w),
Text( Text(
'connectDevice'.tr, // 连接设备 'connectDevice'.tr, // 连接设备
@ -832,8 +850,8 @@ class HomeView extends GetView<HomeController> {
begin: Alignment.topLeft, begin: Alignment.topLeft,
end: Alignment.bottomRight, end: Alignment.bottomRight,
colors: [ colors: [
Color(0xFF4CAF50).withOpacity(0.3), const Color(0xFF4CAF50).withOpacity(0.3),
Color(0xFF009688).withOpacity(0.3), const Color(0xFF009688).withOpacity(0.3),
], ],
), ),
onTap: controller.openTranslation, onTap: controller.openTranslation,

Write Preview
Loading…
Cancel
Save