522 lines
20 KiB
Dart
522 lines
20 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_chen_kchart/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. 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: ChartStyle(),
|
|
chartColors: chartColors,
|
|
enableTheme: true,
|
|
controller: KChartController(),
|
|
mainState: _getMainState(provider),
|
|
secondaryState: _getSecondaryState(provider),
|
|
volHidden: !provider.indicators.showVOL,
|
|
fixedLength: 2,
|
|
timeFormat: TimeFormat.YEAR_MONTH_DAY,
|
|
onLoadMore: (m) async {
|
|
return false;
|
|
},
|
|
isTrendLine: false,
|
|
minScale: 0.1,
|
|
maxScale: 5.0,
|
|
scaleSensitivity: 2.5,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
|
|
// 4. 底部操作栏
|
|
_buildBottomActions(context, provider),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
MainState _getMainState(ChartProvider provider) {
|
|
if (provider.indicators.showBOLL) {
|
|
return MainState.BOLL;
|
|
} else if (provider.indicators.showEMA) {
|
|
return MainState.MA;
|
|
} 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;
|
|
} else if (provider.indicators.showWR) {
|
|
return SecondaryState.WR;
|
|
} else if (provider.indicators.showCCI) {
|
|
return SecondaryState.CCI;
|
|
}
|
|
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: [
|
|
// 时间周期选择
|
|
Expanded(
|
|
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(),
|
|
),
|
|
),
|
|
// 设置按钮
|
|
IconButton(
|
|
icon: const Icon(LucideIcons.settings, size: 18),
|
|
onPressed: () => _showIndicatorSettings(context, provider),
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 指标设置弹窗
|
|
void _showIndicatorSettings(BuildContext context, ChartProvider provider) {
|
|
showModalBottomSheet(
|
|
context: context,
|
|
builder: (ctx) => StatefulBuilder(
|
|
builder: (ctx, setState) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(AppSpacing.lg),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'技术指标',
|
|
style: AppTextStyles.headlineMedium(context).copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
|
|
// 主图指标
|
|
Text(
|
|
'主图指标',
|
|
style: AppTextStyles.labelMedium(context).copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Wrap(
|
|
spacing: AppSpacing.sm,
|
|
children: [
|
|
_buildIndicatorRadio(context, 'MA', provider.indicators.showMA, () {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: true,
|
|
showEMA: false,
|
|
showBOLL: false,
|
|
showVOL: provider.indicators.showVOL,
|
|
showMACD: provider.indicators.showMACD,
|
|
showKDJ: provider.indicators.showKDJ,
|
|
showRSI: provider.indicators.showRSI,
|
|
));
|
|
setState(() {});
|
|
}),
|
|
_buildIndicatorRadio(context, 'EMA', provider.indicators.showEMA, () {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: false,
|
|
showEMA: true,
|
|
showBOLL: false,
|
|
showVOL: provider.indicators.showVOL,
|
|
showMACD: provider.indicators.showMACD,
|
|
showKDJ: provider.indicators.showKDJ,
|
|
showRSI: provider.indicators.showRSI,
|
|
));
|
|
setState(() {});
|
|
}),
|
|
_buildIndicatorRadio(context, 'BOLL', provider.indicators.showBOLL, () {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: false,
|
|
showEMA: false,
|
|
showBOLL: true,
|
|
showVOL: provider.indicators.showVOL,
|
|
showMACD: provider.indicators.showMACD,
|
|
showKDJ: provider.indicators.showKDJ,
|
|
showRSI: provider.indicators.showRSI,
|
|
));
|
|
setState(() {});
|
|
}),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.lg),
|
|
|
|
// 副图指标
|
|
Text(
|
|
'副图指标',
|
|
style: AppTextStyles.labelMedium(context).copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Wrap(
|
|
spacing: AppSpacing.sm,
|
|
children: [
|
|
_buildIndicatorRadio(context, 'MACD', provider.indicators.showMACD, () {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: provider.indicators.showMA,
|
|
showEMA: provider.indicators.showEMA,
|
|
showBOLL: provider.indicators.showBOLL,
|
|
showVOL: false,
|
|
showMACD: true,
|
|
showKDJ: false,
|
|
showRSI: false,
|
|
));
|
|
setState(() {});
|
|
}),
|
|
_buildIndicatorRadio(context, 'KDJ', provider.indicators.showKDJ, () {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: provider.indicators.showMA,
|
|
showEMA: provider.indicators.showEMA,
|
|
showBOLL: provider.indicators.showBOLL,
|
|
showVOL: false,
|
|
showMACD: false,
|
|
showKDJ: true,
|
|
showRSI: false,
|
|
));
|
|
setState(() {});
|
|
}),
|
|
_buildIndicatorRadio(context, 'RSI', provider.indicators.showRSI, () {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: provider.indicators.showMA,
|
|
showEMA: provider.indicators.showEMA,
|
|
showBOLL: provider.indicators.showBOLL,
|
|
showVOL: false,
|
|
showMACD: false,
|
|
showKDJ: false,
|
|
showRSI: true,
|
|
));
|
|
setState(() {});
|
|
}),
|
|
_buildIndicatorRadio(context, 'VOL', provider.indicators.showVOL, () {
|
|
provider.updateIndicators(IndicatorSettings(
|
|
showMA: provider.indicators.showMA,
|
|
showEMA: provider.indicators.showEMA,
|
|
showBOLL: provider.indicators.showBOLL,
|
|
showVOL: true,
|
|
showMACD: false,
|
|
showKDJ: false,
|
|
showRSI: false,
|
|
));
|
|
setState(() {});
|
|
}),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.xl),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildIndicatorRadio(BuildContext context, String label, bool isSelected, VoidCallback onTap) {
|
|
final colorScheme = context.colors;
|
|
|
|
return InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(AppRadius.sm),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: AppSpacing.sm),
|
|
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.labelMedium(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('重试')),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|