flutter paint 绘制刻度线刻度

在 Flutter 中，`CustomPaint` 是一个用于自定义绘制组件的库，它允许开发者直接操作 Skia 图形库进行复杂图形的绘制。如果你想要在 Flutter 应用中绘制刻度线和刻度，你可以这样做：

首先，创建一个 `CustomPainter` 类，继承自 `CustomPainter` 并覆盖 `paint` 函数。在这个函数里，你可以使用 `Path` 和 `Paint` 对象来绘制线条和文本。

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

class ScalePainter extends CustomPainter {
  final List<double> tickValues; // 刻度值列表
  final double minValue;
  final double maxValue;

  ScalePainter(this.tickValues, this.minValue, this.maxValue);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black // 设置颜色
      ..strokeWidth = 1.0 // 线条宽度
      ..style = PaintingStyle.stroke; // 实线

    // 绘制基线
    canvas.drawLine(Offset(0, size.height), Offset(size.width, size.height), paint);

    // 绘制刻度线
    for (double value in tickValues) {
      if (value != minValue && value != maxValue) {
        double position = (value - minValue) * size.width / (maxValue - minValue);
        canvas.drawLine(Offset(position, size.height), Offset(position, size.height + 5), paint);
      }

      // 如果需要显示数字刻度
      String text = '${value.toInt().toString() ?? '.'}';
      TextSpan span = TextSpan(
        text: text,
        style: TextStyle(fontSize: 8, color: Colors.black.withOpacity(0.5)),
      );
      TextPainter painter = TextPainter(text: TextSpan文字:span);
      painter.layout();
      painter.paint(canvas, Offset(position, size.height + 10));
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true; // 更新时重新绘制
}

然后，在构建 Widget 的时候，通过 `CustomPaint` 将自定义的绘图逻辑应用到屏幕上：

Widget build(BuildContext context) {
  return Container(
    width: 300, // 设定容器宽度
    height: 100, // 设定容器高度
    child: CustomPaint(
      painter: ScalePainter([0, 20, 40, 60, 80], 0, 100),
      // 可以调整刻度值、最小值和最大值
    ),
  );
}