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:
@@ -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: [
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user