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"), )

通过手势处理实现一个拖动示例

class _HomePageState extends State<HomePage> { double _left = 0.0; double _top = 0.0; GlobalKey _gKey = GlobalKey(); double stackWidth = 0.0; double stackHeight = 0.0; @override void initState() { super.initState(); // 注册一个回调，当屏幕渲染第一帧的时候回调 WidgetsBinding.instance.addPostFrameCallback((_){ stackWidth = _gKey.currentContext.size.width; stackHeight = _gKey.currentContext.size.height; }); } @override Widget build(BuildContext context) { print("_HomePageState build ..."); return Scaffold( appBar: AppBar( title: Text("Flutter Widget"), ), body: GestureDetector( onPanUpdate: (DragUpdateDetails details){ setState(() { // 边界检查 if(_left + 200 > stackWidth){ _left = stackWidth- 200; }else if(_left < 0){ _left = 0; } else{ _left += details.delta.dx; } if(_top + 200 > stackHeight){ _top = stackHeight- 200; }else if(_top < 0){ _top = 0; }else{ _top += details.delta.dy; } }); }, child: Stack( key: _gKey, children: <Widget>[ Positioned( left: _left, top: _top, width: 200.0, height: 200.0, child: Container( color: Colors.amber, ), ) ], ), ), ); }

缩放示例

class _ScaleWidgetState extends State<ScaleWidget>{ double _width = 300.0; double _height = 200.0; @override Widget build(BuildContext context) { return Center( child: GestureDetector( child: Container( width: _width, height: _height, color: Colors.pink, ), onScaleUpdate: (e) { print(e); setState(() { // 限制缩放比例在0.7-1.2之间，超过范围则变为原大小 _width = 300* e.scale.clamp(0.7, 1.2); _height = 200*e.scale.clamp(0.7, 1.2); }); }, ) ); } }

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设计中的一个轻量级消息通知控件。

Scaffold.of(context).showSnackBar(SnackBar( content: Text('这是一个 SnackBar'), backgroundColor: Colors.black26, duration: Duration(seconds: 1), behavior: SnackBarBehavior.floating, action: SnackBarAction( label: '我是按钮', onPressed: () { print('点击了按钮'); }), ));

小结：

• 显示Snackbar ：Scaffold.of(context).showSnackBar(snackBar)
• 隐藏当前的SnackBar：Scaffold.of(context).hideCurrentSnackBar()