sion/monisuo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化交易账户和币种选择功能

Browse Source 
- 交易账户卡片添加总市值显示和持仓列表
- 持仓列表USDT自动排在最上面
- 交易页面添加币种选择弹窗功能
- 行情页面点击币种跳转到交易页面
- 支持从外部传入选中币种参数

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
sion
2026-03-25 23:59:50 +08:00
parent 56142ed5f2
commit 396b81d6d9
4 changed files with 434 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
flutter_monisuo/lib/ui/pages/asset/asset_page.dart
View File

@@ -63,7 +63,10 @@ class _AssetPageState extends State<AssetPage> with AutomaticKeepAliveClientMixi
SizedBox(height: AppSpacing.md),
_activeTab == 0
? _FundAccountCard(provider: provider)
: _TradeAccountCard(holdings: provider.holdings),
: _TradeAccountCard(
holdings: provider.holdings,
tradeBalance: provider.overview?.tradeBalance,
),
],
),
),
@@ -327,40 +330,116 @@ class _FundAccountCard extends StatelessWidget {
/// 交易账户卡片 - Glass Panel 风格
class _TradeAccountCard extends StatelessWidget {
final List holdings;
final String? tradeBalance;
const _TradeAccountCard({required this.holdings});
const _TradeAccountCard({required this.holdings, this.tradeBalance});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final isDark = Theme.of(context).brightness == Brightness.dark;
// 计算总市值（所有持仓折算成USDT）
double totalValue = 0;
for (var h in holdings) {
final value = double.tryParse(h.currentValue?.toString() ?? '0') ?? 0;
totalValue += value;
}
// 对持仓进行排序：USDT 放在最上面
final sortedHoldings = List.from(holdings);
sortedHoldings.sort((a, b) {
final codeA = (a.coinCode ?? a['coinCode'] ?? '').toString().toUpperCase();
final codeB = (b.coinCode ?? b['coinCode'] ?? '').toString().toUpperCase();
if (codeA == 'USDT') return -1;
if (codeB == 'USDT') return 1;
return 0;
});
return GlassPanel(
padding: AppSpacing.cardPadding,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题行
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: colorScheme.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(AppRadius.md),
),
child: Icon(
LucideIcons.trendingUp,
size: 18,
color: colorScheme.primary,
),
),
SizedBox(width: AppSpacing.sm),
Text(
'交易账户',
style: GoogleFonts.spaceGrotesk(
fontSize: 16,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
],
),
Icon(
LucideIcons.chevronRight,
size: 14,
color: colorScheme.primary,
),
],
),
SizedBox(height: AppSpacing.md),
// 总市值
Text(
'持仓列表',
'总市值 (USDT)',
style: TextStyle(
fontSize: 11,
color: colorScheme.onSurfaceVariant,
),
),
SizedBox(height: AppSpacing.xs),
Text(
totalValue.toStringAsFixed(2),
style: GoogleFonts.spaceGrotesk(
fontSize: 16,
fontSize: 28,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
SizedBox(height: AppSpacing.lg),
// 持仓列表标题
Text(
'持仓列表',
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.w600,
color: colorScheme.onSurfaceVariant,
),
),
SizedBox(height: AppSpacing.md),
if (holdings.isEmpty)
if (sortedHoldings.isEmpty)
const _EmptyState(icon: LucideIcons.wallet, message: '暂无持仓')
else
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: holdings.length,
itemCount: sortedHoldings.length,
separatorBuilder: (_, __) => Container(
margin: EdgeInsets.only(left: 56),
height: 1,
color: AppColorScheme.glassPanelBorder,
),
itemBuilder: (context, index) => _HoldingItem(holding: holdings[index]),
itemBuilder: (context, index) => _HoldingItem(holding: sortedHoldings[index]),
),
],
),

48
flutter_monisuo/lib/ui/pages/main/main_page.dart
View File

