feat: K线图改为币安/火币专业布局，技术指标移至设置面板
This commit is contained in:
@@ -53,13 +53,10 @@ class ChartPage extends StatelessWidget {
|
||||
// 1. 顶部价格信息栏
|
||||
_buildPriceHeader(context, provider),
|
||||
|
||||
// 2. 时间周期选择
|
||||
// 2. 时间周期选择（右侧带设置按钮）
|
||||
_buildIntervalTabs(context, provider),
|
||||
|
||||
// 3. 技术指标切换
|
||||
_buildIndicatorTabs(context, provider),
|
||||
|
||||
// 4. K线图区域
|
||||
// 3. K线图区域
|
||||
Expanded(
|
||||
child: Container(
|
||||
color: colorScheme.surface,
|
||||
@@ -99,7 +96,7 @@ class ChartPage extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
|
||||
// 5. 底部操作栏
|
||||
// 4. 底部操作栏
|
||||
_buildBottomActions(context, provider),
|
||||
],
|
||||
);
|
||||
@@ -230,134 +227,209 @@ class ChartPage extends StatelessWidget {
|
||||
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,
|
||||
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),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIndicatorTabs(BuildContext context, ChartProvider provider) {
|
||||
final colorScheme = context.colors;
|
||||
final mainIndicators = ['MA', 'EMA', 'BOLL'];
|
||||
final secondaryIndicators = ['MACD', 'KDJ', 'RSI', 'WR', 'CCI', '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 'WR': return provider.indicators.showWR;
|
||||
case 'CCI': return provider.indicators.showCCI;
|
||||
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',
|
||||
showWR: label == 'WR',
|
||||
showCCI: label == 'CCI',
|
||||
));
|
||||
}
|
||||
|
||||
Widget _buildIndicatorChip(BuildContext context, {required String label, required bool isSelected, required VoidCallback onTap}) {
|
||||
Widget _buildIndicatorRadio(BuildContext context, String label, bool isSelected, 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),
|
||||
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.labelSmall(context).copyWith(
|
||||
color: isSelected ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: AppTextStyles.labelMedium(context).copyWith(
|
||||
color: isSelected ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user