说明

手势是用户交互必不可少的功能，各种点击触摸事件等。下面将常用的几个处理类进行展开讨论。

1，添加点按涟漪效果 (Material Design)

当我们在开发遵循 Material Design 规范应用的时候，我们可能会需要为某个 widgets 的点击加入涟漪效果。
Flutter 提供了 InkWell widget 来实现这个功能。示例如下

//用 InkWell widget 包裹它，并设置回调函数，就可以显示涟漪动画了
InkWell(
  onTap: () {
    //实现回调函数
  },
  child: const Padding(
    padding: EdgeInsets.all(12.0),
    child: Text('Flat Button'),
  ),
)

2，捕获和处理点击动作

我们的 app 不仅要把信息展示给用户，还要和用户进行交互。怎么响应用户的点击，拖动等操作行为呢？ ——使用 GestureDetector Widget。示例如下

// 用 GestureDetector 包裹按钮，并传入 onTap 回调函数
GestureDetector(
  // 当它的子元素被点击，显示一个 snackbar 
  onTap: () {
    const snackBar = SnackBar(content: Text('Tap'));
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  },
  // 这个是我们的自定义按钮
  child: Container(
    padding: const EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Colors.lightBlue,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: const Text('My Button'),
  ),
)

注意事项：
1，这里为了说明原理，我们创建了自定义的按钮，其实 Flutter 已经为我们准备了很多现成的按钮供我们使用，比如： ElevatedButton、TextButton 和 CupertinoButton。
2，GestureDetector 不只有onTap 点击回调事件，还有onDoubleTap:"双击",onLongPress: "长按",onTapCancel: "取消",onTapUp: "松开",onTapDown: "按下"；拖动手势onPanDown（手指按下）、onPanUpdate（手指滑动）、onPanEnd（滑动结束）；缩放手势的onScaleUpdate方法等。

3，实现「滑动清除」效果

“滑动清除”在许多移动应用中都很常见。比如，我们在写一个邮件应用，我们会想让用户能够滑动删除列表中的邮件消息。用户操作时，我们可能需要把这封邮件从收件箱移动到垃圾箱。Flutter 提供了 Dismissible Widget 来轻松地实现这个需求。示例如下

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// MyApp是一个StatefulWidget。这样，我们就能够在列表项被移除的时候，更新Widget的状态。
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    const title = 'Dismissing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              // 每个Dismissible实例都必须包含一个Key。Key让Flutter能够对Widgets做唯一标识。
              key: Key(item),
              // 我们还需要提供一个函数，告诉应用，在项目被移出后，要做什么。
              onDismissed: (direction) {
                // Remove the item from the data source.
                // 从数据源中移除项目
                setState(() {
                  items.removeAt(index);
                });

                // 移除成功展示一个SnackBar提示
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('$item dismissed')));
              },
              // 列表项被滑出时，显示一个红色背景
              background: Container(color: Colors.red),
              child: ListTile(
                title: Text(item),
              ),
            );
          },
        ),
      ),
    );
  }
}

手势的部分就先介绍到这里，如有遗漏欢迎留言，如有错误欢迎指正，谢谢