Flutter 股票图实现分析与解决方案

1、核心实现方案

在 Flutter 中实现专业级股票图（K 线图）推荐使用 fl_chart 库，它提供：

• 完整的 K 线图（蜡烛图）支持
• 多种技术指标（MA、MACD、KDJ 等）
• 高性能渲染
• 丰富的交互功能

2、最佳实践代码结构

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class StockChart extends StatefulWidget {
  final List<CandleData> data;
  
  const StockChart({super.key, required this.data});

  @override
  State<StockChart> createState() => _StockChartState();
}

class _StockChartState extends State<StockChart> {
  int? _touchedIndex;
  
  @override
  Widget build(BuildContext context) {
    return CandlestickChart(
      CandlestickChartData(
        barGroups: _buildCandleGroups(),
        titlesData: _buildTitlesData(),
        gridData: const FlGridData(show: true),
        borderData: FlBorderData(show: true),
        candleTouchData: CandleTouchData(
          enabled: true,
          touchCallback: (event, response) {
            setState(() {
              _touchedIndex = response?.spot?.touchedCandleDataIndex;
            });
          },
        ),
        extraLinesData: _buildExtraLines(),
      ),
    );
  }

  List<CandlestickBarGroup> _buildCandleGroups() {
    return widget.data.asMap().entries.map((e) {
      final index = e.key;
      final candle = e.value;
      return CandlestickBarGroup(
        x: index.toDouble(),
        open: candle.open,
        high: candle.high,
        low: candle.low,
        close: candle.close,
        barsSpace: 4,
        candleColors: _getCandleColors(candle),
      );
    }).toList();
  }

  CandleColors _getCandleColors(CandleData candle) {
    return candle.close >= candle.open
        ? CandleColors(bull: Colors.red) // 涨
        : CandleColors(bear: Colors.green); // 跌
  }

  CandlestickTitlesData _buildTitlesData() {
    return CandlestickTitlesData(
      leftTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          reservedSize: 40,
          getTitlesWidget: (value, meta) => Text(value.toStringAsFixed(0)),
        ),
      ),
      bottomTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          getTitlesWidget: (value, meta) {
            if (value.toInt() < widget.data.length) {
              final date = widget.data[value.toInt()].date;
              return Text(date.substring(5)); // 显示 MM-DD
            }
            return const Text('');
          },
        ),
      ),
    );
  }

  ExtraLinesData _buildExtraLines() {
    return ExtraLinesData(
      horizontalLines: [
        HorizontalLine(
          y: _calculateMA(5),
          color: Colors.blue,
          strokeWidth: 2,
          label: HorizontalLineLabel(
            alignment: Alignment.centerRight,
            style: const TextStyle(color: Colors.blue),
            labelResolver: (line) => 'MA5',
          ),
        ),
        HorizontalLine(
          y: _calculateMA(10),
          color: Colors.orange,
          strokeWidth: 2,
        ),
      ],
    );
  }

  double _calculateMA(int days) {
    // 计算移动平均线逻辑
  }
}

class CandleData {
  final double open;
  final double high;
  final double low;
  final double close;
  final DateTime date;

  CandleData({
    required this.open,
    required this.high,
    required this.low,
    required this.close,
    required this.date,
  });
}

3、关键功能实现

1. 蜡烛图核心逻辑

   • 使用 CandlestickBarGroup 绘制单个蜡烛
   • 通过 CandleColors 区分涨跌颜色
   • 设置 barsSpace 控制蜡烛间距

2. 技术指标

// 计算移动平均线
List<FlSpot> _calculateMA(int period) {
  List<FlSpot> maPoints = [];
  for (int i = period - 1; i < widget.data.length; i++) {
    double sum = 0;
    for (int j = 0; j < period; j++) {
      sum += widget.data[i - j].close;
    }
    maPoints.add(FlSpot(i.toDouble(), sum / period));
  }
  return maPoints;
}

3. 交互功能

candleTouchData: CandleTouchData(
  touchTooltipData: CandleTouchTooltipData(
    tooltipBgColor: Colors.blueGrey,
    getTooltipItems: (touchedSpots) {
      return touchedSpots.map((spot) {
        final candle = widget.data[spot.barGroupIndex];
        return CandleTooltipItem(
          '日期: ${candle.date.toString().substring(0, 10)}\n'
          '开: ${candle.open.toStringAsFixed(2)}\n'
          '高: ${candle.high.toStringAsFixed(2)}\n'
          '低: ${candle.low.toStringAsFixed(2)}\n'
          '收: ${candle.close.toStringAsFixed(2)}',
          const TextStyle(color: Colors.white),
        );
      }).toList();
    },
  ),
),

4、性能优化技巧

1. 数据分页加载

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) => _buildCandle(index),
  itemCount: data.length,
)

2. Canvas 缓存

RepaintBoundary(
  child: CandlestickChart(...),
)

3. 简化渲染：
   • 使用 simpleData 模式处理大数据集
   • 禁用非必要装饰元素

5、完整解决方案代码地址

推荐参考这些高质量开源实现：

1. fl_chart 官方示例
   • 最权威的 K 线图实现
   • 包含所有高级功能演示
   • 持续更新维护
2. StockChart 高级实现
   • 专业级股票图表解决方案
   • 支持多指标叠加
   • 包含分时图/五日线切换
3. 量化交易完整项目
   • 真实股票应用案例
   • 包含 API 对接和实时数据
   • 技术指标计算完整实现

6、专业级功能扩展

1. 多时间周期切换

enum TimeFrame { m1, m5, m15, h1, d1 }

void _switchTimeFrame(TimeFrame frame) {
  // 重新获取对应周期数据
}

2. 技术指标叠加

LineChartBarData(
  spots: _calculateMACD(),
  color: Colors.purple,
  barWidth: 2,
  isCurved: true,
  belowBarData: BarAreaData(show: false),
)

3. 成交量图表

BarChart(
  BarChartData(
    barGroups: data.map((d) => BarChartGroupData(
      x: data.indexOf(d),
      barRods: [BarChartRodData(toY: d.volume)]
    )).toList(),
  ),
)

7、性能对比

推荐选择：对于大多数应用，fl_chart 在功能和性能之间提供了最佳平衡，且完全免费开源。

8、实时数据集成

// WebSocket 实时数据对接
final channel = IOWebSocketChannel.connect('wss://stock-api.com');

channel.stream.listen((data) {
  final newCandle = CandleData.fromJson(json.decode(data));
  setState(() {
    widget.data.add(newCandle);
    if (widget.data.length > 500) {
      widget.data.removeAt(0); // 保持固定数据量
    }
  });
});

这些实现方案提供了从基础到高级的完整股票图表解决方案，可根据项目需求选择合适的实现方式。