原文链接

在这篇指导中，你能学习如何使用gesture,并学习如何绘制一个饼图。

当我们使用CustomPainter绘制自己的形状时，如果你不允许与用户交互，对用户来说会有点沉闷，所以我们应该知道如何使用手势来丰富我们的交互。

0. 我们要实现什么

像往常一样，先展示效果。我们希望当我们在屏幕上移动手指的时候，饼图可以跟着相应的方向进行转动。

1. 定义一个CustomPainter

首先，定义一个Painter：

class CircleTrianglePainter extends CustomPainter {  CircleTrianglePainter({
   this.scrollLen});  final double scrollLen;@overridevoid paint(Canvas canvas, Size size) {}@overridebool shouldRepaint(CircleTrianglePainter oldDelegate) =>    oldDelegate.scrollLen != scrollLen;复制代码

然后，用三角弧线画圆：

void _drawTriCircle(Canvas canvas, Paint paint,    {Offset center,    double radius,    List
    
      sources,    List
     
       colors,    double startRadian}) {  assert(sources != null && sources.length > 0);  assert(colors != null && colors.length > 0);  var total = 0.0;  for (var d in sources) {    total += d;  }  List
      
        radians = [];  for (var data in sources) {    radians.add(data * 2 * pi / total);  }  for (int i = 0; i < radians.length; i++) {    paint.color = colors[i % colors.length];    canvas.drawArc(Rect.fromCircle(center: center, radius: radius),        startRadian, radians[i], true, paint);    startRadian += radians[i];  }}复制代码
      
     
    

在 paint(canvas, size) 方法中绘制我们的形状：

if (size.width > 1.0 && size.height > 1.0) {      print(">1.9");      _sizeUtil.logicSize = size;    }    var paint = Paint()      ..style = PaintingStyle.fill      ..color = BLUE_NORMAL      ..strokeWidth = 2.0      ..isAntiAlias = true;    paint.color = Colors.grey[900];    paint.color = RED_DARK1;    paint.strokeWidth = 20;    paint.style = PaintingStyle.stroke;    var center = Offset(      _sizeUtil.getAxisX(250.0),      _sizeUtil.getAxisY(250.0),    );    var radius = _sizeUtil.getAxisBoth(200);    paint.style = PaintingStyle.fill;    _drawTriCircle(      canvas,      paint,      sources: [1,2,1,1,1,1,1],      colors: [        RED_DARK1,        BLUE_NORMAL,      GREEN_NORMAL,        RED_DARK5,        YELLOW_NORMAL      ],      center: center,      radius: radius,      startRadian: 1.4 * scrollLen / radius,    );    canvas.save();    canvas.restore();复制代码

2.使用CustomPaint

你可以像下面这样使用你的CustomPaint：

Container(  width: 300,  height: 300,  child: CustomPaint(    painter: (CircleTrianglePainter(scrollLen: _len)),    child: Container(),  ),),复制代码

3.实现手势控制

在flutter中，如果你想实现手势，你可以先泽Listenser或者GestureDetector来满足你的需求。他们都是widget，你可以像平常的widget一样使用他们。但是GestureDetector有更加丰富的回调方法。这里我们使用GestureDetector来实现我们的需求。

Container(    child: Center(  child: GestureDetector(    onHorizontalDragStart: (detail) {      _x = detail.globalPosition.dx;    },    onVerticalDragStart: (detail) {      _y = detail.globalPosition.dy;    },    onHorizontalDragUpdate: (detail) {      setState(() {        _len -= detail.globalPosition.dx - _x;        _x = detail.globalPosition.dx;      });    },    onVerticalDragUpdate: (detail) {      setState(() {        _len += detail.globalPosition.dy - _y;        _y = detail.globalPosition.dy;      });    },    child: Container(      width: 300,      height: 300,      child: CustomPaint(        painter: (CircleTrianglePainter(scrollLen: _len)),        child: Container(),      ),    ),  ),))复制代码

这个GestureDetector有很多的方法，我们只用了4个。我们来看下横向的方法，纵向的类似的：

onHorizontalDragStart: (detail) {      _x = detail.globalPosition.dx;    },onHorizontalDragUpdate: (detail) {  setState(() {    _len -= detail.globalPosition.dx - _x;    _x = detail.globalPosition.dx;  });},复制代码

当我们在横向开始拖拽的时候，我们开始记录 x 轴的坐标值。

当拖拽的位置改变后，我们记录改变的值 _len . 这些值被用来改变上面的转盘的角度

欢迎大家关注我的网站：

try enough