手记

【备战春招】第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';
      }
    }
  }

0人推荐
随时随地看视频
慕课网APP