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

feat: K线图添加MA均线、标准行情布局、买入卖出按钮

Browse Source
This commit is contained in:
sion
2026-04-07 16:57:33 +08:00
parent e4d20d5261
commit b00e0390fb
85 changed files with 44709 additions and 44380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@ import '../../../core/theme/app_theme.dart';
import '../../../core/theme/app_theme_extension.dart';
import '../../../providers/chart_provider.dart';
/// K 线图页面
/// K 线图页面 - 标准金融App行情布局
class ChartPage extends StatelessWidget {
final String? symbol;
@@ -44,23 +44,7 @@ class ChartPage extends StatelessWidget {
}
if (provider.error != null) {
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('重试'),
),
],
),
);
return _buildErrorView(context, provider);
}
final candles = provider.candleData;
@@ -70,10 +54,13 @@ class ChartPage extends StatelessWidget {
return Column(
children: [
// 时间周期选择
// 1. 顶部价格信息栏
_buildPriceHeader(context, provider),
// 2. 时间周期选择
_buildIntervalTabs(context, provider),
// K 线图
// 3. K线图区域
Expanded(
child: InteractiveChart(
candles: candles,
@@ -94,9 +81,26 @@ class ChartPage extends StatelessWidget {
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,
]
: [],
),
),
),
// 4. 底部操作栏
_buildBottomActions(context, provider),
],
);
},
@@ -105,37 +109,119 @@ class ChartPage extends StatelessWidget {
);
}
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,
/// 顶部价格信息栏
Widget _buildPriceHeader(BuildContext context, ChartProvider provider) {
final colorScheme = context.colors;
final candles = provider.candleData;
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 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!;
}
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) ?? "0.00"}',
style: AppTextStyles.displaySmall(context).copyWith(
fontWeight: FontWeight.bold,
color: isUp ? context.appColors.up : context.appColors.down,
),
),
),
const SizedBox(width: AppSpacing.xs),
Text(
'/USDT',
style: AppTextStyles.bodyMedium(context).copyWith(
color: colorScheme.onSurfaceVariant,
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),
// 24h 数据
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: 44,
height: 40,
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
decoration: BoxDecoration(
border: Border(
@@ -179,6 +265,135 @@ class ChartPage extends StatelessWidget {
);
}
/// 底部操作栏
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) {
// TODO: 跳转到交易页面
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (_) => TradePage(symbol: symbol, side: 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('重试'),
),
],
),
);
}
void _showSettingsSheet(BuildContext context) {
showModalBottomSheet(
context: context,
@@ -198,37 +413,15 @@ class ChartPage extends StatelessWidget {
),
const SizedBox(height: AppSpacing.lg),
// MA
_buildIndicatorSwitch(
context: ctx,
label: 'MA 移动平均线',
label: 'MA 移动平均线 (7/14/30)',
value: provider.indicators.showMA,
onChanged: (v) => provider.updateIndicators(
provider.indicators.copyWith(showMA: v),
),
),
// EMA
_buildIndicatorSwitch(
context: ctx,
label: 'EMA 指数移动平均',
value: provider.indicators.showEMA,
onChanged: (v) => provider.updateIndicators(
provider.indicators.copyWith(showEMA: v),
),
),
// BOLL
_buildIndicatorSwitch(
context: ctx,
label: 'BOLL 布林带',
value: provider.indicators.showBOLL,
onChanged: (v) => provider.updateIndicators(
provider.indicators.copyWith(showBOLL: v),
),
),
// VOL
_buildIndicatorSwitch(
context: ctx,
label: 'VOL 成交量',