flutter 学习使用自定义view并添加手势动作

栏目: Html5 · 发布时间: 5年前

内容简介:在这篇指导中,你能学习如何使用gesture,并学习如何绘制一个饼图。当我们使用CustomPainter绘制自己的形状时,如果你不允许与用户交互,对用户来说会有点沉闷,所以我们应该知道如何使用手势来丰富我们的交互。像往常一样,先展示效果。我们希望当我们在屏幕上移动手指的时候,饼图可以跟着相应的方向进行转动。

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

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

0. 我们要实现什么

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

flutter 学习使用自定义view并添加手势动作

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 . 这些值被用来改变上面的转盘的角度

GitHub

欢迎大家关注我的网站:

try enough https://tryenough.com/

热度: 4


以上所述就是小编给大家介绍的《flutter 学习使用自定义view并添加手势动作》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大话数据结构

大话数据结构

程杰 / 清华大学出版社 / 2011-6 / 59.00元

本书为超级畅销书《大话设计模式》作者程杰潜心三年推出的扛鼎之作!以一个计算机教师教学为场景,讲解数据结构和相关算法的知识。通篇以一种趣味方式来叙述,大量引用了各种各样的生活知识来类比,并充分运用图形语言来体现抽象内容,对数据结构所涉及到的一些经典算法做到逐行分析、多算法比较。与市场上的同类数据结构图书相比,本书内容趣味易读,算法讲解细致深刻,是一本非常适合自学的读物。 本书以一个计算机教师教......一起来看看 《大话数据结构》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码