refactor: 将前端从 uni-app x 重构为 Flutter
变更内容: - 删除 uni-app x 项目 (app/ 目录) - 新增 Flutter 项目 (flutter_monisuo/ 目录) - 新增部署脚本 (deploy/ 目录) Flutter 项目功能: - 用户登录/注册 - 首页资产概览 - 行情币种列表 - 交易买卖操作 - 资产账户管理 - 充值/提现/划转 - 深色主题 - JWT Token 认证 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
228
flutter_monisuo/lib/ui/pages/market/market_page.dart
Normal file
228
flutter_monisuo/lib/ui/pages/market/market_page.dart
Normal file
@@ -0,0 +1,228 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../../core/constants/app_colors.dart';
|
||||
import '../../../data/models/coin.dart';
|
||||
import '../../../providers/market_provider.dart';
|
||||
|
||||
/// 行情页面
|
||||
class MarketPage extends StatefulWidget {
|
||||
const MarketPage({super.key});
|
||||
|
||||
@override
|
||||
State<MarketPage> createState() => _MarketPageState();
|
||||
}
|
||||
|
||||
class _MarketPageState extends State<MarketPage> with AutomaticKeepAliveClientMixin {
|
||||
@override
|
||||
bool get wantKeepAlive => true;
|
||||
|
||||
final _searchController = TextEditingController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
context.read<MarketProvider>().loadCoins();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_searchController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: Consumer<MarketProvider>(
|
||||
builder: (context, provider, _) {
|
||||
return Column(
|
||||
children: [
|
||||
_buildSearchBar(provider),
|
||||
_buildTabs(provider),
|
||||
Expanded(
|
||||
child: _buildCoinList(provider),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSearchBar(MarketProvider provider) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: TextField(
|
||||
controller: _searchController,
|
||||
style: const TextStyle(color: AppColors.textPrimary),
|
||||
onChanged: provider.search,
|
||||
decoration: InputDecoration(
|
||||
hintText: '搜索币种...',
|
||||
prefixIcon: const Icon(Icons.search, color: AppColors.textSecondary),
|
||||
suffixIcon: _searchController.text.isNotEmpty
|
||||
? IconButton(
|
||||
icon: const Icon(Icons.clear, color: AppColors.textSecondary),
|
||||
onPressed: () {
|
||||
_searchController.clear();
|
||||
provider.clearSearch();
|
||||
},
|
||||
)
|
||||
: null,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTabs(MarketProvider provider) {
|
||||
final tabs = [
|
||||
{'key': 'all', 'label': '全部'},
|
||||
{'key': 'realtime', 'label': '实时'},
|
||||
{'key': 'hot', 'label': '热门'},
|
||||
];
|
||||
|
||||
return Container(
|
||||
height: 44,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: tabs.map((tab) {
|
||||
final isActive = provider.activeTab == tab['key'];
|
||||
return GestureDetector(
|
||||
onTap: () => provider.setTab(tab['key']!),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
||||
margin: const EdgeInsets.only(right: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: isActive ? AppColors.primary : AppColors.cardBackground,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Text(
|
||||
tab['label']!,
|
||||
style: TextStyle(
|
||||
color: isActive ? Colors.white : AppColors.textSecondary,
|
||||
fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCoinList(MarketProvider provider) {
|
||||
if (provider.isLoading) {
|
||||
return const Center(
|
||||
child: CircularProgressIndicator(color: AppColors.primary),
|
||||
);
|
||||
}
|
||||
|
||||
if (provider.error != null) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(provider.error!, style: const TextStyle(color: AppColors.error)),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: provider.loadCoins,
|
||||
child: const Text('重试'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final coins = provider.coins;
|
||||
if (coins.isEmpty) {
|
||||
return const Center(
|
||||
child: Text('暂无数据', style: TextStyle(color: AppColors.textSecondary)),
|
||||
);
|
||||
}
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: provider.refresh,
|
||||
color: AppColors.primary,
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
itemCount: coins.length,
|
||||
itemBuilder: (context, index) => _buildCoinItem(coins[index]),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCoinItem(Coin coin) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 8),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.cardBackground,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// 图标
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.primary.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
coin.displayIcon,
|
||||
style: const TextStyle(
|
||||
fontSize: 20,
|
||||
color: AppColors.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// 名称
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'${coin.code}/USDT',
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
coin.name,
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 涨跌幅
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: coin.isUp ? AppColors.up.withOpacity(0.2) : AppColors.down.withOpacity(0.2),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
coin.formattedChange,
|
||||
style: TextStyle(
|
||||
color: coin.isUp ? AppColors.up : AppColors.down,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user