Fiutter- 手势识别组件

前言

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一

header-illustration.png

GestureDetector

用来检测用户的手势可以识别点击，长按，缩放等触摸事件的组件，可以监听多种操作事件

    this.onTapDown,
    this.onTapUp,
    this.onTap,
    this.onTapCancel,
    this.onSecondaryTap,
    this.onSecondaryTapDown,
    this.onSecondaryTapUp,
    this.onSecondaryTapCancel,
    this.onTertiaryTapDown,
    this.onTertiaryTapUp,
    this.onTertiaryTapCancel,
    this.onDoubleTapDown,
    this.onDoubleTap,
    this.onDoubleTapCancel,
    this.onLongPress,
    this.onLongPressStart,
    this.onLongPressMoveUpdate,
    this.onLongPressUp,
    this.onLongPressEnd,
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    this.onVerticalDragDown,
    this.onVerticalDragStart,
    this.onVerticalDragUpdate,
    this.onVerticalDragEnd,
    this.onVerticalDragCancel,
    this.onHorizontalDragDown,
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
    this.onHorizontalDragCancel,
    this.onForcePressStart,
    this.onForcePressPeak,
    this.onForcePressUpdate,
    this.onForcePressEnd,

InkWell

在用户点击时出现水波纹，splashColor可以设置点击的水波纹效果，highlightColor表示按下的颜色

Column(
          children: [
            InkWell(
                onTap: () => {},
                splashColor: Colors.blue,
                child: Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    child: Text('Click'))),
            InkWell(
                onTap: () => {},
                highlightColor: Colors.blue,
                child: Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    child: Text('Click')))
          ],
        )

inkWell.png

Listener

是监听指针移动的控件，比如按下，移动，抬起，取消等，相比于GestureDetector会更基础，并且它会回调一些其他的数据比如按压力度，按压坐标位置等，可以用来实现一些特殊的需求

Listener(
          child: Container(
              color: Colors.blue,
              child: Text('Mike'),
              width: 100,
              height: 100,
              alignment: Alignment.center),
          onPointerDown: (PointerDownEvent pointerDownEvent) => {
            print("${pointerDownEvent.position}")
          },
        )

画板案例实现

1. 需要记录用户绘制(触摸)的位置，需要使用到Listener
2. 讲记录用户触摸的位置进行绘制，需要使用CustomePaint进行绘制
3. 需要将绘制的路径使用数组做一个记录，方便在canvans绘制的时候绘制所有绘制路径出来

class _TestHomePageState extends State {
  List> path = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Listener(
          child: Container(
              width: double.infinity,
              height: double.infinity,
              child: CustomPaint(painter: DrawPaint(path)),
          ),
          onPointerDown: (PointerDownEvent pointerDownEvent) {
            setState(() {
              path.add([pointerDownEvent.localPosition]);
            });
          },
          onPointerMove: (PointerMoveEvent pointerMoveEvent) {
            setState(() {
              path.last.add(pointerMoveEvent.localPosition);
            });
          },
          onPointerUp: (PointerUpEvent pointerUpEvent) {
            setState(() {
              path.last.add(pointerUpEvent.localPosition);
            });
          },
          onPointerCancel: (PointerCancelEvent pointerCancelEvent) {
            setState(() {
              path.last.add(pointerCancelEvent.localPosition);
            });
          },
        ));
  }
}

class DrawPaint extends CustomPainter {
  final List> path;

  DrawPaint(this.path);

  Paint _paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.stroke
    ..strokeWidth = 3;

  @override
  void paint(Canvas canvas, Size size) {
    path.forEach((element) {
      Path drawPath = Path();
      for (int i = 0; i < element.length; i++) {
        if (i == 0) {
          drawPath.moveTo(element[i].dx, element[i].dy);
        } else {
          drawPath.lineTo(element[i].dx, element[i].dy);
        }
      }
      canvas.drawPath(drawPath, _paint);
    });

  }

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

draw.png

欢迎关注Mike的

Android 知识整理