美文网首页flutter & DartDartFlutter中文社区
flutter深入研究之GestureDetector

flutter深入研究之GestureDetector

作者: iCloudEnd | 来源:发表于2019-02-16 08:57 被阅读5次

    学习flutter 肯定是快乐的,实际做项目必然是充满挑战。为了迎接未来的挑战,我们需要对flutter有更深入的了解

    GestureDetector 类深入研究

    GestureDetetor 简介

    GestureDetector 是检测手势的widget。如果GestureDetector 的child属性不空,GestureDetector将自己大小设置为child的大小。如果child属性为空,它将自己的大小设置为父组件的大小。(稍后通过代码测试一下).

    Flutter为了方便出来touch事件创建了InkWell和InkResponse组件(源码在container.dart 186行)。这类组件可以包裹包裹您自己的组件,让您自己的组件可以响应touch事件。简单来说,如果您打算让图片实现按钮的功能,那么就可以使用InkResponse让图片响应点击事件了。

    demo 代码
    GestureDetector(
      onTap: () {
        setState(() { _lights = true; });
      },
      child: Container(
        color: Colors.yellow,
        child: Text('TURN LIGHTS ON'),
      ),
    )
    

    属性介绍

    Property/Callback Description
    onTapDown OnTapDown is fired everytime the user makes contact with the screen.
    onTapUp When the user stops touching the screen, onTapUp is called.
    onTap When the screen is briefly touched, onTap is triggered.
    onTapCancel When a user touches the screen but does not complete the Tap, this event is fired.
    onDoubleTap onDoubleTap is called when the screen is touched twice in quick succession.
    onLongPress The the user touches the screen for longer than 500 milliseconds, onLongPress is fired.
    onVerticalDragDown When a pointer comes into contact with the screen and begin to move in a vertical direction, onVerticalDown is called.
    onVerticalDragStart onVerticalDragStart is called when the pointer starts moving in a vertical direction.
    onVerticalDragUpdate This is called every time there is a change in the position of the pointer on the screen.
    onVerticalDragEnd When the user stops moving, the drag is considered complete and this event is called.
    onVerticalDragCancel Called when the user abruptly stops dragging.
    onHorizontalDragDown Called when the user/pointer comes into contact with the screen and begin to move horizontally.
    onHorizontalDragStart The user/pointer has made contact with the screen and started moving in a horizontal direction.
    onHorizontalDragUpdate Called every time there is a change in the location of the pointer on the horizontal/x-axis.
    onHorizontalDragEnd At the end of a horizontal drag, this event is called.
    onHorizontalDragCancel Called when the pointer which triggered onHorizontalDragDown did not complete successfully.
    onPanDown Called when a pointer comes into contact with the screen.
    onPanStart onPanStart is fired when the pointer event begins to move.
    onPanUpdate onPanUpdate is called everytime the pointer changes location.
    onPanEnd When the pan is complete, this event is called.
    onScaleStart When a pointer comes in contact with the screen and establishes a focal point of 1.0, this event is called.
    onScaleUpdate The pointer which is in contact with the screen have indicated a new focal point
    onScaleEnd Called when the pointer is no longer in contact with the screen signalling the end of the gesture.

    到源码里看看

    GestureDetector 的属性定义
    class GestureDetector extends StatelessWidget {
    // GestureDetector 是个无状态的组件
      GestureDetector({
        Key key,
        this.child,
        this.onTapDown,
        this.onTapUp,
        this.onTap,
        this.onTapCancel,
        this.onDoubleTap,
        this.onLongPress,
        this.onLongPressUp,
        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,
        this.onPanDown,
        this.onPanStart,
        this.onPanUpdate,
        this.onPanEnd,
        this.onPanCancel,
        this.onScaleStart,
        this.onScaleUpdate,
        this.onScaleEnd,
        this.behavior,
        this.excludeFromSemantics = false,
        this.dragStartBehavior = DragStartBehavior.down,
      }) 
      /// The widget below this widget in the tree.
      ///
      /// {@macro flutter.widgets.child}
      final Widget child;
    
      /// A pointer that might cause a tap has contacted the screen at a particular
      /// location.
      ///
      /// This is called after a short timeout, even if the winning gesture has not
      /// yet been selected. If the tap gesture wins, [onTapUp] will be called,
      /// otherwise [onTapCancel] will be called.
      final GestureTapDownCallback onTapDown;
    
      /// A pointer that will trigger a tap has stopped contacting the screen at a
      /// particular location.
      ///
      /// This triggers immediately before [onTap] in the case of the tap gesture
      /// winning. If the tap gesture did not win, [onTapCancel] is called instead.
      final GestureTapUpCallback onTapUp;
    
      /// A tap has occurred.
      ///
      /// This triggers when the tap gesture wins. If the tap gesture did not win,
      /// [onTapCancel] is called instead.
      ///
      /// See also:
      ///
      ///  * [onTapUp], which is called at the same time but includes details
      ///    regarding the pointer position.
      final GestureTapCallback onTap;
    
      /// The pointer that previously triggered [onTapDown] will not end up causing
      /// a tap.
      ///
      /// This is called after [onTapDown], and instead of [onTapUp] and [onTap], if
      /// the tap gesture did not win.
      final GestureTapCancelCallback onTapCancel;
    
      /// The user has tapped the screen at the same location twice in quick
      /// succession.
      final GestureTapCallback onDoubleTap;
    
      /// A pointer has remained in contact with the screen at the same location for
      /// a long period of time.
      final GestureLongPressCallback onLongPress;
    
      /// A pointer that has triggered a long-press has stopped contacting the screen.
      final GestureLongPressUpCallback onLongPressUp;
    
      /// A pointer has contacted the screen and might begin to move vertically.
      final GestureDragDownCallback onVerticalDragDown;
    
      /// A pointer has contacted the screen and has begun to move vertically.
      final GestureDragStartCallback onVerticalDragStart;
    
      /// A pointer that is in contact with the screen and moving vertically has
      /// moved in the vertical direction.
      final GestureDragUpdateCallback onVerticalDragUpdate;
    
      /// A pointer that was previously in contact with the screen and moving
      /// vertically is no longer in contact with the screen and was moving at a
      /// specific velocity when it stopped contacting the screen.
      final GestureDragEndCallback onVerticalDragEnd;
    
      /// The pointer that previously triggered [onVerticalDragDown] did not
      /// complete.
      final GestureDragCancelCallback onVerticalDragCancel;
    
      /// A pointer has contacted the screen and might begin to move horizontally.
      final GestureDragDownCallback onHorizontalDragDown;
    
      /// A pointer has contacted the screen and has begun to move horizontally.
      final GestureDragStartCallback onHorizontalDragStart;
    
      /// A pointer that is in contact with the screen and moving horizontally has
      /// moved in the horizontal direction.
      final GestureDragUpdateCallback onHorizontalDragUpdate;
    
      /// A pointer that was previously in contact with the screen and moving
      /// horizontally is no longer in contact with the screen and was moving at a
      /// specific velocity when it stopped contacting the screen.
      final GestureDragEndCallback onHorizontalDragEnd;
    
      /// The pointer that previously triggered [onHorizontalDragDown] did not
      /// complete.
      final GestureDragCancelCallback onHorizontalDragCancel;
    
      /// A pointer has contacted the screen and might begin to move.
      final GestureDragDownCallback onPanDown;
    
      /// A pointer has contacted the screen and has begun to move.
      final GestureDragStartCallback onPanStart;
    
      /// A pointer that is in contact with the screen and moving has moved again.
      final GestureDragUpdateCallback onPanUpdate;
    
      /// A pointer that was previously in contact with the screen and moving
      /// is no longer in contact with the screen and was moving at a specific
      /// velocity when it stopped contacting the screen.
      final GestureDragEndCallback onPanEnd;
    
      /// The pointer that previously triggered [onPanDown] did not complete.
      final GestureDragCancelCallback onPanCancel;
    
      /// The pointers in contact with the screen have established a focal point and
      /// initial scale of 1.0.
      final GestureScaleStartCallback onScaleStart;
    
      /// The pointers in contact with the screen have indicated a new focal point
      /// and/or scale.
      final GestureScaleUpdateCallback onScaleUpdate;
    
      /// The pointers are no longer in contact with the screen.
      final GestureScaleEndCallback onScaleEnd;
    
      /// The pointer is in contact with the screen and has pressed with sufficient
      /// force to initiate a force press. The amount of force is at least
      /// [ForcePressGestureRecognizer.startPressure].
      ///
      /// Note that this callback will only be fired on devices with pressure
      /// detecting screens.
      final GestureForcePressStartCallback onForcePressStart;
    
      /// The pointer is in contact with the screen and has pressed with the maximum
      /// force. The amount of force is at least
      /// [ForcePressGestureRecognizer.peakPressure].
      ///
      /// Note that this callback will only be fired on devices with pressure
      /// detecting screens.
      final GestureForcePressPeakCallback onForcePressPeak;
    
      /// A pointer is in contact with the screen, has previously passed the
      /// [ForcePressGestureRecognizer.startPressure] and is either moving on the
      /// plane of the screen, pressing the screen with varying forces or both
      /// simultaneously.
      ///
      /// Note that this callback will only be fired on devices with pressure
      /// detecting screens.
      final GestureForcePressUpdateCallback onForcePressUpdate;
    
      /// The pointer is no longer in contact with the screen.
      ///
      /// Note that this callback will only be fired on devices with pressure
      /// detecting screens.
      final GestureForcePressEndCallback onForcePressEnd;
    
      /// How this gesture detector should behave during hit testing.
      ///
      /// This defaults to [HitTestBehavior.deferToChild] if [child] is not null and
      /// [HitTestBehavior.translucent] if child is null.
      final HitTestBehavior behavior;
    
      /// Whether to exclude these gestures from the semantics tree. For
      /// example, the long-press gesture for showing a tooltip is
      /// excluded because the tooltip itself is included in the semantics
      /// tree directly and so having a gesture to show it would result in
      /// duplication of information.
      final bool excludeFromSemantics;
    
      // TODO(jslavitz): Set the DragStartBehavior default to be start across all widgets.
      /// Determines the way that drag start behavior is handled.
      ///
      /// If set to [DragStartBehavior.start], gesture drag behavior will
      /// begin upon the detection of a drag gesture. If set to
      /// [DragStartBehavior.down] it will begin when a down event is first detected.
      ///
      /// In general, setting this to [DragStartBehavior.start] will make drag
      /// animation smoother and setting it to [DragStartBehavior.down] will make
      /// drag behavior feel slightly more reactive.
      ///
      /// By default, the drag start behavior is [DragStartBehavior.down].
      ///
      /// Only the [onStart] callbacks for the [VerticalDragGestureRecognizer],
      /// [HorizontalDragGestureRecognizer] and [PanGestureRecognizer] are affected
      /// by this setting.
      ///
      /// See also:
      ///
      ///  * [DragGestureRecognizer.dragStartBehavior], which gives an example for the different behaviors.
      final DragStartBehavior dragStartBehavior;
    ```··

    相关文章

      网友评论

        本文标题:flutter深入研究之GestureDetector

        本文链接:https://www.haomeiwen.com/subject/ihfbeqtx.html