【备战春招】第6天 Flutter中检测用户手势以及处理点击事件

课程名称：Flutter从入门到进阶 实战携程网App 一网打尽核心技术
课程章节：Flutter入门：基础知识十六讲
课程讲师：CrazyCodeBoy

课程内容

检测用户手势

在 Flutter 中，处理Widget的点击等手势行为，先看 Widget 本身是否有支持对应事件的监听回调。

如果Widget 本身支持事件的监听，可以直接在回调方法里进行处理。比如ElevatedButton 有一个onPressed()的回调方法。

@override
Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () {
            //todo
        },
        child: const Text('Button');
    );
}

如果 Widget 本身没有对应的监听，可以使用 GestureDetector，GestureDetector中封装了大量跟手势相关的回调：

• onTapxxx()，与点击相关的事件，包括onTapDown()、onTapUp()、onTap()和onTapCancel();
• onDoubleTap()，双击事件；
• onLongPress()，长按事件；
• onVerticalDragxxx()，垂直方向拖动事件，包括onVerticalDragStart()、onVerticalDragUpdate()和onVerticalDragEnd();
• onHorizontalDragxxx()，水平方向拖动事件，包括onHorizontalDragStart()、onHorizontalDragUpdate()和onHorizontalDragEnd();
• onPanxxx()，可以看作是onVerticalDrag和onHorizontalDrag的合集，包括onPanStart()、onPanUpdate()和onPanEnd();

导入和使用Flutter的资源文件

在Flutter 中使用资源文件，首先需要在根目录下的 pubspec.yaml 文件中配置资源的路径，注意缩进。

flutter:
    assets:
        // 表示引入根目录下的 images 文件夹下的所有资源文件
        - images/
        // 只添加 images/ 下的 ic_launcher.png
        - images/ic_launcher.png

在使用第三方库资源的时候，需要加上包名。

child: Image.asset(
  // 图片路径
  'places/india_chennai_flower_market.png',
  // 包名
  package: 'flutter_gallery_assets',
),

如何打开三方应用

Flutter打开三方应用是通过 Deeplink 的方式，可以使用插件 url_launcher，调起三方应用时，需要三方提供的 schema，示例代码：

_openMap() async {
    // Android
    final url = Uri.parse('geo:52.32,4.917'); //APP提供者提供的 schema
    if (await canLaunchUrl(url)) {
      await launchUrl(url);
    } else {
      //iOS
      final url = Uri.parse('http://maps.apple.com/?ll=52.32,4.917');
      if (await canLaunchUrl(url)) {
        await launchUrl(url);
      } else {
        throw 'Could not launch $url';
      }
    }
  }