Flutter学习笔记之-触摸事件

Flutter学习笔记之-触摸事件

官方文档中介绍了Flutter中采用Listener和GestureDetector来对触摸事件的监听处理。

• Listener的基本使用

Listener可以对child中的widget的触摸事件进行监听，包括手指按下、移动、抬起等。

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Listener(
      child: Container(
        alignment: Alignment.center,
        child: Text("测试Listener"),
        color: Colors.red,
        width: 200,
        height: 200,
      ),
      onPointerDown: ((event) {
        print("onPointerDown");
      }),
      onPointerMove: ((event) {
        print("onPointerMove");
      }),
      onPointerCancel: ((event) {
        print("onPointerCancel");
      }),
      onPointerUp: ((event) {
        print("onPointerUp");
      }),
    );
  }
}

• GestureDetector的基本使用

同样GestureDetector也是对child中的widget事件进行监听，GestureDetector是对Listener的封装，提供更多的监听事件。

class DemoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        alignment: Alignment.center,
        child: Text("测试GestureDetector"),
        color: Colors.red,
        width: 200,
        height: 200,
      ),
      onTapDown: ((details) {
        print("onTapDown");
      }),
      onTapUp: ((details) {
        print("onTapUp");
      }),
      onTapCancel: () {
        print("onTapCancel");
      },
      onDoubleTap: (() {
        print("onDoubleTap");
      }),
      onHorizontalDragDown: ((details) {
        print("onHorizontalDragDown - 水平拖拽");
      }),
      onLongPress: (() {
        print("onLongPress");
      }),
      onPanDown: ((details) {
        print("onPanDown");
      }),
    );
  }
}