sion123
02099d2a6a
Move skills system documentation from bottom to top of CLAUDE.md for better organization. Refactor Flutter asset page by extracting UI components into separate files and updating import structure for improved modularity.
89 lines
3.0 KiB
Dart
89 lines
3.0 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:google_fonts/google_fonts.dart';
|
||
import '../../../../core/theme/app_color_scheme.dart';
|
||
import '../../../../core/theme/app_spacing.dart';
|
||
import '../../../../data/models/coin.dart';
|
||
|
||
/// 价格卡片组件
|
||
///
|
||
/// 显示当前币种价格和 24h 涨跌幅。
|
||
/// 布局：大号价格(32px bold) + 涨跌幅徽章(圆角sm，涨绿背景) + "24h 变化" 副标题。
|
||
class PriceCard extends StatelessWidget {
|
||
final Coin coin;
|
||
const PriceCard({super.key, required this.coin});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final colorScheme = Theme.of(context).colorScheme;
|
||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||
final isUp = coin.isUp;
|
||
final changeColor =
|
||
isUp ? AppColorScheme.getUpColor(isDark) : AppColorScheme.getDownColor(isDark);
|
||
final changeBgColor = isUp
|
||
? AppColorScheme.getUpBackgroundColor(isDark)
|
||
: AppColorScheme.getDownBackgroundColor(isDark);
|
||
|
||
return Container(
|
||
width: double.infinity,
|
||
padding: const EdgeInsets.all(20),
|
||
decoration: BoxDecoration(
|
||
color: isDark
|
||
? colorScheme.surfaceContainer
|
||
: colorScheme.surfaceContainerLowest,
|
||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||
border: Border.all(
|
||
color: colorScheme.outlineVariant.withOpacity(0.15),
|
||
),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 价格行：大号价格 + 涨跌幅徽章
|
||
Row(
|
||
children: [
|
||
Text(
|
||
coin.formattedPrice,
|
||
style: GoogleFonts.inter(
|
||
fontSize: 32,
|
||
fontWeight: FontWeight.w700,
|
||
color: colorScheme.onSurface,
|
||
fontFeatures: [FontFeature.tabularFigures()],
|
||
),
|
||
),
|
||
const SizedBox(width: AppSpacing.sm),
|
||
// 涨跌幅徽章 - 圆角sm，涨绿背景
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: AppSpacing.sm, vertical: AppSpacing.xs),
|
||
decoration: BoxDecoration(
|
||
color: changeBgColor,
|
||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||
),
|
||
child: Text(
|
||
coin.formattedChange,
|
||
style: GoogleFonts.inter(
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.w600,
|
||
color: changeColor,
|
||
fontFeatures: [FontFeature.tabularFigures()],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: AppSpacing.sm),
|
||
// 副标题
|
||
Text(
|
||
'24h 变化',
|
||
style: GoogleFonts.inter(
|
||
fontSize: 11,
|
||
fontWeight: FontWeight.normal,
|
||
color: colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|