437 lines
16 KiB
Dart
437 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:k_chart/flutter_k_chart.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:shadcn_ui/shadcn_ui.dart';
|
|
import '../../../core/theme/app_spacing.dart';
|
|
import '../../../core/theme/app_theme.dart';
|
|
import '../../../core/theme/app_theme_extension.dart';
|
|
import '../../../providers/chart_provider.dart';
|
|
|
|
/// K 线图页面 - 使用 k_chart 库
|
|
class ChartPage extends StatelessWidget {
|
|
final String? symbol;
|
|
|
|
const ChartPage({super.key, this.symbol});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = context.colors;
|
|
|
|
return ChangeNotifierProvider(
|
|
create: (_) => ChartProvider()
|
|
..setSymbol(symbol ?? 'BTC')
|
|
..loadCandles(),
|
|
child: Scaffold(
|
|
backgroundColor: colorScheme.surface,
|
|
appBar: AppBar(
|
|
leading: IconButton(
|
|
icon: const Icon(LucideIcons.arrowLeft, size: 20),
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
),
|
|
title: _buildTitle(context),
|
|
backgroundColor: colorScheme.surface,
|
|
elevation: 0,
|
|
scrolledUnderElevation: 0,
|
|
),
|
|
body: Consumer<ChartProvider>(
|
|
builder: (context, provider, _) {
|
|
if (provider.loading) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
|
|
if (provider.error != null) {
|
|
return _buildErrorView(context, provider);
|
|
}
|
|
|
|
final data = provider.klineData;
|
|
if (data.isEmpty) {
|
|
return const Center(child: Text('暂无数据'));
|
|
}
|
|
|
|
return Column(
|
|
children: [
|
|
// 1. 顶部价格信息栏
|
|
_buildPriceHeader(context, provider),
|
|
|
|
// 2. 时间周期选择
|
|
_buildIntervalTabs(context, provider),
|
|
|
|
// 3. 技术指标切换
|
|
_buildIndicatorTabs(context, provider),
|
|
|
|
// 4. K线图区域
|
|
Expanded(
|
|
child: Container(
|
|
color: colorScheme.surface,
|
|
child: Builder(
|
|
builder: (context) {
|
|
final chartColors = ChartColors();
|
|
chartColors.upColor = context.appColors.up;
|
|
chartColors.dnColor = context.appColors.down;
|
|
chartColors.bgColor = [colorScheme.surface, colorScheme.surface];
|
|
chartColors.gridColor = colorScheme.outlineVariant.withValues(alpha: 0.2);
|
|
chartColors.ma5Color = Colors.blue;
|
|
chartColors.ma10Color = Colors.orange;
|
|
chartColors.ma30Color = Colors.purple;
|
|
chartColors.volColor = colorScheme.primary.withValues(alpha: 0.5);
|
|
|
|
return KChartWidget(
|
|
provider.klineData,
|
|
ChartStyle(),
|
|
chartColors,
|
|
mainState: _getMainState(provider),
|
|
secondaryState: _getSecondaryState(provider),
|
|
volHidden: !provider.indicators.showVOL,
|
|
fixedLength: 2,
|
|
timeFormat: TimeFormat.YEAR_MONTH_DAY,
|
|
onLoadMore: (m) async {
|
|
return false;
|
|
},
|
|
isTrendLine: false,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
|
|
// 5. 底部操作栏
|
|
_buildBottomActions(context, provider),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
MainState _getMainState(ChartProvider provider) {
|
|
if (provider.indicators.showBOLL) {
|
|
return MainState.BOLL;
|
|
} else if (provider.indicators.showEMA) {
|
|
return MainState.MA; // k_chart 只有 MA 和 BOLL
|
|
} else if (provider.indicators.showMA) {
|
|
return MainState.MA;
|
|
}
|
|
return MainState.MA;
|
|
}
|
|
|
|
SecondaryState _getSecondaryState(ChartProvider provider) {
|
|
if (provider.indicators.showMACD) {
|
|
return SecondaryState.MACD;
|
|
} else if (provider.indicators.showKDJ) {
|
|
return SecondaryState.KDJ;
|
|
} else if (provider.indicators.showRSI) {
|
|
return SecondaryState.RSI;
|
|
}
|
|
return SecondaryState.MACD;
|
|
}
|
|
|
|
Widget _buildPriceHeader(BuildContext context, ChartProvider provider) {
|
|
final colorScheme = context.colors;
|
|
final candles = provider.candles;
|
|
|
|
if (candles.isEmpty) return const SizedBox.shrink();
|
|
|
|
final lastCandle = candles.last;
|
|
final firstCandle = candles.first;
|
|
final change = lastCandle.close - firstCandle.open;
|
|
final changePercent = firstCandle.open != 0 ? (change / firstCandle.open) * 100 : 0;
|
|
final isUp = change >= 0;
|
|
|
|
double high24h = 0;
|
|
double low24h = double.infinity;
|
|
double volume24h = 0;
|
|
for (var c in candles) {
|
|
if (c.high > high24h) high24h = c.high;
|
|
if (c.low < low24h) low24h = c.low;
|
|
volume24h += c.volume;
|
|
}
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(AppSpacing.md),
|
|
decoration: BoxDecoration(
|
|
color: colorScheme.surfaceContainer,
|
|
border: Border(
|
|
bottom: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.2)),
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
'\$${lastCandle.close.toStringAsFixed(2)}',
|
|
style: AppTextStyles.displaySmall(context).copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
color: isUp ? context.appColors.up : context.appColors.down,
|
|
),
|
|
),
|
|
const SizedBox(width: AppSpacing.md),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm, vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: (isUp ? context.appColors.up : context.appColors.down).withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(AppRadius.sm),
|
|
),
|
|
child: Text(
|
|
'${isUp ? "+" : ""}${changePercent.toStringAsFixed(2)}%',
|
|
style: AppTextStyles.labelMedium(context).copyWith(
|
|
color: isUp ? context.appColors.up : context.appColors.down,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Row(
|
|
children: [
|
|
_buildDataItem(context, '24h高', '\$${high24h.toStringAsFixed(2)}'),
|
|
const SizedBox(width: AppSpacing.lg),
|
|
_buildDataItem(context, '24h低', '\$${low24h.toStringAsFixed(2)}'),
|
|
const SizedBox(width: AppSpacing.lg),
|
|
_buildDataItem(context, '24h量', '${(volume24h / 1000).toStringAsFixed(1)}K'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildDataItem(BuildContext context, String label, String value) {
|
|
final colorScheme = context.colors;
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(label, style: AppTextStyles.bodySmall(context).copyWith(color: colorScheme.onSurfaceVariant)),
|
|
Text(value, style: AppTextStyles.labelMedium(context).copyWith(fontWeight: FontWeight.w600)),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildIntervalTabs(BuildContext context, ChartProvider provider) {
|
|
final colorScheme = context.colors;
|
|
|
|
return Container(
|
|
height: 40,
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
|
|
decoration: BoxDecoration(
|
|
border: Border(bottom: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.2))),
|
|
),
|
|
child: Row(
|
|
children: ChartInterval.values.map((interval) {
|
|
final isSelected = provider.interval == interval;
|
|
return Expanded(
|
|
child: InkWell(
|
|
onTap: () => provider.setInterval(interval),
|
|
child: Container(
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
border: Border(bottom: BorderSide(color: isSelected ? colorScheme.primary : Colors.transparent, width: 2)),
|
|
),
|
|
child: Text(
|
|
interval.label,
|
|
style: AppTextStyles.labelMedium(context).copyWith(
|
|
color: isSelected ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildIndicatorTabs(BuildContext context, ChartProvider provider) {
|
|
final colorScheme = context.colors;
|
|
final mainIndicators = ['MA', 'EMA', 'BOLL'];
|
|
final secondaryIndicators = ['MACD', 'KDJ', 'RSI', 'VOL'];
|
|
|
|
return Container(
|
|
height: 36,
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
|
|
decoration: BoxDecoration(
|
|
color: colorScheme.surfaceContainer,
|
|
border: Border(bottom: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.2))),
|
|
),
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
...mainIndicators.map((label) => _buildIndicatorChip(
|
|
context,
|
|
label: label,
|
|
isSelected: _isMainIndicatorActive(provider, label),
|
|
onTap: () => _toggleMainIndicator(provider, label),
|
|
)),
|
|
Container(width: 1, height: 20, margin: const EdgeInsets.symmetric(horizontal: AppSpacing.sm), color: colorScheme.outlineVariant),
|
|
...secondaryIndicators.map((label) => _buildIndicatorChip(
|
|
context,
|
|
label: label,
|
|
isSelected: _isSecondaryIndicatorActive(provider, label),
|
|
onTap: () => _toggleSecondaryIndicator(provider, label),
|
|
)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
bool _isMainIndicatorActive(ChartProvider provider, String label) {
|
|
switch (label) {
|
|
case 'MA': return provider.indicators.showMA;
|
|
case 'EMA': return provider.indicators.showEMA;
|
|
case 'BOLL': return provider.indicators.showBOLL;
|
|
default: return false;
|
|
}
|
|
}
|
|
|
|
bool _isSecondaryIndicatorActive(ChartProvider provider, String label) {
|
|
switch (label) {
|
|
case 'MACD': return provider.indicators.showMACD;
|
|
case 'KDJ': return provider.indicators.showKDJ;
|
|
case 'RSI': return provider.indicators.showRSI;
|
|
case 'VOL': return provider.indicators.showVOL;
|
|
default: return false;
|
|
}
|
|
}
|
|
|
|
void _toggleMainIndicator(ChartProvider provider, String label) {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: label == 'MA',
|
|
showEMA: label == 'EMA',
|
|
showBOLL: label == 'BOLL',
|
|
showVOL: provider.indicators.showVOL,
|
|
showMACD: provider.indicators.showMACD,
|
|
showKDJ: provider.indicators.showKDJ,
|
|
showRSI: provider.indicators.showRSI,
|
|
));
|
|
}
|
|
|
|
void _toggleSecondaryIndicator(ChartProvider provider, String label) {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: provider.indicators.showMA,
|
|
showEMA: provider.indicators.showEMA,
|
|
showBOLL: provider.indicators.showBOLL,
|
|
showVOL: label == 'VOL',
|
|
showMACD: label == 'MACD',
|
|
showKDJ: label == 'KDJ',
|
|
showRSI: label == 'RSI',
|
|
));
|
|
}
|
|
|
|
Widget _buildIndicatorChip(BuildContext context, {required String label, required bool isSelected, required VoidCallback onTap}) {
|
|
final colorScheme = context.colors;
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(right: AppSpacing.xs),
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(AppRadius.sm),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: AppSpacing.xs),
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? colorScheme.primary.withValues(alpha: 0.1) : Colors.transparent,
|
|
borderRadius: BorderRadius.circular(AppRadius.sm),
|
|
border: Border.all(color: isSelected ? colorScheme.primary : colorScheme.outlineVariant.withValues(alpha: 0.3), width: 1),
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: AppTextStyles.labelSmall(context).copyWith(
|
|
color: isSelected ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBottomActions(BuildContext context, ChartProvider provider) {
|
|
final colorScheme = context.colors;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(AppSpacing.md),
|
|
decoration: BoxDecoration(
|
|
color: colorScheme.surface,
|
|
border: Border(top: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.3))),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: SizedBox(
|
|
height: 48,
|
|
child: ElevatedButton(
|
|
onPressed: () => _navigateToTrade(context, provider.symbol, 'buy'),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: context.appColors.up,
|
|
foregroundColor: Colors.white,
|
|
elevation: 0,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(AppRadius.md)),
|
|
),
|
|
child: Text('买入', style: AppTextStyles.headlineSmall(context).copyWith(fontWeight: FontWeight.w600, color: Colors.white)),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: AppSpacing.md),
|
|
Expanded(
|
|
child: SizedBox(
|
|
height: 48,
|
|
child: ElevatedButton(
|
|
onPressed: () => _navigateToTrade(context, provider.symbol, 'sell'),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: context.appColors.down,
|
|
foregroundColor: Colors.white,
|
|
elevation: 0,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(AppRadius.md)),
|
|
),
|
|
child: Text('卖出', style: AppTextStyles.headlineSmall(context).copyWith(fontWeight: FontWeight.w600, color: Colors.white)),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
void _navigateToTrade(BuildContext context, String symbol, String side) {
|
|
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('$symbol $side - 跳转交易页面（待实现）')));
|
|
}
|
|
|
|
Widget _buildTitle(BuildContext context) {
|
|
return Consumer<ChartProvider>(
|
|
builder: (context, provider, _) {
|
|
final colorScheme = context.colors;
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(provider.symbol, style: AppTextStyles.headlineMedium(context).copyWith(fontWeight: FontWeight.bold)),
|
|
const SizedBox(width: AppSpacing.xs),
|
|
Text('/USDT', style: AppTextStyles.bodyMedium(context).copyWith(color: colorScheme.onSurfaceVariant)),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildErrorView(BuildContext context, ChartProvider provider) {
|
|
final colorScheme = context.colors;
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(Icons.error_outline, size: 48, color: colorScheme.error),
|
|
const SizedBox(height: AppSpacing.md),
|
|
Text('加载失败', style: AppTextStyles.bodyLarge(context)),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
TextButton(onPressed: provider.loadCandles, child: const Text('重试')),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|