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

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

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

Write Preview
Loading…
Cancel
Save