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: [

View File

@@ -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(