Flutter 手势篇

1 概述

Flutter中的手势分为两层，第一层是触摸原始指针(Pointer)事件，描述了屏幕上指针（如触摸、鼠标和触控笔）的位置和移动。
指针(Pointer)代表用户与屏幕交互的原始数据，有四种事件类型：

PointerDownEvent: 指针接触到屏幕
PointerMoveEvent: 指针从屏幕上的一个位置移动到另一个位置
PointerUpEvent: 指针停止接触屏幕
PointerCancelEvent: 指针的输入事件不再针对此应用(事件取消)

第二层就是我们可以检测到的手势，主要分为三大类：轻击、拖动和缩放。

2 GestureDetector

GestureDetector可以进行手势检测，如单击，双击，长按，垂直、水平拖动等。

GestureDetector事件描述

事件名	描述
onTapDown	点击屏幕立即触发
onTapUp	手指离开屏幕
onTap	点击屏幕
onTapCancel	点击事件结束，onTapDown不会再触发点击事件
onDoubleTap	快速连续两次在同一位置点击屏幕
onLongPress	长按
onVerticalDragStart	与屏幕接触，可能会开始垂直移动
onVerticalDragUpdate	与屏幕接触，已经沿垂直移动
onVerticalDragEnd	先前与屏幕接触并垂直移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动
onHorizontalDragStart	与屏幕接触，可能会开始水平移动
onHorizontalDragUpdate	与屏幕接触，已经沿水平移动
onHorizontalDragEnd	先前与屏幕接触并水平移动的指针不再与屏幕接触，并在停止接触屏幕时以特定速度移动

3 Dissmissible

可用于实现滑动删除。

常见属性

属性名	类型	说明
onDismissed	DismissDirectionCallback	当包裹的组件消失后回调
movementDuration	Duration	定义组件消失的时长
onResize	VoidCallback	组件大小改变时的回调
resizedDuration	Duration	组件大小改变时长
child	Widget	子元素，滑动时显示的组件

4 示例1-实现点击效果

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyButton(),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('onTap');
      },
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          color: Theme.of(context).buttonColor,
        ),
        padding: EdgeInsets.all(20.0),
        child: Text('MyButton'),
      ),
    );
  }
}

5 示例2-实现滑动删除

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  final List<String> items = List.generate(20, (index) => 'item $index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return Dismissible(
              onDismissed: (_) {
                items.removeAt(index);
              },
              movementDuration: Duration(milliseconds: 100),
              key: Key(item),
              child: ListTile(
                title: Text('$item'),
              ),
              background: Container(color: Color(0xffff0000),),
          );
        },
      ),
    );
  }
}