内容简介:在这篇指导中,你能学习如何使用gesture,并学习如何绘制一个饼图。当我们使用CustomPainter绘制自己的形状时,如果你不允许与用户交互,对用户来说会有点沉闷,所以我们应该知道如何使用手势来丰富我们的交互。像往常一样,先展示效果。我们希望当我们在屏幕上移动手指的时候,饼图可以跟着相应的方向进行转动。
在这篇指导中,你能学习如何使用gesture,并学习如何绘制一个饼图。
当我们使用CustomPainter绘制自己的形状时,如果你不允许与用户交互,对用户来说会有点沉闷,所以我们应该知道如何使用手势来丰富我们的交互。
0. 我们要实现什么
像往常一样,先展示效果。我们希望当我们在屏幕上移动手指的时候,饼图可以跟着相应的方向进行转动。
1. 定义一个CustomPainter
首先,定义一个Painter:
class CircleTrianglePainter extends CustomPainter { CircleTrianglePainter({this.scrollLen}); final double scrollLen; @override void paint(Canvas canvas, Size size) { } @override bool shouldRepaint(CircleTrianglePainter oldDelegate) => oldDelegate.scrollLen != scrollLen;
然后,用三角弧线画圆:
void _drawTriCircle(Canvas canvas, Paint paint, {Offset center, double radius, List<double> sources, List<Color> 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<double> 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 https://tryenough.com/
热度: 4
以上所述就是小编给大家介绍的《flutter 学习使用自定义view并添加手势动作》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- TensorFlow 实现手势识别
- Flutter 手势密码控件
- Flutter学习指南:交互、手势和动画
- iOS —— 触摸事件传递及响应与手势
- iOS – 几种常见手势的简单使用[原创]
- 使用Flutter仿写TikTok的手势交互(二)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
谷歌的断舍离:互联网企业的破坏式创新
[日]辻野晃一郎 / 樊颖 / 机械工业出版社 / 2018-1 / 45.00
本书主要分为三部分: 第一部分主要讨论了世界当下如火如荼的互联网企业进军传统产业大潮,并探讨了传统企业在互联网时代的救赎之路。 第二部分主要探讨了成功体验的反面:速度与迭代,并讨论了传统企业之所以无法实现迭代与快速发展的关键原因。介绍互联网公司如何通过组织精简流程来实现高速竞争时代的机动性。 第三部分讨论了互联网时代究竟需要什么样的人才,传统企业的员工应当怎样投身互联网企业才能避......一起来看看 《谷歌的断舍离:互联网企业的破坏式创新》 这本书的介绍吧!