Flutter简单手势

Flutter简单手势_第1张图片

Flutter 手势可以有多种,这里简单的用的Listener() 监听手势。

GestureDetector是对多个手势监听的封装。内部手势用的就是Listener();
import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:flutter_video_world/ui/widgets/progress.dart';

class HeartAnimatedWidget extends StatefulWidget {
  Offset offset;
  Size size;

  HeartAnimatedWidget({@required this.offset ,@required this.size}): assert (size!=null) ;

  @override
  _HeartAnimatedWidgetState createState() => _HeartAnimatedWidgetState();
}

class _HeartAnimatedWidgetState extends State {
  Offset position;

//  position = detail.localPosition;
//  print("--->  $position");
//  setState(() {});
  @override
  Widget build(BuildContext context) => Listener(
        onPointerDown: (event) {
          position = event.localPosition;
          print("--->  $position");
          setState(() {});
        },
        onPointerMove: (event) {
          position = event.localPosition;
          print("--->  $position");
          setState(() {});
        },
        onPointerUp: (event) {
          position = null;
          setState(() {});
        },
    behavior: HitTestBehavior.deferToChild,
        child: CustomPaint(
          size: widget.size,
          painter: HeartPainter(offset: position),
        ),
      );
}

class HeartPainter extends CustomPainter {
  Offset offset;

  HeartPainter({this.offset});

  @override
  void paint(Canvas canvas, Size size) {
    double pointRadius = 8;
    var paint = Paint()
      ..strokeWidth = 1
      ..style = PaintingStyle.fill
      ..isAntiAlias = true
      ..color = Colors.lightBlueAccent;

    canvas.drawRect(Offset(0, 0) & size, paint);

    paint.color = Colors.black;
    var leftPoint = Offset(pointRadius, size.height / 2);
    var rightPoint = Offset(size.width - pointRadius, size.height / 2);

    canvas.drawCircle(leftPoint, pointRadius, paint);
    canvas.drawCircle(rightPoint, pointRadius, paint);

    paint.style = PaintingStyle.stroke;
    Path path = new Path();
    path.moveTo(leftPoint.dx, leftPoint.dy);
    if (offset != null) {
//      size = Size(size.width - pointRadius * 2, size.height - pointRadius * 2);
    double x = offset.dx.clamp(pointRadius * 2, size.width-pointRadius * 2);
    double y = offset.dy.clamp(pointRadius * 2, size.height - pointRadius * 2);
      offset = Offset(x, y);
      //二阶贝塞尔
      path.quadraticBezierTo(
          offset.dx, offset.dy, rightPoint.dx, rightPoint.dy);
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

你可能感兴趣的:(flutter)