feat: 优化交易账户和币种选择功能
- 交易账户卡片添加总市值显示和持仓列表 - 持仓列表USDT自动排在最上面 - 交易页面添加币种选择弹窗功能 - 行情页面点击币种跳转到交易页面 - 支持从外部传入选中币种参数 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
sion
@@ -13,7 +13,9 @@ import '../../components/neon_glow.dart';
|
||||
|
||||
/// 交易页面 - Material Design 3 风格
|
||||
class TradePage extends StatefulWidget {
|
||||
const TradePage({super.key});
|
||||
final String? initialCoinCode;
|
||||
|
||||
const TradePage({super.key, this.initialCoinCode});
|
||||
|
||||
@override
|
||||
State<TradePage> createState() => _TradePageState();
|
||||
@@ -36,7 +38,23 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
|
||||
}
|
||||
|
||||
void _loadData() {
|
||||
context.read<MarketProvider>().loadCoins();
|
||||
final marketProvider = context.read<MarketProvider>();
|
||||
marketProvider.loadCoins().then((_) {
|
||||
// 如果有初始币种代码，自动选中
|
||||
if (widget.initialCoinCode != null && _selectedCoin == null) {
|
||||
final coins = marketProvider.allCoins;
|
||||
final coin = coins.firstWhere(
|
||||
(c) => c.code.toUpperCase() == widget.initialCoinCode!.toUpperCase(),
|
||||
orElse: () => coins.isNotEmpty ? coins.first : throw Exception('No coins available'),
|
||||
);
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_selectedCoin = coin;
|
||||
_priceController.text = coin.formattedPrice;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -64,9 +82,11 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
|
||||
_CoinSelector(
|
||||
selectedCoin: _selectedCoin,
|
||||
coins: market.allCoins,
|
||||
onCoinLoaded: (coin) {
|
||||
_selectedCoin = coin;
|
||||
_priceController.text = coin.formattedPrice;
|
||||
onCoinSelected: (coin) {
|
||||
setState(() {
|
||||
_selectedCoin = coin;
|
||||
_priceController.text = coin.formattedPrice;
|
||||
});
|
||||
},
|
||||
),
|
||||
SizedBox(height: AppSpacing.md),
|
||||
@@ -161,57 +181,212 @@ class _TradePageState extends State<TradePage> with AutomaticKeepAliveClientMixi
|
||||
class _CoinSelector extends StatelessWidget {
|
||||
final Coin? selectedCoin;
|
||||
final List<Coin> coins;
|
||||
final ValueChanged<Coin> onCoinLoaded;
|
||||
final ValueChanged<Coin> onCoinSelected;
|
||||
|
||||
const _CoinSelector({
|
||||
required this.selectedCoin,
|
||||
required this.coins,
|
||||
required this.onCoinLoaded,
|
||||
required this.onCoinSelected,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
// 自动选择第一个币种
|
||||
if (selectedCoin == null && coins.isNotEmpty) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => onCoinLoaded(coins.first));
|
||||
}
|
||||
return GestureDetector(
|
||||
onTap: () => _showCoinPicker(context),
|
||||
child: GlassCard(
|
||||
showNeonGlow: false,
|
||||
child: Row(
|
||||
children: [
|
||||
_CoinAvatar(icon: selectedCoin?.displayIcon),
|
||||
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
selectedCoin != null ? '${selectedCoin!.code}/USDT' : '选择币种',
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
SizedBox(height: AppSpacing.xs),
|
||||
Text(
|
||||
selectedCoin?.name ?? '点击选择交易对',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
LucideIcons.chevronDown,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return GlassCard(
|
||||
showNeonGlow: false,
|
||||
child: Row(
|
||||
children: [
|
||||
_CoinAvatar(icon: selectedCoin?.displayIcon),
|
||||
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
void _showCoinPicker(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
backgroundColor: Colors.transparent,
|
||||
isScrollControlled: true,
|
||||
builder: (ctx) => Container(
|
||||
height: MediaQuery.of(ctx).size.height * 0.7,
|
||||
decoration: BoxDecoration(
|
||||
color: isDark ? colorScheme.surface : colorScheme.surfaceContainerLowest,
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(AppRadius.xxl)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// 拖动条
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: AppSpacing.sm),
|
||||
width: 40,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.onSurfaceVariant.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
// 标题
|
||||
Padding(
|
||||
padding: EdgeInsets.all(AppSpacing.lg),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'选择币种',
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () => Navigator.of(ctx).pop(),
|
||||
child: Icon(
|
||||
LucideIcons.x,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Divider(height: 1, color: colorScheme.outlineVariant.withOpacity(0.2)),
|
||||
// 币种列表
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
padding: EdgeInsets.symmetric(vertical: AppSpacing.sm),
|
||||
itemCount: coins.length,
|
||||
itemBuilder: (ctx, index) => _buildCoinItem(coins[index], context, ctx),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCoinItem(Coin coin, BuildContext context, BuildContext sheetContext) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final isSelected = selectedCoin?.code == coin.code;
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final changeColor = coin.isUp ? AppColorScheme.up : AppColorScheme.down;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
Navigator.of(sheetContext).pop();
|
||||
onCoinSelected(coin);
|
||||
},
|
||||
child: Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.lg,
|
||||
vertical: AppSpacing.md,
|
||||
),
|
||||
color: isSelected ? colorScheme.primary.withOpacity(0.1) : Colors.transparent,
|
||||
child: Row(
|
||||
children: [
|
||||
_CoinAvatar(icon: coin.displayIcon),
|
||||
SizedBox(width: AppSpacing.md),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
coin.code,
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
SizedBox(width: AppSpacing.xs),
|
||||
Text(
|
||||
'/USDT',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: AppSpacing.xs / 2),
|
||||
Text(
|
||||
coin.name,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
selectedCoin != null ? '${selectedCoin!.code}/USDT' : '选择币种',
|
||||
'\$${coin.formattedPrice}',
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
SizedBox(height: AppSpacing.xs),
|
||||
SizedBox(height: AppSpacing.xs / 2),
|
||||
Text(
|
||||
selectedCoin?.name ?? '点击选择交易对',
|
||||
coin.formattedChange,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
color: changeColor,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
if (isSelected) ...[
|
||||
SizedBox(width: AppSpacing.sm),
|
||||
Icon(
|
||||
LucideIcons.check,
|
||||
size: 18,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user