Flutter中的点击、拖动和其它手势

在Android中，您可以通过调用方法setOnClickListener将OnClick绑定到按钮等view上.
在Flutter中，添加触摸监听器有两种方法:

如果Widget支持事件监听，则可以将一个函数传递给它并进行处理。例如，RaisedButton有一个onPressed参数

@override
Widget build(BuildContext context) {
  return new RaisedButton(
      onPressed: () {
        print("click");
      },
      child: new Text("Button"));
}

2.如果Widget不支持事件监听，则可以将该Widget包装到GestureDetector中，并将处理函数传递给onTap参数

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
      child: new GestureDetector(
        child: new FlutterLogo(
          size: 200.0,
        ),
        onTap: () {
          print("tap");
        },
      ),
    ));
  }
}

手势

手势表示可以从多个单独的指针事件（甚至可能是多个单独的指针）识别的语义动作（例如，轻敲，拖动和缩放）。完整的一个手势可以分派多个事件，对应于手势的生命周期（例如，拖动开始，拖动更新和拖动结束）：

Tap
- onTapDown 指针已经在特定位置与屏幕接触
- onTapUp 指针停止在特定位置与屏幕接触
- onTap tap事件触发
- onTapCancel 先前指针触发的onTapDown不会在触发tap事件
双击
- onDoubleTap 用户快速连续两次在同一位置轻敲屏幕
长按onLongPress
- onLongPress 指针在相同位置长时间保持与屏幕接触
垂直拖动onVerticalDragStart
- onVerticalDragStart 指针已经与屏幕接触并可能开始垂直移动
- onVerticalDragUpdate 指针与屏幕接触并已沿垂直方向移动
- onVerticalDragEnd 先前与屏幕接触并垂直移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移
水平拖动
- onHorizontalDragStart 指针已经接触到屏幕并可能开始水平移动
- onHorizontalDragUpdate 指针与屏幕接触并已沿水平方向移动
- onHorizontalDragEnd 先前与屏幕接触并水平移动的指针不再与屏幕接触，并在停止接触屏幕时以特定速度移动

要从widget层监听手势，请使用 GestureDetector.

尝试识别与其非空回调对应的手势。

If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead.如果这个widget有一个child，那么它会按照其尺寸行为推迟这个child。如果它没有child，它就会长大，以适应parent。默认情况下，具有不可见子项的GestureDetector忽略触摸;这种行为可以被控制的行为。GestureDetector还会监听可访问性事件并将它们映射到回调函数。要忽略辅助功能事件，请将excludeFromSemantics设置为true。此示例通过设置_lights字段使得矩形响应被点击：

  new GestureDetector(
    onTap: () {
      setState(() {
        lights = true;
      });
    },
    child: new Container(
      color: Colors.yellow,
      child: new Text('TURN LIGHTS ON'),
    ),
  );

如果您使用的是Material Components，那么大多数widget已经对tap或手势做出了响应。例如IconButton和FlatButton响应presses（taps），ListView响应滑动事件触发滚动。如果您不使用这些widget，但想要在点击时上出现“墨水飞溅”效果，可以使用InkWell。

Flutter中的点击、拖动和其它手势

手势

猜你喜欢