✨ 新功能: - 下载16个主流币种图标(BTC, ETH, USDT, BNB, SOL等) - 创建 CoinIcon 组件,支持离线图标和兜底显示 - 更新 CoinAvatar 组件,使用新的 CoinIcon - 更新 market_page.dart 中的 _CoinAvatar 组件 📦 资源: - 图标存放在 flutter_monisuo/assets/icons/crypto/ - 使用 Cryptocurrency Icons 开源图标库 - PNG 格式,128x128 像素 🎯 特性: - 支持自定义大小 - 支持圆形背景 - 未找到图标时显示币种代码(兜底方案) - 支持深色/浅色模式 📝 修改文件: - 新增:flutter_monisuo/lib/ui/components/coin_icon.dart - 新增:flutter_monisuo/assets/icons/crypto/*.png (16个) - 修改:flutter_monisuo/pubspec.yaml - 修改:flutter_monisuo/lib/ui/pages/trade/components/coin_avatar.dart - 修改:flutter_monisuo/lib/ui/pages/market/market_page.dart - ✅ 后端构建成功 (2.0s) - ✅ Flutter Web 构建成功 (24.1s) - ⚠️ Admin: TypeScript类型错误(已知问题)
44 lines
1.3 KiB
Dart
44 lines
1.3 KiB
Dart
import 'package:flutter/material.dart';
|
||
import '../../../../core/theme/app_spacing.dart';
|
||
import '../../../../core/theme/app_theme.dart';
|
||
import '../../../components/coin_icon.dart';
|
||
|
||
/// 幣種頭像組件
|
||
///
|
||
/// 顯示幣種圖標或首字母的圓形頭像,帶主題色邊框和背景。
|
||
class CoinAvatar extends StatelessWidget {
|
||
final String? icon;
|
||
const CoinAvatar({super.key, this.icon});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
// 如果 icon 是币种代码(如 BTC, ETH),使用 CoinIcon
|
||
if (icon != null && icon!.length <= 5 && icon!.toUpperCase() == icon) {
|
||
return CoinIcon(
|
||
symbol: icon!,
|
||
size: 44,
|
||
isCircle: false,
|
||
);
|
||
}
|
||
|
||
// 否则使用原来的字母显示方式
|
||
final colorScheme = Theme.of(context).colorScheme;
|
||
return Container(
|
||
width: 44,
|
||
height: 44,
|
||
decoration: BoxDecoration(
|
||
color: colorScheme.primary.withOpacity(0.1),
|
||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||
border: Border.all(color: colorScheme.primary.withOpacity(0.2)),
|
||
),
|
||
child: Center(
|
||
child: Text(icon ?? '?',
|
||
style: AppTextStyles.displaySmall(context).copyWith(
|
||
fontSize: 20,
|
||
color: colorScheme.primary,
|
||
)),
|
||
),
|
||
);
|
||
}
|
||
}
|