From 13841b19581f6ff2b85087e5b9822daaa717b6b5 Mon Sep 17 00:00:00 2001 From: sion <450702724@qq.com> Date: Tue, 24 Mar 2026 03:06:17 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=20Clean=20Code?= =?UTF-8?q?=20=E5=8E=9F=E5=88=99=E4=BC=98=E5=8C=96=20Flutter=20=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 替换硬编码数字为 AppSpacing/AppRadius 常量 - 提升代码可读性和可维护性 - 添加必要注释说明固定尺寸的原因 优化文件: - home_page.dart: 替换魔法数字为间距系统常量 - main_page.dart: 统一使用间距系统常量 Co-Authored-By: Claude Opus 4.6 --- .../lib/ui/pages/home/home_page.dart | 91 ++++++++++--------- .../lib/ui/pages/main/main_page.dart | 35 +++---- 2 files changed, 66 insertions(+), 60 deletions(-) diff --git a/flutter_monisuo/lib/ui/pages/home/home_page.dart b/flutter_monisuo/lib/ui/pages/home/home_page.dart index 63db3ce..52d35a2 100644 --- a/flutter_monisuo/lib/ui/pages/home/home_page.dart +++ b/flutter_monisuo/lib/ui/pages/home/home_page.dart @@ -48,26 +48,31 @@ class _HomePageState extends State with AutomaticKeepAliveClientMixin color: colorScheme.primary, child: SingleChildScrollView( physics: const AlwaysScrollableScrollPhysics(), - padding: const EdgeInsets.fromLTRB(24, 8, 24, 100), + padding: EdgeInsets.only( + left: AppSpacing.lg, + right: AppSpacing.lg, + top: AppSpacing.sm, + bottom: 100, // 底部留出导航栏空间 + ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 用户问候 _GreetingSection().animate().fadeIn(duration: 300.ms).slideX(begin: -0.1, end: 0), - const SizedBox(height: 16), + SizedBox(height: AppSpacing.md), // 玻璃拟态余额卡片 _GlassBalanceCard(overview: provider.overview) .animate() .fadeIn(duration: 400.ms, delay: 100.ms) .slideY(begin: 0.1, end: 0), - const SizedBox(height: 24), + SizedBox(height: AppSpacing.lg), // 快捷操作 _QuickActionsGrid( onDeposit: _showDeposit, onWithdraw: _showWithdraw, onTransfer: _showTransfer, ).animate().fadeIn(duration: 500.ms, delay: 200.ms), - const SizedBox(height: 32), + SizedBox(height: AppSpacing.xl), // 持仓部分 _HoldingsSection(holdings: provider.holdings) .animate() @@ -201,7 +206,7 @@ class _GreetingSection extends StatelessWidget { letterSpacing: 0.5, ), ), - const SizedBox(height: 4), + SizedBox(height: AppSpacing.xs), Text( '${auth.user?.username ?? '用户'}', style: TextStyle( @@ -230,10 +235,10 @@ class _GlassBalanceCard extends StatelessWidget { return Container( width: double.infinity, - padding: const EdgeInsets.all(32), + padding: EdgeInsets.all(AppSpacing.xl), decoration: BoxDecoration( color: colorScheme.surfaceBright.withOpacity(isDark ? 0.4 : 0.6), - borderRadius: BorderRadius.circular(32), + borderRadius: BorderRadius.circular(AppRadius.xxl + AppSpacing.sm), border: Border.all( color: colorScheme.outlineVariant.withOpacity(0.1), ), @@ -242,10 +247,10 @@ class _GlassBalanceCard extends StatelessWidget { children: [ // 装饰性发光 - 右上 Positioned( - top: -48, - right: -48, + top: -AppSpacing.xxl, + right: -AppSpacing.xxl, child: Container( - width: 128, + width: 128, // 装饰性元素保持固定尺寸 height: 128, decoration: BoxDecoration( shape: BoxShape.circle, @@ -255,10 +260,10 @@ class _GlassBalanceCard extends StatelessWidget { ), // 装饰性发光 - 左下 Positioned( - bottom: -48, - left: -48, + bottom: -AppSpacing.xxl, + left: -AppSpacing.xxl, child: Container( - width: 128, + width: 128, // 装饰性元素保持固定尺寸 height: 128, decoration: BoxDecoration( shape: BoxShape.circle, @@ -290,7 +295,7 @@ class _GlassBalanceCard extends StatelessWidget { ), ], ), - const SizedBox(height: 8), + SizedBox(height: AppSpacing.sm), // 余额数值 Row( crossAxisAlignment: CrossAxisAlignment.end, @@ -318,13 +323,13 @@ class _GlassBalanceCard extends StatelessWidget { ), ], ), - const SizedBox(height: 16), + SizedBox(height: AppSpacing.md), // 今日盈亏 Container( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), + padding: EdgeInsets.symmetric(horizontal: AppSpacing.sm, vertical: AppSpacing.xs), decoration: BoxDecoration( color: AppColorScheme.up.withOpacity(0.1), - borderRadius: BorderRadius.circular(8), + borderRadius: BorderRadius.circular(AppRadius.md), ), child: Row( mainAxisSize: MainAxisSize.min, @@ -334,7 +339,7 @@ class _GlassBalanceCard extends StatelessWidget { color: AppColorScheme.up, size: 16, ), - const SizedBox(width: 4), + SizedBox(width: AppSpacing.xs), Text( '+0.00%', style: TextStyle( @@ -343,7 +348,7 @@ class _GlassBalanceCard extends StatelessWidget { fontSize: 14, ), ), - const SizedBox(width: 8), + SizedBox(width: AppSpacing.sm), Text( "Today's PNL", style: TextStyle( @@ -470,7 +475,7 @@ class _QuickActionBtnState extends State<_QuickActionBtn> { size: 24, ), ), - const SizedBox(height: 8), + SizedBox(height: AppSpacing.sm), Text( widget.label, style: TextStyle( @@ -533,7 +538,7 @@ class _HoldingsSection extends StatelessWidget { ), ], ), - const SizedBox(height: 16), + SizedBox(height: AppSpacing.md), // 持仓内容 holdings.isEmpty ? const _EmptyHoldings() : _HoldingsList(holdings: holdings), ], @@ -552,10 +557,10 @@ class _EmptyHoldings extends StatelessWidget { return Container( width: double.infinity, - padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 24), + padding: EdgeInsets.symmetric(vertical: AppSpacing.xxl, horizontal: AppSpacing.lg), decoration: BoxDecoration( color: colorScheme.surfaceContainerLow.withOpacity(0.5), - borderRadius: BorderRadius.circular(40), + borderRadius: BorderRadius.circular(AppRadius.xxl + AppSpacing.xl), border: Border.all( color: colorScheme.outlineVariant.withOpacity(0.1), ), @@ -574,7 +579,7 @@ class _EmptyHoldings extends StatelessWidget { angle: 0.2, child: Container( decoration: BoxDecoration( - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(AppRadius.xxl), gradient: LinearGradient( colors: [ colorScheme.primary.withOpacity(isDark ? 0.2 : 0.1), @@ -589,19 +594,19 @@ class _EmptyHoldings extends StatelessWidget { Positioned.fill( child: Center( child: Container( - width: 80, + width: 80, // 图标容器保持固定尺寸 height: 80, decoration: BoxDecoration( color: colorScheme.surfaceContainerHighest, - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(AppRadius.xxl), border: Border.all( color: colorScheme.outlineVariant.withOpacity(0.2), ), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(isDark ? 0.3 : 0.1), - blurRadius: 24, - offset: const Offset(0, 8), + blurRadius: AppSpacing.lg, + offset: Offset(0, AppSpacing.sm), ), ], ), @@ -615,10 +620,10 @@ class _EmptyHoldings extends StatelessWidget { ), // 代币图标 Positioned( - top: 8, - right: 16, + top: AppSpacing.sm, + right: AppSpacing.md, child: Container( - width: 40, + width: 40, // 小图标保持固定尺寸 height: 40, decoration: BoxDecoration( shape: BoxShape.circle, @@ -637,7 +642,7 @@ class _EmptyHoldings extends StatelessWidget { ], ), ), - const SizedBox(height: 24), + SizedBox(height: AppSpacing.lg), Text( 'No holdings yet.', style: TextStyle( @@ -646,7 +651,7 @@ class _EmptyHoldings extends StatelessWidget { fontSize: 16, ), ), - const SizedBox(height: 8), + SizedBox(height: AppSpacing.sm), Text( '暂无持仓，快去交易吧~', style: TextStyle( @@ -654,16 +659,16 @@ class _EmptyHoldings extends StatelessWidget { fontSize: 14, ), ), - const SizedBox(height: 32), + SizedBox(height: AppSpacing.xl), // 开始交易按钮 Container( decoration: BoxDecoration( gradient: isDark ? AppColorScheme.darkCtaGradient : AppColorScheme.lightCtaGradient, - borderRadius: BorderRadius.circular(12), + borderRadius: BorderRadius.circular(AppRadius.lg), boxShadow: [ BoxShadow( color: colorScheme.primary.withOpacity(isDark ? 0.3 : 0.2), - blurRadius: 30, + blurRadius: 30, // 大模糊半径保持固定 offset: const Offset(0, 10), ), ], @@ -672,9 +677,9 @@ class _EmptyHoldings extends StatelessWidget { color: Colors.transparent, child: InkWell( onTap: () {}, - borderRadius: BorderRadius.circular(12), + borderRadius: BorderRadius.circular(AppRadius.lg), child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 16), + padding: EdgeInsets.symmetric(horizontal: 40, vertical: AppSpacing.md), child: Text( 'Start Trading', style: TextStyle( @@ -708,7 +713,7 @@ class _HoldingsList extends StatelessWidget { return Container( decoration: BoxDecoration( color: colorScheme.surface.withOpacity(0.5), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(AppRadius.xxl), border: Border.all( color: colorScheme.outlineVariant.withOpacity(0.1), ), @@ -716,7 +721,7 @@ class _HoldingsList extends StatelessWidget { child: ListView.separated( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), - padding: const EdgeInsets.all(16), + padding: EdgeInsets.all(AppSpacing.md), itemCount: displayHoldings.length, separatorBuilder: (_, __) => Divider( color: colorScheme.outlineVariant.withOpacity(0.1), @@ -743,14 +748,14 @@ class _HoldingItem extends StatelessWidget { final colorScheme = Theme.of(context).colorScheme; return Padding( - padding: const EdgeInsets.symmetric(vertical: 12), + padding: EdgeInsets.symmetric(vertical: AppSpacing.sm + AppSpacing.xs), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ CircleAvatar( - radius: 18, + radius: 18, // 头像半径保持固定 backgroundColor: colorScheme.primary.withOpacity(0.1), child: Text( holding.coinCode.substring(0, 1), @@ -760,7 +765,7 @@ class _HoldingItem extends StatelessWidget { ), ), ), - const SizedBox(width: 12), + SizedBox(width: AppSpacing.sm + AppSpacing.xs), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/flutter_monisuo/lib/ui/pages/main/main_page.dart b/flutter_monisuo/lib/ui/pages/main/main_page.dart index d4e9beb..d9dddae 100644 --- a/flutter_monisuo/lib/ui/pages/main/main_page.dart +++ b/flutter_monisuo/lib/ui/pages/main/main_page.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:shadcn_ui/shadcn_ui.dart'; import 'package:provider/provider.dart'; +import '../../../core/theme/app_spacing.dart'; import '../../../providers/auth_provider.dart'; import '../home/home_page.dart'; import '../market/market_page.dart'; @@ -84,22 +85,22 @@ class _TopAppBar extends StatelessWidget { final isDark = Theme.of(context).brightness == Brightness.dark; return Container( - height: 64, + height: 64, // 顶部导航栏高度保持固定 decoration: BoxDecoration( color: colorScheme.surfaceBright.withOpacity(0.4), boxShadow: [ BoxShadow( color: colorScheme.primary.withOpacity(isDark ? 0.15 : 0.08), - blurRadius: 64, + blurRadius: 64, // 大模糊效果保持固定 offset: const Offset(0, 32), ), ], ), child: ClipRRect( child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 24, sigmaY: 24), + filter: ImageFilter.blur(sigmaX: AppSpacing.xl, sigmaY: AppSpacing.xl), child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 24), + padding: EdgeInsets.symmetric(horizontal: AppSpacing.lg), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -110,7 +111,7 @@ class _TopAppBar extends StatelessWidget { children: [ // 头像 Container( - width: 32, + width: 32, // 头像尺寸保持固定 height: 32, decoration: BoxDecoration( shape: BoxShape.circle, @@ -130,7 +131,7 @@ class _TopAppBar extends StatelessWidget { ), ), ), - const SizedBox(width: 12), + SizedBox(width: AppSpacing.sm + AppSpacing.xs), // 标题 Text( '模拟所', @@ -152,7 +153,7 @@ class _TopAppBar extends StatelessWidget { icon: LucideIcons.search, onTap: () {}, ), - const SizedBox(width: 8), + SizedBox(width: AppSpacing.sm), _IconBtn( icon: LucideIcons.bell, onTap: () {}, @@ -182,7 +183,7 @@ class _IconBtn extends StatelessWidget { return GestureDetector( onTap: onTap, child: Container( - padding: const EdgeInsets.all(8), + padding: EdgeInsets.all(AppSpacing.sm), child: Icon( icon, color: colorScheme.onSurfaceVariant, @@ -212,7 +213,7 @@ class _BottomNavBar extends StatelessWidget { return Container( decoration: BoxDecoration( color: colorScheme.surfaceContainerLow.withOpacity(0.8), - borderRadius: const BorderRadius.vertical(top: Radius.circular(32)), + borderRadius: BorderRadius.vertical(top: Radius.circular(AppRadius.xxl + AppSpacing.sm)), border: Border( top: BorderSide( color: colorScheme.outlineVariant.withOpacity(0.15), @@ -221,18 +222,18 @@ class _BottomNavBar extends StatelessWidget { boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.5), - blurRadius: 40, + blurRadius: 40, // 阴影效果保持固定 offset: const Offset(0, -10), ), ], ), child: ClipRRect( - borderRadius: const BorderRadius.vertical(top: Radius.circular(32)), + borderRadius: BorderRadius.vertical(top: Radius.circular(AppRadius.xxl + AppSpacing.sm)), child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16), + filter: ImageFilter.blur(sigmaX: AppSpacing.md, sigmaY: AppSpacing.md), child: SafeArea( child: Padding( - padding: const EdgeInsets.fromLTRB(16, 8, 16, 24), + padding: EdgeInsets.fromLTRB(AppSpacing.md, AppSpacing.sm, AppSpacing.md, AppSpacing.lg), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: items.asMap().entries.map((entry) { @@ -273,15 +274,15 @@ class _NavItemWidget extends StatelessWidget { behavior: HitTestBehavior.opaque, child: AnimatedContainer( duration: const Duration(milliseconds: 300), - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), + padding: EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: AppSpacing.sm), decoration: isSelected ? BoxDecoration( color: colorScheme.primary.withOpacity(0.1), - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.circular(AppSpacing.md), boxShadow: [ BoxShadow( color: colorScheme.primary.withOpacity(0.3), - blurRadius: 15, + blurRadius: 15, // 发光效果保持固定 spreadRadius: 0, ), ], @@ -295,7 +296,7 @@ class _NavItemWidget extends StatelessWidget { color: color, size: 24, ), - const SizedBox(height: 4), + SizedBox(height: AppSpacing.xs), Text( item.label, style: TextStyle(