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

feat: K线图改用k_chart库，支持完整技术指标(MA/BOLL/MACD/KDJ/RSI/VOL)

Browse Source
This commit is contained in:
sion
2026-04-07 21:27:23 +08:00
parent 16e062dc0f
commit beda32aa50
88 changed files with 71102 additions and 71952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
flutter_monisuo/lib/ui/pages/chart/chart_page.dart
View File

@@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:interactive_chart/interactive_chart.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';
@@ -7,7 +7,7 @@ import '../../../core/theme/app_theme.dart';
import '../../../core/theme/app_theme_extension.dart';
import '../../../providers/chart_provider.dart';
/// K 线图页面 - 标准金融App行情布局
/// K 线图页面 - 使用 k_chart 库
class ChartPage extends StatelessWidget {
final String? symbol;
@@ -18,7 +18,9 @@ class ChartPage extends StatelessWidget {
final colorScheme = context.colors;
return ChangeNotifierProvider(
create: (_) => ChartProvider()..setSymbol(symbol ?? 'BTC'),
create: (_) => ChartProvider()
..setSymbol(symbol ?? 'BTC')
..loadCandles(),
child: Scaffold(
backgroundColor: colorScheme.surface,
appBar: AppBar(
@@ -30,12 +32,6 @@ class ChartPage extends StatelessWidget {
backgroundColor: colorScheme.surface,
elevation: 0,
scrolledUnderElevation: 0,
actions: [
IconButton(
icon: const Icon(LucideIcons.settings, size: 20),
onPressed: () => _showSettingsSheet(context),
),
],
),
body: Consumer<ChartProvider>(
builder: (context, provider, _) {
@@ -47,9 +43,9 @@ class ChartPage extends StatelessWidget {
return _buildErrorView(context, provider);
}
final candles = provider.candleData;
if (candles.length < 3) {
return const Center(child: Text('数据不足'));
final data = provider.klineData;
if (data.isEmpty) {
return const Center(child: Text('暂无数据'));
}
return Column(
@@ -65,39 +61,35 @@ class ChartPage extends StatelessWidget {
// 4. K线图区域
Expanded(
child: InteractiveChart(
candles: candles,
style: ChartStyle(
priceGainColor: context.appColors.up,
priceLossColor: context.appColors.down,
volumeColor: colorScheme.primary.withValues(alpha: 0.3),
priceLabelStyle: TextStyle(
fontSize: 11,
color: colorScheme.onSurfaceVariant,
),
timeLabelStyle: TextStyle(
fontSize: 10,
color: colorScheme.onSurfaceVariant,
),
overlayTextStyle: TextStyle(
fontSize: 12,
color: colorScheme.onSurface,
),
volumeHeightFactor: provider.indicators.showVOL ? 0.2 : 0,
// MA 均线样式
trendLineStyles: provider.indicators.showMA
? [
Paint()
..color = Colors.blue
..strokeWidth = 1.5,
Paint()
..color = Colors.orange
..strokeWidth = 1.5,
Paint()
..color = Colors.purple
..strokeWidth = 1.5,
]
: [],
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,
);
},
),
),
),
@@ -112,28 +104,47 @@ class ChartPage extends StatelessWidget {
);
}
/// 顶部价格信息栏
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.candleData;
final candles = provider.candles;
if (candles.isEmpty) return const SizedBox.shrink();
final lastCandle = candles.last;
final firstCandle = candles.first;
final closePrice = lastCandle.close ?? 0;
final openPrice = firstCandle.open ?? 0;
final change = closePrice - openPrice;
final changePercent = openPrice != 0 ? (change / openPrice) * 100 : 0;
final change = lastCandle.close - firstCandle.open;
final changePercent = firstCandle.open != 0 ? (change / firstCandle.open) * 100 : 0;
final isUp = change >= 0;
// 计算24h最高最低
double high24h = 0;
double low24h = double.infinity;
double volume24h = 0;
for (var c in candles) {
if (c.high != null && c.high! > high24h) high24h = c.high!;
if (c.low != null && c.low! < low24h) low24h = c.low!;
if (c.volume != null) volume24h += c.volume!;
if (c.high > high24h) high24h = c.high;
if (c.low < low24h) low24h = c.low;
volume24h += c.volume;
}
return Container(
@@ -141,20 +152,17 @@ class ChartPage extends StatelessWidget {
decoration: BoxDecoration(
color: colorScheme.surfaceContainer,
border: Border(
bottom: BorderSide(
color: colorScheme.outlineVariant.withValues(alpha: 0.2),
),
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) ?? "0.00"}',
'\$${lastCandle.close.toStringAsFixed(2)}',
style: AppTextStyles.displaySmall(context).copyWith(
fontWeight: FontWeight.bold,
color: isUp ? context.appColors.up : context.appColors.down,
@@ -162,13 +170,9 @@ class ChartPage extends StatelessWidget {
),
const SizedBox(width: AppSpacing.md),
Container(
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.sm,
vertical: 2,
),
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm, vertical: 2),
decoration: BoxDecoration(
color: (isUp ? context.appColors.up : context.appColors.down)
.withValues(alpha: 0.1),
color: (isUp ? context.appColors.up : context.appColors.down).withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: Text(
@@ -182,8 +186,6 @@ class ChartPage extends StatelessWidget {
],
),
const SizedBox(height: AppSpacing.sm),
// 24h 数据
Row(
children: [
_buildDataItem(context, '24h高', '\$${high24h.toStringAsFixed(2)}'),
@@ -203,23 +205,12 @@ class ChartPage extends StatelessWidget {
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,
),
),
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;
@@ -227,11 +218,7 @@ class ChartPage extends StatelessWidget {
height: 40,
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: colorScheme.outlineVariant.withValues(alpha: 0.2),
),
),
border: Border(bottom: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.2))),
),
child: Row(
children: ChartInterval.values.map((interval) {
@@ -242,21 +229,12 @@ class ChartPage extends StatelessWidget {
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: isSelected
? colorScheme.primary
: Colors.transparent,
width: 2,
),
),
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,
color: isSelected ? colorScheme.primary : colorScheme.onSurfaceVariant,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
),
),
@@ -268,74 +246,85 @@ class ChartPage extends StatelessWidget {
);
}
/// 技术指标切换
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),
),
),
border: Border(bottom: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.2))),
),
child: Row(
children: [
_buildIndicatorChip(
context,
label: 'MA',
isSelected: provider.indicators.showMA,
onTap: () => provider.updateIndicators(
provider.indicators.copyWith(showMA: !provider.indicators.showMA),
),
),
_buildIndicatorChip(
context,
label: 'EMA',
isSelected: provider.indicators.showEMA,
onTap: () => provider.updateIndicators(
provider.indicators.copyWith(showEMA: !provider.indicators.showEMA),
),
),
_buildIndicatorChip(
context,
label: 'BOLL',
isSelected: provider.indicators.showBOLL,
onTap: () => provider.updateIndicators(
provider.indicators.copyWith(showBOLL: !provider.indicators.showBOLL),
),
),
_buildIndicatorChip(
context,
label: 'VOL',
isSelected: provider.indicators.showVOL,
onTap: () => provider.updateIndicators(
provider.indicators.copyWith(showVOL: !provider.indicators.showVOL),
),
),
_buildIndicatorChip(
context,
label: 'MACD',
isSelected: provider.indicators.showMACD,
onTap: () => provider.updateIndicators(
provider.indicators.copyWith(showMACD: !provider.indicators.showMACD),
),
),
],
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),
)),
],
),
),
);
}
Widget _buildIndicatorChip(
BuildContext context, {
required String label,
required bool isSelected,
required VoidCallback onTap,
}) {
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(
@@ -344,28 +333,16 @@ class ChartPage extends StatelessWidget {
onTap: onTap,
borderRadius: BorderRadius.circular(AppRadius.sm),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.xs,
),
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: AppSpacing.xs),
decoration: BoxDecoration(
color: isSelected
? colorScheme.primary.withValues(alpha: 0.1)
: Colors.transparent,
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,
),
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,
color: isSelected ? colorScheme.primary : colorScheme.onSurfaceVariant,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
),
),
@@ -374,7 +351,6 @@ class ChartPage extends StatelessWidget {
);
}
/// 底部操作栏
Widget _buildBottomActions(BuildContext context, ChartProvider provider) {
final colorScheme = context.colors;
@@ -382,15 +358,10 @@ class ChartPage extends StatelessWidget {
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: colorScheme.surface,
border: Border(
top: BorderSide(
color: colorScheme.outlineVariant.withValues(alpha: 0.3),
),
),
border: Border(top: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.3))),
),
child: Row(
children: [
// 买入按钮
Expanded(
child: SizedBox(
height: 48,
@@ -400,23 +371,13 @@ class ChartPage extends StatelessWidget {
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,
),
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,
@@ -426,17 +387,9 @@ class ChartPage extends StatelessWidget {
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,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(AppRadius.md)),
),
child: Text('卖出', style: AppTextStyles.headlineSmall(context).copyWith(fontWeight: FontWeight.w600, color: Colors.white)),
),
),
),
@@ -446,16 +399,7 @@ class ChartPage extends StatelessWidget {
}
void _navigateToTrade(BuildContext context, String symbol, String side) {
// TODO: 跳转到交易页面
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (_) => TradePage(symbol: symbol, side: side),
// ),
// );
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('$symbol $side - 跳转交易页面（待实现）')),
);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('$symbol $side - 跳转交易页面（待实现）')));
}
Widget _buildTitle(BuildContext context) {
@@ -465,19 +409,9 @@ class ChartPage extends StatelessWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
provider.symbol,
style: AppTextStyles.headlineMedium(context).copyWith(
fontWeight: FontWeight.bold,
),
),
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,
),
),
Text('/USDT', style: AppTextStyles.bodyMedium(context).copyWith(color: colorScheme.onSurfaceVariant)),
],
);
},
@@ -494,118 +428,7 @@ class ChartPage extends StatelessWidget {
const SizedBox(height: AppSpacing.md),
Text('加载失败', style: AppTextStyles.bodyLarge(context)),
const SizedBox(height: AppSpacing.sm),
TextButton(
onPressed: provider.loadCandles,
child: const Text('重试'),
),
],
),
);
}
void _showSettingsSheet(BuildContext context) {
final provider = context.read<ChartProvider>();
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),
_buildIndicatorSwitch(
context: context,
label: 'MA 移动平均线 (7/14/30)',
value: provider.indicators.showMA,
onChanged: (v) {
provider.updateIndicators(
provider.indicators.copyWith(showMA: v),
);
setState(() {});
},
),
_buildIndicatorSwitch(
context: context,
label: 'EMA 指数移动平均',
value: provider.indicators.showEMA,
onChanged: (v) {
provider.updateIndicators(
provider.indicators.copyWith(showEMA: v),
);
setState(() {});
},
),
_buildIndicatorSwitch(
context: context,
label: 'BOLL 布林带',
value: provider.indicators.showBOLL,
onChanged: (v) {
provider.updateIndicators(
provider.indicators.copyWith(showBOLL: v),
);
setState(() {});
},
),
_buildIndicatorSwitch(
context: context,
label: 'VOL 成交量',
value: provider.indicators.showVOL,
onChanged: (v) {
provider.updateIndicators(
provider.indicators.copyWith(showVOL: v),
);
setState(() {});
},
),
_buildIndicatorSwitch(
context: context,
label: 'MACD',
value: provider.indicators.showMACD,
onChanged: (v) {
provider.updateIndicators(
provider.indicators.copyWith(showMACD: v),
);
setState(() {});
},
),
const SizedBox(height: AppSpacing.xl),
],
),
);
},
),
);
}
Widget _buildIndicatorSwitch({
required BuildContext context,
required String label,
required bool value,
required ValueChanged<bool> onChanged,
}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: AppSpacing.sm),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(label, style: AppTextStyles.bodyMedium(context)),
Switch(value: value, onChanged: onChanged),
TextButton(onPressed: provider.loadCandles, child: const Text('重试')),
],
),
);