<li id="fw3su"></li>
  • <li id="fw3su"></li>
  • <div id="fw3su"><tr id="fw3su"></tr></div>
    <dl id="fw3su"></dl>
  • <div id="fw3su"><tr id="fw3su"></tr></div>
  • <sup id="fw3su"></sup>
    <progress id="fw3su"></progress><div id="fw3su"><tr id="fw3su"></tr></div><input id="fw3su"><ins id="fw3su"></ins></input>

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

    在这篇指导中,你能学习如何使用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;
      });
    },

    当我们在横向开始拖拽的时候,我们开?#25216;?#24405; x 轴的坐标值。

    当拖拽的位置改变后,我们记录改变的值 _len . 这些?#24403;?#29992;来改变上面的转盘的角度

    GitHub

    欢迎大家关注?#19994;?#32593;站:

    try enough https://tryenough.com/

    热度: 4

    我来评几句
    登录后评论

    已发表评论数()

    相关站点

    +订阅
    热门文章
    11选五