Flutter快速上手15：事件与通知

Flutter中的触摸事件可分为两层来看待。第一层是触摸原事件（指针），有相应的四种事件类型：PointerDownEvent：用户与屏幕接触产生了联系。PointerMoveEvent：手指已从屏幕上的一个位置移动到另一个位置。PointerUpEvent：用户已停止接触屏幕。PointerCancelEvent：此指针的输入不再指向此应用程序。第二层就是检测到的手势，主要分为三大类，包括轻击、拖动和缩放

GestureDetector

GestureDetector 可以进行手势检测，共有7种类型事件。比如点击一次、双击、长按、垂直滑动及水平滑动等

需要注意，GestureDetector并不会监听所有的手势，只有传入的回调非空时，才会监听。所以，如果想要禁用某个手势时，可将对应的回调函数设置为null。

另外，GestureDetector的某些事件是互斥的，不能同时存在，例如onVerticalUpdate、onHorizontalUpdate、onPanUpdate这三个事件不能同时存在，onPanUpdate和onScaleUpdate也不能同时存在。

测试手势处理回调

GestureDetector(
                child: Container(
                  width: 300.0,
                  height: 500.0,
                  color: Colors.amber,
                ),
                // onTapDown: (_) => debugPrint("onTapDown"),
                // onTapUp: (_) => debugPrint("onTapUp"),
                // onTap: () => debugPrint("onTap"),
                // onTapCancel: () => debugPrint("onTapCancel"),
                // onDoubleTap: () => debugPrint("onDoubleTap"),
                // onLongPress: () => debugPrint("onLongPress"),
                // onLongPressUp: () => debugPrint("onLongPressUp"),
                // onVerticalDragDown: (_) => debugPrint("onVerticalDragDown"),
                // onVerticalDragStart: (_) => debugPrint("onVerticalDragStart"),
                // onVerticalDragUpdate: (_) => debugPrint("onVerticalDragUpdate"),
                // onVerticalDragEnd: (_) => debugPrint("onVerticalDragEnd"),
                // onVerticalDragCancel: () => debugPrint("onVerticalDragCancel"),
                // onHorizontalDragDown: (_) => debugPrint("onHorizontalDragDown"),
                // onHorizontalDragStart: (_) =>
                //     debugPrint("onHorizontalDragStart"),
                // onHorizontalDragUpdate: (_) =>
                //     debugPrint("onHorizontalDragUpdate"),
                // onHorizontalDragEnd: (_) => debugPrint("onHorizontalDragEnd"),
                // onHorizontalDragCancel: () =>
                //     debugPrint("onHorizontalDragCancel"),
                // onPanDown: (_) => debugPrint("onPanDown"),
                // onPanStart: (_) => debugPrint("onPanStart"),
                // onPanUpdate: (_) => debugPrint("onPanUpdate"),
                // onPanEnd: (_) => debugPrint("onPanEnd"),
                // onPanCancel: () => debugPrint("onPanCancel"),
                onScaleStart: (_) => debugPrint("onScaleStart"),
                onScaleUpdate: (_) => debugPrint("onScaleUpdate"),
                onScaleEnd: (_) => debugPrint("onScaleEnd"),
              ),

InkWell

具有水波纹效果（或称为溅墨效果）的点击事件控件。能处理的触摸事件很少，如需处理复杂的手势事件，应使用GestureDetector。

需要注意，当InkWell的父控件设置了背景色时，是看不到溅墨效果效果的，此时需要进行特殊处理，当使用InkWell包裹image时，也无法显示出溅墨效果，这时建议使用Ink.Image控件。

// 需使用Matetial 以及 Ink控件包裹
Material(
    child: Ink(
        decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10)
        ),
        child: InkWell(
            onTap: (){
                print("onTap...");
            },
            child: Container(
                padding: EdgeInsets.symmetric(horizontal: 16,vertical: 6),
                child: Text("这是按钮",style: TextStyle(color: Colors.white),),
            ),
        ),
    ),
)

如需取消溅墨效果，可进行如下设置

// 设置highlightColor和radius取消溅墨效果
InkWell(
    highlightColor: Colors.transparent,
    radius: 0.0,
    child: Text(
        "click me",
      ),
    onTap: () {
      print("onTap");
    },
  ),

Snackbar

它是Material Design设计中的一个轻量级消息通知控件。

小结：

显示Snackbar ：Scaffold.of(context).showSnackBar(snackBar)

隐藏当前的SnackBar：Scaffold.of(context).hideCurrentSnackBar()

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~