@@ -14,9 +14,8 @@ import '../mine/mine_page.dart';
class _NavItem {
final String label;
final IconData icon;
final Widget page;
const _NavItem({required this.label, required this.icon, required this.page});
const _NavItem({required this.label, required this.icon});
}
/// 主页面 - "The Kinetic Vault" 设计风格
@@ -24,20 +23,26 @@ class MainPage extends StatefulWidget {
const MainPage({super.key});
@override
State<MainPage> createState() => _MainPageState();
State<MainPage> createState() => MainPageState();
}
class _MainPageState extends State<MainPage> {
class MainPageState extends State<MainPage> {
int _currentIndex = 0;
final Set<int> _loadedPages = {0};
String? _tradeCoinCode; // 交易页面选中的币种代码
late final List<Widget> _pages;
static final _navItems = [
_NavItem(label: '首页', icon: LucideIcons.house, page: const HomePage()),
_NavItem(label: '行情', icon: LucideIcons.trendingUp, page: const MarketPage()),
_NavItem(label: '交易', icon: LucideIcons.arrowLeftRight, page: const TradePage()),
_NavItem(label: '资产', icon: LucideIcons.wallet, page: const AssetPage()),
_NavItem(label: '我的', icon: LucideIcons.user, page: const MinePage()),
];
@override
void initState() {
super.initState();
_pages = [
const HomePage(),
const MarketPage(),
TradePage(initialCoinCode: _tradeCoinCode),
const AssetPage(),
const MinePage(),
];
}
void _onTabChanged(int index) {
setState(() {
@@ -46,6 +51,25 @@ class _MainPageState extends State<MainPage> {
});
}
/// 切换到交易页面并选中指定币种
void switchToTrade(String coinCode) {
setState(() {
_tradeCoinCode = coinCode;
_currentIndex = 2; // 交易页面索引
_loadedPages.add(2);
// 重新构建交易页面
_pages[2] = TradePage(initialCoinCode: _tradeCoinCode);
});
}
static const _navItems = [
_NavItem(label: '首页', icon: LucideIcons.house),
_NavItem(label: '行情', icon: LucideIcons.trendingUp),
_NavItem(label: '交易', icon: LucideIcons.arrowLeftRight),
_NavItem(label: '资产', icon: LucideIcons.wallet),
_NavItem(label: '我的', icon: LucideIcons.user),
];
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
@@ -61,7 +85,7 @@ class _MainPageState extends State<MainPage> {
child: LazyIndexedStack(
index: _currentIndex,
loadedIndexes: _loadedPages,
children: _navItems.map((item) => item.page).toList(),
children: _pages,
),
),
],

198
flutter_monisuo/lib/ui/pages/market/market_page.dart
View File

@@ -7,6 +7,7 @@ import '../../../core/theme/app_spacing.dart';
import '../../../data/models/coin.dart';
import '../../../providers/market_provider.dart';
import '../../components/glass_panel.dart';
import '../main/main_page.dart';
/// 行情页面 - Material Design 3 风格
class MarketPage extends StatefulWidget {
@@ -254,107 +255,118 @@ class _MarketPageState extends State<MarketPage> with AutomaticKeepAliveClientMi
? AppColorScheme.up.withOpacity(0.1)
: colorScheme.error.withOpacity(0.1);
return GlassCard(
margin: EdgeInsets.only(bottom: AppSpacing.sm),
child: Row(
children: [
// 图标容器
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(
color: colorScheme.outlineVariant.withOpacity(0.2),
),
),
child: Center(
child: Text(
coin.displayIcon,
style: TextStyle(
fontSize: 20,
color: coin.isUp ? colorScheme.primary : colorScheme.secondary,
fontWeight: FontWeight.bold,
return GestureDetector(
onTap: () => _navigateToTrade(coin),
child: GlassCard(
margin: EdgeInsets.only(bottom: AppSpacing.sm),
child: Row(
children: [
// 图标容器
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(
color: colorScheme.outlineVariant.withOpacity(0.2),
),
),
),
),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
// 币种信息
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,
child: Center(
child: Text(
coin.displayIcon,
style: TextStyle(
fontSize: 12,
color: colorScheme.onSurfaceVariant,
fontSize: 20,
color: coin.isUp ? colorScheme.primary : colorScheme.secondary,
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
// 币种信息
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(
'\$${coin.formattedPrice}',
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
SizedBox(height: AppSpacing.xs),
Container(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.sm,
vertical: AppSpacing.xs,
),
decoration: BoxDecoration(
color: changeBgColor,
borderRadius: BorderRadius.circular(AppRadius.sm),
border: Border.all(
color: changeColor.withOpacity(0.2),
),
),
child: Text(
coin.formattedChange,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: changeColor,
),
),
),
],
),
),
// 价格和涨跌幅
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$${coin.formattedPrice}',
style: GoogleFonts.spaceGrotesk(
fontSize: 14,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
SizedBox(height: AppSpacing.xs),
Container(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.sm,
vertical: AppSpacing.xs,
),
decoration: BoxDecoration(
color: changeBgColor,
borderRadius: BorderRadius.circular(AppRadius.sm),
border: Border.all(
color: changeColor.withOpacity(0.2),
),
),
child: Text(
coin.formattedChange,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: changeColor,
),
),
),
],
),
],
],
),
),
);
}
void _navigateToTrade(Coin coin) {
// 切换到交易页面并选中该币种
MainPageState? mainPageState = context.findAncestorStateOfType<MainPageState>();
if (mainPageState != null) {
mainPageState.switchToTrade(coin.code);
}
}
}

239
flutter_monisuo/lib/ui/pages/trade/trade_page.dart
View File

@@ -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,
),
],
],
),
),
);
}