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

feat(ota_upgrade_view): OTA升级页面添加暗黑模式支持并优化UI布局

newdev_shunjiawei
lxm 1 year ago
parent
f6e14741e7
commit
132727785f
1 changed files with 287 additions and 90 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. 291
      lib/modules/ota_upgrade/views/ota_upgrade_view.dart

291
lib/modules/ota_upgrade/views/ota_upgrade_view.dart
View File

@ -1,129 +1,326 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import '../controllers/ota_upgrade_controller.dart'; import '../controllers/ota_upgrade_controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class OtaUpgradeView extends GetView<OtaUpgradeController> { class OtaUpgradeView extends GetView<OtaUpgradeController> {
const OtaUpgradeView({Key? key}) : super(key: key); const OtaUpgradeView({Key? key}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
return Scaffold( return Scaffold(
body: Center( backgroundColor: isDarkMode ? Colors.black : Colors.grey[100],
child: ConstrainedBox( appBar: AppBar(
constraints: BoxConstraints(maxWidth: 600), // 限制最大宽度 automaticallyImplyLeading: false,
child: SingleChildScrollView( centerTitle: true,
elevation: 0,
backgroundColor: isDarkMode ? Colors.black : Colors.white,
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
size: 20.sp,
color: isDarkMode ? Colors.white : Colors.black,
),
onPressed: () => Get.back(),
),
title: Text(
'固件升级'.tr,
style: TextStyle(
fontSize: 20.sp,
color: isDarkMode ? Colors.white : Colors.black,
),
),
),
body: SingleChildScrollView(
child: Padding( child: Padding(
padding: EdgeInsets.all(20), padding: EdgeInsets.all(20),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
// 设备图标 // 设备信息卡片
_buildDeviceIcon(), Card(
SizedBox(height: 30), elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
color: isDarkMode ? Colors.grey[900] : Colors.white,
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
_buildDeviceIcon(isDarkMode),
SizedBox(height: 20),
_buildVersionInfo(isDarkMode),
],
),
),
),
SizedBox(height: 20),
// 版本信息 // 更新说明
_buildVersionInfo(), _buildUpdateNotes(isDarkMode),
SizedBox(height: 40), SizedBox(height: 20),
// 状态显示区域 // 状态显示区域
Obx(() { Obx(() {
if (controller.isFetchingDeviceInfo.value) { if (controller.isFetchingDeviceInfo.value) {
return _buildLoadingIndicator(); return _buildLoadingIndicator(isDarkMode);
} }
if (controller.errorMessage.value.isNotEmpty) { if (controller.errorMessage.value.isNotEmpty) {
return _buildErrorInfo(); return _buildErrorInfo(isDarkMode);
} }
return _buildUpdateButton(); return _buildUpdateButton(isDarkMode);
}), }),
], ],
), ),
), ),
), ),
),
),
); );
} }
// 组件化构建方法 // 设备图标
Widget _buildDeviceIcon() => CircleAvatar( Widget _buildDeviceIcon(bool isDarkMode) => Image.asset(
radius: 60, isDarkMode
backgroundColor: Colors.blue[100], ? 'assets/images/headphone_dark.png'
child: Icon(Icons.phone_iphone, size: 60, color: Colors.blue), : 'assets/images/headphone_light.png',
height: 180.h,
fit: BoxFit.contain,
); );
Widget _buildVersionInfo() => Column( Widget _buildVersionInfo(bool isDarkMode) => Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text('当前版本', style: TextStyle(fontSize: 18, color: Colors.grey)), Row(
SizedBox(height: 8), crossAxisAlignment: CrossAxisAlignment.center, // 改为center对齐
Text('v${controller.currentVersion}', children: [
Text('当前固件版本:'.tr,
style: TextStyle(
fontSize: 18,
color: isDarkMode ? Colors.grey[300] : Colors.black)),
SizedBox(width: 8), // 改为width
Obx(() => Text('v${controller.currentVersion}',
style: TextStyle( style: TextStyle(
fontSize: 24, fontSize: 24,
fontWeight: FontWeight.bold, fontWeight: FontWeight.normal,
color: Colors.blue)), color: isDarkMode ? Colors.blue[300] : Colors.blue))),
],
),
SizedBox(height: 8), // 改为height
Row(
crossAxisAlignment: CrossAxisAlignment.center, // 改为center对齐
children: [
Text('最新固件版本:'.tr,
style: TextStyle(
fontSize: 18,
color: isDarkMode ? Colors.grey[300] : Colors.black)),
SizedBox(width: 8), // 改为width
Text('v${controller.latestVersion}',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.normal,
color: isDarkMode ? Colors.green[300] : Colors.green)),
],
),
], ],
); );
Widget _buildLoadingIndicator() => Column( // 添加固件更新说明
Widget _buildUpdateNotes(bool isDarkMode) =>
Obx(() => controller.isUpdateAvailable.value
? Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
color: isDarkMode ? Colors.grey[900] : Colors.white,
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.new_releases,
color: isDarkMode ? Colors.amber[300] : Colors.amber,
size: 20,
),
SizedBox(width: 8),
Text(
'更新内容'.tr,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: isDarkMode ? Colors.white : Colors.black,
),
),
],
),
Divider(),
SizedBox(height: 8),
// 这里可以从controller中获取更新说明，如果有的话
Text(
'1. 优化音质表现\n2. 提升连接稳定性\n3. 修复已知问题'.tr,
style: TextStyle(
fontSize: 14,
color: isDarkMode ? Colors.grey[300] : Colors.grey[800],
),
),
],
),
),
)
: SizedBox.shrink());
Widget _buildLoadingIndicator(bool isDarkMode) => Column(
children: [ children: [
CircularProgressIndicator(), CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(
isDarkMode ? Colors.blue[300] : Colors.blue),
),
SizedBox(height: 20), SizedBox(height: 20),
Text('正在连接设备...', style: TextStyle(color: Colors.grey)) Text('正在连接设备...',
style:
TextStyle(color: isDarkMode ? Colors.grey[300] : Colors.grey))
], ],
); );
Widget _buildErrorInfo() => Column( Widget _buildErrorInfo(bool isDarkMode) => Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color:
isDarkMode ? Colors.red[900]!.withOpacity(0.2) : Colors.red[50],
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isDarkMode ? Colors.red[700]! : Colors.red[200]!,
width: 1,
),
),
child: Column(
children: [ children: [
Icon(Icons.error_outline, color: Colors.red, size: 40), Icon(Icons.error_outline, color: Colors.red, size: 40),
SizedBox(height: 10), SizedBox(height: 10),
Text(controller.errorMessage.value, Text(controller.errorMessage.value,
style: TextStyle(color: Colors.red)), textAlign: TextAlign.center,
style: TextStyle(
color: isDarkMode ? Colors.red[300] : Colors.red,
fontSize: 16)),
SizedBox(height: 20), SizedBox(height: 20),
ElevatedButton( ElevatedButton.icon(
icon: Icon(Icons.refresh),
label: Text('重试连接'.tr),
style: ElevatedButton.styleFrom(
backgroundColor: isDarkMode ? Colors.blue[700] : Colors.blue,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.r),
),
),
onPressed: controller.retryConnection, onPressed: controller.retryConnection,
child: Text('重试连接'),
) )
], ],
),
); );
Widget _buildUpdateButton() { Widget _buildUpdateButton(bool isDarkMode) {
return controller.isUpdating.value return controller.isUpdating.value
? _buildProgressIndicator() ? _buildProgressIndicator(isDarkMode)
: ElevatedButton( : Container(
width: double.infinity,
padding: EdgeInsets.symmetric(vertical: 10),
child: Column(
children: [
ElevatedButton.icon(
icon: Icon(
controller.isUpdateAvailable.value
? Icons.system_update
: Icons.check_circle,
),
label: Text(
controller.isUpdateAvailable.value ? '立即更新' : '已是最新版本',
style: TextStyle(fontSize: 16),
),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: controller.isUpdateAvailable.value backgroundColor: controller.isUpdateAvailable.value
? Colors.blue ? (isDarkMode ? Colors.blue[700] : Colors.blue)
: Colors.grey, : (isDarkMode ? Colors.grey[800] : Colors.grey),
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 15), padding: EdgeInsets.symmetric(horizontal: 40, vertical: 15),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30), borderRadius: BorderRadius.circular(30),
), ),
minimumSize: Size(240, 50),
), ),
onPressed: controller.isUpdateAvailable.value onPressed: controller.isUpdateAvailable.value
? controller.startUpdate ? controller.startUpdate
: null, : null,
child: Text( ),
controller.isUpdateAvailable.value ? '立即更新' : '已是最新版本', if (controller.isUpdateAvailable.value) ...[
style: TextStyle(fontSize: 16, color: Colors.white), SizedBox(height: 8),
Text(
'建议连接WiFi并保持充电状态'.tr,
style: TextStyle(
fontSize: 14,
color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
),
),
],
],
), ),
); );
} }
Widget _buildProgressIndicator() => Column( Widget _buildProgressIndicator(bool isDarkMode) => Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color:
isDarkMode ? Colors.blue[900]!.withOpacity(0.2) : Colors.blue[50],
borderRadius: BorderRadius.circular(16),
),
child: Column(
children: [ children: [
Text('正在下载更新...'.tr,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: isDarkMode ? Colors.blue[300] : Colors.blue[700])),
SizedBox(height: 16),
SizedBox( SizedBox(
width: 200, width: 240,
child: LinearProgressIndicator( child: LinearProgressIndicator(
value: controller.downloadProgress.value, value: controller.downloadProgress.value,
backgroundColor: Colors.grey[200], backgroundColor:
valueColor: AlwaysStoppedAnimation(Colors.blue), isDarkMode ? Colors.grey[800] : Colors.grey[200],
valueColor: AlwaysStoppedAnimation(
isDarkMode ? Colors.blue[300] : Colors.blue),
minHeight: 12, minHeight: 12,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
), ),
), ),
SizedBox(height: 20), SizedBox(height: 16),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.downloading,
color: isDarkMode ? Colors.blue[300] : Colors.blue,
size: 20,
),
SizedBox(width: 8),
Text( Text(
'${(controller.downloadProgress.value * 100).toStringAsFixed(1)}%', '${(controller.downloadProgress.value * 100).toStringAsFixed(1)}%',
style: TextStyle(color: Colors.grey)) style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color:
isDarkMode ? Colors.blue[300] : Colors.blue[700])),
], ],
)
],
),
); );
} }

Write Preview
Loading…
Cancel
Save