Files
monisuo/flutter_monisuo/lib/ui/components/asset_card.dart
sion e58d2e4ca0 feat(ui): 优化组件样式并添加现代弹窗模板
- 更新 trade_button.dart 使用新颜色系统
- 更新 coin_card.dart 使用新颜色系统
- 更新 asset_card.dart 使用新颜色系统
- 创建 modern_dialog.dart 现代弹窗模板
- 创建 modern_bottom_sheet.dart 现代底部抽屉模板

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-23 14:18:56 +08:00

223 lines
5.9 KiB
Dart

import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../core/theme/app_color_scheme.dart';
/// 资产卡片组件 - 用于显示资产总览
class AssetCard extends StatelessWidget {
final String title;
final String balance;
final String? subtitle;
final String? profit;
final bool? isProfit;
final List<AssetItem>? items;
final Gradient? gradient;
final VoidCallback? onTap;
// 默认渐变色 - 使用品牌青绿色
static const defaultGradient = LinearGradient(
colors: [AppColorScheme.primaryDark, Color(0xFF00B894)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
// 深色渐变
static const darkGradient = LinearGradient(
colors: [Color(0xFF1E3A5F), Color(0xFF0D253F)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
const AssetCard({
super.key,
this.title = '总资产',
required this.balance,
this.subtitle,
this.profit,
this.isProfit,
this.items,
this.gradient,
this.onTap,
});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final cardGradient = gradient ?? defaultGradient;
return GestureDetector(
onTap: onTap,
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: cardGradient,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题行
Row(
children: [
Text(
title,
style: theme.textTheme.small.copyWith(color: Colors.white70),
),
const Spacer(),
if (onTap != null)
const Icon(
LucideIcons.chevronRight,
color: Colors.white70,
size: 18,
),
],
),
const SizedBox(height: 8),
// 余额
Text(
balance,
style: theme.textTheme.h1.copyWith(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
// 盈亏信息
if (profit != null) ...[
const SizedBox(height: 12),
Row(
children: [
Icon(
isProfit == true ? LucideIcons.trendingUp : LucideIcons.trendingDown,
color: Colors.white70,
size: 16,
),
const SizedBox(width: 6),
Text(
'盈亏: $profit',
style: theme.textTheme.small.copyWith(color: Colors.white70),
),
],
),
],
// 子项
if (items != null && items!.isNotEmpty) ...[
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: items!.map((item) => _buildItem(item)).toList(),
),
],
],
),
),
).animate().fadeIn(duration: 400.ms).slideY(begin: 0.1, end: 0);
}
Widget _buildItem(AssetItem item) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.label,
style: const TextStyle(fontSize: 12, color: Colors.white70),
),
const SizedBox(height: 4),
Text(
item.value,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
],
);
}
}
/// 资产子项
class AssetItem {
final String label;
final String value;
const AssetItem({
required this.label,
required this.value,
});
}
/// 简洁资产卡片 - 用于列表中显示
class AssetCardCompact extends StatelessWidget {
final String title;
final String balance;
final String? change;
final bool? isUp;
final VoidCallback? onTap;
const AssetCardCompact({
super.key,
required this.title,
required this.balance,
this.change,
this.isUp,
this.onTap,
});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final isValueUp = isUp ?? true;
return ShadCard(
padding: const EdgeInsets.all(16),
child: InkWell(
onTap: onTap,
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: theme.textTheme.muted,
),
const SizedBox(height: 4),
Text(
balance,
style: theme.textTheme.h3.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
),
if (change != null)
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: getChangeBackgroundColor(isValueUp),
borderRadius: BorderRadius.circular(6),
),
child: Text(
change!,
style: TextStyle(
color: getChangeColor(isValueUp),
fontWeight: FontWeight.w600,
),
),
),
],
),
),
);
}
}