手势事件

本文介绍Flutter的手势组件GestureDetector和水波纹组件InkWell，GestureDetector是一个用于手势识别的功能性组件，我们通过它可以来识别各种手势。

GestureDetector

• 定义

  GestureDetector({
    Key? key,
    this.child,
    // 单击
    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.onLongPressDown,
    this.onLongPressCancel,
    this.onLongPress,
    this.onLongPressStart,
    this.onLongPressMoveUpdate,
    this.onLongPressUp,
    this.onLongPressEnd,
    // 两点 三点 长按
    this.onSecondaryLongPressDown,
    this.onSecondaryLongPressCancel,
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    this.onTertiaryLongPressDown,
    this.onTertiaryLongPressCancel,
    this.onTertiaryLongPress,
    this.onTertiaryLongPressStart,
    this.onTertiaryLongPressMoveUpdate,
    this.onTertiaryLongPressUp,
    this.onTertiaryLongPressEnd,
    // 垂直 水平 Drag
    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.start,
  })
  

• 示例

  import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const ModelBox());
  }
  
  class ModelBox extends StatelessWidget {
    const ModelBox({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        home: EventWidget(),
      );
    }
  }
  
  class EventWidget extends StatefulWidget {
    const EventWidget({
      Key? key,
    }) : super(key: key);
  
    @override
    State<EventWidget> createState() => _EventWidgetState();
  }
  
  class _EventWidgetState extends State<EventWidget> {
    double? dx, dy;
    
    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: () {
          print('单击');
        },
        onLongPress: () {
          print('长按');
        },
        onDoubleTap: ()=> print('双击'),
        // 按下
        onPanDown: (DragDownDetails e) {
          print("按下 ${e.globalPosition}");
        },
        // 按下滑动
        onPanUpdate: (DragUpdateDetails e) {
          setState(() {
            dx = e.delta.dx;
            dy = e.delta.dy;
          });
        },
        // 松开
        onPanEnd: (DragEndDetails e) {
          print(e.velocity);
        },
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Box Model'),
          ),
          body: Center(
            child: Container(
              child: Text('x: $dx, y: $dy'),
            ),
          )),
      );
    }
  }
  

InkWell

• 定义

  const InkWell({
    Key? key,
    Widget? child,
    // 点击
    GestureTapCallback? onTap,
    GestureTapCallback? onDoubleTap,
    // 长按
    GestureLongPressCallback? onLongPress,
    GestureTapDownCallback? onTapDown,
    GestureTapCancelCallback? onTapCancel,
    ValueChanged<bool>? onHighlightChanged,
    ValueChanged<bool>? onHover,
    // 光标样式
    MouseCursor? mouseCursor,
    // 颜色
    Color? focusColor,
    Color? hoverColor,
    Color? highlightColor,
    MaterialStateProperty<Color?>? overlayColor,
    Color? splashColor,
    InteractiveInkFeatureFactory? splashFactory,
    double? radius,
    BorderRadius? borderRadius,
    ShapeBorder? customBorder,
    bool? enableFeedback = true,
    bool excludeFromSemantics = false,
    FocusNode? focusNode,
    bool canRequestFocus = true,
    ValueChanged<bool>? onFocusChange,
    bool autofocus = false,
  })
  

• 示例

  import 'package:flutter/material.dart';
  
  void main(List<String> args) {
    runApp(const EventInkWellWidget());
  }
  
  class EventInkWellWidget extends StatelessWidget {
    const EventInkWellWidget({Key? key}) : super(key: key);
  
    Widget _buildView() {
      return InkWell(
        // 点击
        onTap: () {},
        // 水波纹颜色
        splashColor: Colors.pink,
        // 高亮颜色
        highlightColor: Colors.red,
        // 鼠标滑过颜色 web才有
        hoverColor: Colors.brown,
        child: const Text(
          '点我',
          style: TextStyle(
            fontSize: 50,
          ),
        ),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: Center(
            child: _buildView(),
          ),
        ),
      );
    }
  }