flutter中widget手势检测和触摸事件处理

手势检测和触摸事件处理
如何将一个onClick监听器添加到Flutter中的widget

在Android中,您可以通过调用方法setOnClickListener将OnClick绑定到按钮等view上.

在Flutter中,添加触摸监听器有两种方法:

如果Widget支持事件监听,则可以将一个函数传递给它并进行处理。例如,RaisedButton有一个onPressed参数

@override
Widget build(BuildContext context) {
  return new RaisedButton(
      onPressed: () {
        print("click");
      },
      child: new Text("Button"));
}

如果Widget不支持事件监听,则可以将该Widget包装到GestureDetector中,并将处理函数传递给onTap参数

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
      child: new GestureDetector(
        child: new FlutterLogo(
          size: 200.0,
        ),
        onTap: () {
          print("tap");
        },
      ),
    ));
  }
}

如何处理widget上的其他手势
使用GestureDetector,可以监听多种手势,例如

Tap

onTapDown
onTapUp
onTap
onTapCancel
Double tap

onDoubleTap 用户快速连续两次在同一位置轻敲屏幕.
长按

onLongPress
垂直拖动

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd
水平拖拽

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

For example here is a GestureDetector for double tap on the FlutterLogo that will make it rotate 例如,这里是一个GestureDetector,用于监听FlutterLogo的双击事件,双击时使其旋转

AnimationController controller;
CurvedAnimation curve;

@override
void initState() {
  controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
  curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
          child: new GestureDetector(
            child: new RotationTransition(
                turns: curve,
                child: new FlutterLogo(
                  size: 200.0,
                )),
            onDoubleTap: () {
              if (controller.isCompleted) {
                controller.reverse();
              } else {
                controller.forward();
              }
            },
        ),
    ));
  }
}

项目源码github

您还可以看看下面的博客文章,回顾以前和继续学习,包含我在学习开发中遇到的难题等等

如对您有帮助,欢迎starts 谢谢。下面是我自己写的demo 可以看看 一块学习:

Flutter入门,学习历程,进入开发,在安卓手机运行起来
Visual Studio code工具开发flutte总结
Flutter 跨平台开发 为什么选择Flutter
跨平台开发 为什么选择Flutter
Android 开发者 for Flutter (1)Flutter和Android中的View对比及如何更新widget
Android 开发者 for Flutter (2)如何布局? XML layout 文件跑哪去了?及布局中添加或删除组件
Android 开发者 for Flutter (3) flutter中动画是如何实现的 及 如何使用Canvas draw/paint
Flutter轮播图编写(两种方式)CarouselSlider和PageView(自动轮播,也可以手动左右拖拽)
flutter 中tabbar切换上下均可,banner轮播图,listview刷新添加更多,listview嵌套gridview
Flutter 项目编写 第三方插件库文件引入,本地图片 json数据引入解析
flutter run 运行项目 所遇到的问题总结(Scaffold加padding及 flutter/material.dart’;爆红问题解决;listview嵌套gridview滑动问题)
Flutter 中 如何构建自定义 Widgets
安卓Intent在Flutter中等价于什么?及数据传输和startActivityForResult 在Flutter中等价于什么
异步UI runOnUiThread 在Flutter中等价于什么
AsyncTask和IntentService在Flutter中等价于什么
OkHttp在Flutter中等价于什么

感谢Flutter中文网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值