refactor: 使用 Clean Code 原则优化 Flutter 代码

- 替换硬编码数字为 AppSpacing/AppRadius 常量
- 提升代码可读性和可维护性
- 添加必要注释说明固定尺寸的原因

优化文件:
- home_page.dart: 替换魔法数字为间距系统常量
- main_page.dart: 统一使用间距系统常量

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-24 03:06:17 +08:00
parent 667fdf4270
commit 13841b1958
2 changed files with 66 additions and 60 deletions

View File

@@ -48,26 +48,31 @@ class _HomePageState extends State<HomePage> 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: [