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中文网

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

猜你喜欢