fix: K线图指标切换移至底部，符合官方demo专业布局
This commit is contained in:
@@ -53,7 +53,7 @@ class ChartPage extends StatelessWidget {
|
||||
// 1. 顶部价格信息栏
|
||||
_buildPriceHeader(context, provider),
|
||||
|
||||
// 2. 时间周期选择（右侧带设置按钮）
|
||||
// 2. 时间周期选择
|
||||
_buildIntervalTabs(context, provider),
|
||||
|
||||
// 3. K线图区域
|
||||
@@ -96,7 +96,10 @@ class ChartPage extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
|
||||
// 4. 底部操作栏
|
||||
// 4. 底部指标切换
|
||||
_buildIndicatorTabs(context, provider),
|
||||
|
||||
// 5. 底部操作栏
|
||||
_buildBottomActions(context, provider),
|
||||
],
|
||||
);
|
||||
@@ -227,210 +230,128 @@ class ChartPage extends StatelessWidget {
|
||||
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,
|
||||
),
|
||||
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)),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
|
||||
// 主图指标
|
||||
Text(
|
||||
'主图指标',
|
||||
child: Text(
|
||||
interval.label,
|
||||
style: AppTextStyles.labelMedium(context).copyWith(
|
||||
color: context.colors.onSurfaceVariant,
|
||||
color: isSelected ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
),
|
||||
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 _buildIndicatorRadio(BuildContext context, String label, bool isSelected, VoidCallback onTap) {
|
||||
/// 底部指标切换（官方 demo 风格）
|
||||
Widget _buildIndicatorTabs(BuildContext context, ChartProvider provider) {
|
||||
final colorScheme = context.colors;
|
||||
final selectedColor = colorScheme.primary;
|
||||
final unselectedColor = colorScheme.onSurfaceVariant;
|
||||
|
||||
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,
|
||||
),
|
||||
return Container(
|
||||
height: 40,
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
|
||||
decoration: BoxDecoration(
|
||||
border: Border(top: BorderSide(color: colorScheme.outlineVariant.withValues(alpha: 0.2))),
|
||||
),
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
// 主图指标
|
||||
TextButton(
|
||||
onPressed: () => provider.updateIndicators(IndicatorSettings(
|
||||
showMA: provider.indicators.showMA ? false : true,
|
||||
showEMA: false,
|
||||
showBOLL: false,
|
||||
showVOL: provider.indicators.showVOL,
|
||||
showMACD: provider.indicators.showMACD,
|
||||
showKDJ: provider.indicators.showKDJ,
|
||||
showRSI: provider.indicators.showRSI,
|
||||
)),
|
||||
style: TextButton.styleFrom(minimumSize: const Size(0, 0), padding: const EdgeInsets.symmetric(horizontal: 12)),
|
||||
child: Text('MA', style: TextStyle(color: provider.indicators.showMA ? selectedColor : unselectedColor, fontSize: 13)),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => provider.updateIndicators(IndicatorSettings(
|
||||
showMA: false,
|
||||
showEMA: false,
|
||||
showBOLL: provider.indicators.showBOLL ? false : true,
|
||||
showVOL: provider.indicators.showVOL,
|
||||
showMACD: provider.indicators.showMACD,
|
||||
showKDJ: provider.indicators.showKDJ,
|
||||
showRSI: provider.indicators.showRSI,
|
||||
)),
|
||||
style: TextButton.styleFrom(minimumSize: const Size(0, 0), padding: const EdgeInsets.symmetric(horizontal: 12)),
|
||||
child: Text('BOLL', style: TextStyle(color: provider.indicators.showBOLL ? selectedColor : unselectedColor, fontSize: 13)),
|
||||
),
|
||||
// 副图指标
|
||||
TextButton(
|
||||
onPressed: () => provider.updateIndicators(IndicatorSettings(
|
||||
showMA: provider.indicators.showMA,
|
||||
showEMA: provider.indicators.showEMA,
|
||||
showBOLL: provider.indicators.showBOLL,
|
||||
showVOL: provider.indicators.showVOL,
|
||||
showMACD: provider.indicators.showMACD ? false : true,
|
||||
showKDJ: false,
|
||||
showRSI: false,
|
||||
)),
|
||||
style: TextButton.styleFrom(minimumSize: const Size(0, 0), padding: const EdgeInsets.symmetric(horizontal: 12)),
|
||||
child: Text('MACD', style: TextStyle(color: provider.indicators.showMACD ? selectedColor : unselectedColor, fontSize: 13)),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => provider.updateIndicators(IndicatorSettings(
|
||||
showMA: provider.indicators.showMA,
|
||||
showEMA: provider.indicators.showEMA,
|
||||
showBOLL: provider.indicators.showBOLL,
|
||||
showVOL: provider.indicators.showVOL,
|
||||
showMACD: false,
|
||||
showKDJ: provider.indicators.showKDJ ? false : true,
|
||||
showRSI: false,
|
||||
)),
|
||||
style: TextButton.styleFrom(minimumSize: const Size(0, 0), padding: const EdgeInsets.symmetric(horizontal: 12)),
|
||||
child: Text('KDJ', style: TextStyle(color: provider.indicators.showKDJ ? selectedColor : unselectedColor, fontSize: 13)),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => provider.updateIndicators(IndicatorSettings(
|
||||
showMA: provider.indicators.showMA,
|
||||
showEMA: provider.indicators.showEMA,
|
||||
showBOLL: provider.indicators.showBOLL,
|
||||
showVOL: provider.indicators.showVOL,
|
||||
showMACD: false,
|
||||
showKDJ: false,
|
||||
showRSI: provider.indicators.showRSI ? false : true,
|
||||
)),
|
||||
style: TextButton.styleFrom(minimumSize: const Size(0, 0), padding: const EdgeInsets.symmetric(horizontal: 12)),
|
||||
child: Text('RSI', style: TextStyle(color: provider.indicators.showRSI ? selectedColor : unselectedColor, fontSize: 13)),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => provider.updateIndicators(IndicatorSettings(
|
||||
showMA: provider.indicators.showMA,
|
||||
showEMA: provider.indicators.showEMA,
|
||||
showBOLL: provider.indicators.showBOLL,
|
||||
showVOL: !provider.indicators.showVOL,
|
||||
showMACD: provider.indicators.showMACD,
|
||||
showKDJ: provider.indicators.showKDJ,
|
||||
showRSI: provider.indicators.showRSI,
|
||||
)),
|
||||
style: TextButton.styleFrom(minimumSize: const Size(0, 0), padding: const EdgeInsets.symmetric(horizontal: 12)),
|
||||
child: Text('VOL', style: TextStyle(color: provider.indicators.showVOL ? selectedColor : unselectedColor, fontSize: 13)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user