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

Posted 2022-11-30 子不语归来

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

1. 如果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。