flutter 画转盘

import 'package:flutter/material.dart';
import 'dart:math';const double spacingAngle = 45.0; // 每两个文字之间的角度
// 自定义绘制器，ArcTextPainter 用于在圆弧上绘制文字
class ArcTextPainter extends CustomPainter {final double rotationAngle; // 动画旋转角度final double strokeWidth; // 圆环的宽度final List<String> text; // 文字列表final double curIndex; // 当前旋转进度ArcTextPainter({required this.rotationAngle,required this.strokeWidth,required this.text,required this.curIndex,});@overridevoid paint(Canvas canvas, Size size) {final radius = size.width / 2; // 圆的半径final center = Offset(size.width / 2, size.height / 2); // 圆心的坐标// 创建用于绘制圆弧的画笔final paint = Paint()..color = Colors.grey.shade300 // 圆弧的颜色..strokeWidth = strokeWidth // 圆弧的宽度..style = PaintingStyle.stroke; // 画笔样式为描边// 计算圆弧的矩形区域final arcRect = Rect.fromCircle(center: center, radius: radius - strokeWidth / 2);canvas.drawArc(arcRect, pi, pi, false, paint); // 绘制圆弧// 创建用于绘制箭头的画笔final arrowPaint = Paint()..color = Colors.purple // 箭头的颜色..style = PaintingStyle.fill; // 画笔样式为填充// 定义箭头的路径final arrowPath = Path();arrowPath.moveTo(center.dx, center.dy - radius + strokeWidth / 2); // 箭头起点arrowPath.lineTo(center.dx - 10, center.dy - radius + strokeWidth / 2 + 20); // 箭头的左边arrowPath.lineTo(center.dx + 10, center.dy - radius + strokeWidth / 2 + 20); // 箭头的右边arrowPath.close(); // 结束路径canvas.drawPath(arrowPath, arrowPaint); // 绘制箭头// 绘制圆弧上的文字_drawTextAlongArc(canvas, center, radius - strokeWidth / 2);}// 在圆弧上绘制文字void _drawTextAlongArc(Canvas canvas, Offset center, double radius) {final textPainter = TextPainter(textAlign: TextAlign.center, // 文字对齐方式为居中textDirection: TextDirection.ltr, // 文字方向为从左到右);// 遍历所有文字并绘制for (int i = 0; i < text.length; i++) {// 计算当前文字的角度double angle = (i - curIndex) * spacingAngle * (pi / 180) - pi/2;// print("angle:${i} ${angle*180/pi}");// 检查文字是否在可视范围内if (angle >= -pi && angle <= 0) {// 计算文字的位置final x = center.dx + radius * cos(angle); // x 坐标final y = center.dy + radius * sin(angle); // y 坐标canvas.save(); // 保存当前画布状态canvas.translate(x, y); // 移动画布到文字的位置// 设置文字的样式和内容textPainter.text = TextSpan(text: text[i],style: TextStyle(fontSize: 14, color: Colors.black), // 文字的样式);textPainter.layout(); // 计算文字的大小// 计算文字的实际可见区域double visibleFraction = _calculateVisibleFraction(angle);if (visibleFraction < 1.0) {// 如果文字不完全可见，则应用裁剪遮罩canvas.clipRect(Rect.fromLTWH(-textPainter.width / 2, // 左上角 x 坐标-textPainter.height / 2, // 左上角 y 坐标textPainter.width, // 文字的宽度textPainter.height, // 文字的高度));}textPainter.paint(canvas, Offset(-textPainter.width / 2, -textPainter.height / 2)); // 绘制文字canvas.restore(); // 恢复画布状态}}}// 计算文字的可见比例double _calculateVisibleFraction(double angle) {// 文字显示的比例，确保在 [-pi, 0] 范围内显示完全if (angle < -pi / 2) {return max(0, (angle + pi) / (pi / 2)); // 文字被遮挡的部分} else if (angle > 0) {return max(0, (-angle) / (pi / 2)); // 文字被遮挡的部分}return 1.0; // 文字完全可见}@overridebool shouldRepaint(CustomPainter oldDelegate) => true; // 是否需要重新绘制
}// ArcTextExample 是一个示例 widget，用于展示自定义绘制的效果
class ArcTextExample extends StatefulWidget {final double strokeWidth; // 圆环的宽度final List<String> text; // 文字列表final int initialIndex; // 初始索引final double animationDuration; // 动画持续时间const ArcTextExample({Key? key,required this.strokeWidth,required this.text,required this.initialIndex,required this.animationDuration,}) : super(key: key);@override_ArcTextExampleState createState() => _ArcTextExampleState();
}class _ArcTextExampleState extends State<ArcTextExample>with SingleTickerProviderStateMixin {late AnimationController _controller; // 动画控制器late Animation<double> _animation; // 动画double curIndex = 0.0; // 保存当前旋转的进度bool isAnimating = false; // 标记动画是否正在进行final TextEditingController indexController = TextEditingController(); // 目标索引的文本控制器final TextEditingController durationController = TextEditingController(); // 动画持续时间的文本控制器@overridevoid initState() {super.initState();// 初始化文本控制器的值indexController.text = widget.initialIndex.toString();durationController.text = widget.animationDuration.toString();// 计算初始旋转角度double initialAngle = ( - widget.initialIndex ) * spacingAngle * (pi / 180) - pi / 2;curIndex = widget.initialIndex.toDouble(); // 初始化时 curIndex 是初始索引// 创建动画控制器_controller = AnimationController(duration: Duration(seconds: widget.animationDuration.toInt()), // 设置动画的持续时间vsync: this, // 与当前的 TickerProvider 绑定);// print("initialAngle: ${initialAngle*180/pi}");// 创建动画_animation = Tween<double>(begin: initialAngle, // 动画开始的角度end: initialAngle + 2 * pi, // 动画结束的角度).animate(_controller)..addListener(() {setState(() {print("_animation.value:  ${_animation.value * 180 / pi}");// 更新当前角度对应的索引范curIndex = (-(_animation.value + pi / 2) * (180 / pi)) / spacingAngle;print("Current Index: ${curIndex.toStringAsFixed(2)}"); // 打印当前索引});});}@overridevoid dispose() {_controller.dispose(); // 释放动画控制器资源indexController.dispose(); // 释放目标索引的文本控制器资源durationController.dispose(); // 释放动画持续时间的文本控制器资源super.dispose();}// 旋转到目标索引void rotateToIndex(int targetIndex, double duration) {if(targetIndex != curIndex){setState(() {if (isAnimating) {// 如果正在进行动画，则停止并重置_controller.stop();isAnimating = false;}_controller.duration = Duration(seconds: duration.toInt()); // 设置动画的持续时间double startAngle = (-curIndex) * spacingAngle * (pi / 180) - pi / 2; // 使用当前索引角度作为起始角度double targetAngle = (-targetIndex) * spacingAngle * (pi / 180) - pi / 2;  // 计算目标角度print("开始度数: ${startAngle * 180/pi} 结束度数：${targetAngle * 180/pi}");double endAngle;// 确定旋转方1if (targetAngle < 0) {// 顺时针旋转endAngle = startAngle + targetAngle;} else {// 逆时针旋转endAngle = startAngle - targetAngle;}_animation = Tween<double>(begin: startAngle, // 动画开始的角度end: targetAngle, // 动画结束的角度).animate(_controller);isAnimating = true; // 标记动画为进行中_controller.reset(); // 重置动画控制_controller.forward(); // 开始动画});}}@overrideWidget build(BuildContext context) {return Scaffold(body: Column(children: [SizedBox(height: 140), // 上部间距Center(child: CustomPaint(size: Size(300, 200), // 设置圆弧的大小painter: ArcTextPainter(rotationAngle: _animation.value, // 当前旋转角度strokeWidth: widget.strokeWidth, // 圆环的宽度text: widget.text, // 文字列表curIndex: curIndex, // 当前旋转进度),),),SizedBox(height: 20), // 下部间距Padding(padding: const EdgeInsets.symmetric(horizontal: 20.0), // 水平内边距child: Column(children: [// 目标索引的输入框TextField(controller: indexController,decoration: InputDecoration(labelText: 'Target Index', // 输入框标签),keyboardType: TextInputType.number, // 键盘类型为数字),// 动画持续时间的输入框TextField(controller: durationController,decoration: InputDecoration(labelText: 'Animation Duration (seconds)', // 输入框标签),keyboardType: TextInputType.number, // 键盘类型为数字),SizedBox(height: 20), // 输入框和按钮之间的间距// 旋转按钮ElevatedButton(onPressed: () {// 获取目标索引和动画持续时间int targetIndex = int.tryParse(indexController.text) ?? 0;double duration = double.tryParse(durationController.text) ?? 10.0;// if (isAnimating) {//   // 如果动画正在进行，停止并保存当前进度//   _controller.stop();//   curIndex = (-(_animation.value + pi / 2) * (180 / pi)) / spacingAngle; // 保存当前进度为 curIndex//   _controller.reset(); // 重置动画控制器// }// 旋转到目标索引rotateToIndex(targetIndex, duration);},child: Text('Rotate to Index'), // 按钮文本),],),),],),);}
}void main() {runApp(MaterialApp(home: ArcTextExample(strokeWidth: 100.0, // 圆环的宽度text: List.generate(11, (i) => '第$i层'), // 文字列表initialIndex: 3, // 初animationDuration: 10.0, // 默认动画时间为10秒),));
}

​​​​​​​