Flutter：用Canvas打造迷人表盘

2024-02-09 23:01:57

在Flutter画布上绘制引人注目的表盘：循序渐进指南

引言

在Flutter的世界中，Canvas工具脱颖而出，成为绘制自定义用户界面元素的强大工具。其中，制作精美表盘是运用Canvas的绝佳方式之一。本文将提供逐步指南，带你使用Canvas在Flutter中创建功能齐全且赏心悦目的表盘。

绘制表盘背景

首先，让我们绘制表盘背景：

final paint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth = 4.0
  ..color = Colors.grey;

final center = Offset(size.width / 2, size.height / 2);
final radius = size.width / 2 - 40;

canvas.drawCircle(center, radius, paint);

添加刻度线

接下来，添加刻度线以指示时间：

for (int i = 0; i < 60; i++) {
  double angle = (i * 2 * pi / 60);
  final x1 = center.dx + (radius * cos(angle));
  final y1 = center.dy + (radius * sin(angle));
  final x2 = center.dx + (radius - 20) * cos(angle);
  final y2 = center.dy + (radius - 20) * sin(angle);

  canvas.drawLine(Offset(x1, y1), Offset(x2, y2), paint);
}

添加数字

为了方便读时，我们添加数字：

final textPainter = TextPainter(
  textAlign: TextAlign.center,
  textDirection: TextDirection.ltr,
);

for (int i = 0; i < 12; i++) {
  double angle = (i * 2 * pi / 12);
  final x = center.dx + (radius - 30) * cos(angle);
  final y = center.dy + (radius - 30) * sin(angle);

  final textStyle = TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  );

  textPainter.text = TextSpan(
    text: i.toString(),
    style: textStyle,
  );

  textPainter.layout();
  textPainter.paint(canvas, Offset(x - textPainter.width / 2, y - textPainter.height / 2));
}

添加指针

最后，是时候添加表示时间流逝的指针了：

// 时针
final hourHandLength = radius - 60;
final hourHandPaint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth = 8.0
  ..color = Colors.black;

// 分针
final minuteHandLength = radius - 40;
final minuteHandPaint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth = 6.0
  ..color = Colors.red;

// 秒针
final secondHandLength = radius - 20;
final secondHandPaint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3.0
  ..color = Colors.blue;

// 获取当前时间
final now = DateTime.now();

// 计算指针角度
final hourAngle = (now.hour + (now.minute / 60)) * 2 * pi / 12;
final minuteAngle = (now.minute + (now.second / 60)) * 2 * pi / 60;
final secondAngle = now.second * 2 * pi / 60;

// 绘制指针
canvas.drawLine(
  center,
  Offset(center.dx + hourHandLength * cos(hourAngle), center.dy + hourHandLength * sin(hourAngle)),
  hourHandPaint,
);

canvas.drawLine(
  center,
  Offset(center.dx + minuteHandLength * cos(minuteAngle), center.dy + minuteHandLength * sin(minuteAngle)),
  minuteHandPaint,
);

canvas.drawLine(
  center,
  Offset(center.dx + secondHandLength * cos(secondAngle), center.dy + secondHandLength * sin(secondAngle)),
  secondHandPaint,
);

实现动态表盘

为了让表盘动态显示时间，我们使用Ticker对象以一定间隔触发回调：

AnimationController secondHandController = AnimationController(
  vsync: vsync,
  duration: const Duration(seconds: 60),
);

Ticker secondTicker = secondHandController.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    secondTicker.removeListener(handleTick);
    secondHandController.reset();
    secondHandController.forward();
  }
});

void handleTick(AnimationStatus status) {
  setState(() => _secondAngle = secondHandController.value * 2 * pi);
}