Files
monisuo/flutter_monisuo/lib/ui/components/coin_card.dart
2026-04-07 01:05:05 +08:00

101 lines
2.9 KiB
Dart

import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../core/theme/app_spacing.dart';
import '../../core/theme/app_theme_extension.dart';
/// 幣種卡片組件 - 用於顯示幣種信息
///
/// 設計規則:
/// - 使用 surface 層次而非邊框
/// - 圓角: xl (16px) 卡片, sm (4px) 漲跌標籤
/// - 漲跌標籤: 15% 透明度背景
class CoinCard extends StatelessWidget {
final String code;
final String name;
final String price;
final String change;
final bool isUp;
final String? icon;
final VoidCallback? onTap;
const CoinCard({
super.key,
required this.code,
required this.name,
required this.price,
required this.change,
this.isUp = true,
this.icon,
this.onTap,
});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
padding: const EdgeInsets.all(AppSpacing.md),
child: InkWell(
onTap: onTap,
child: Row(
children: [
// 圖標 - 圓形
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: theme.colorScheme.primary.withValues(alpha: 0.1),
shape: BoxShape.circle,
),
child: Center(
child: Text(
icon ?? code.substring(0, 1),
style: TextStyle(
fontSize: 16,
color: theme.colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
),
),
const SizedBox(width: AppSpacing.sm),
// 名稱
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'$code/USDT',
style: theme.textTheme.large.copyWith(
fontWeight: FontWeight.bold,
),
),
Text(
name,
style: theme.textTheme.muted,
),
],
),
),
// 漲跌幅 - Dynamic Chip
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: isUp ? context.appColors.upBackground : context.appColors.downBackground,
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: Text(
change,
style: TextStyle(
color: isUp ? context.appColors.up : context.appColors.down,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
);
}
}