flutter实现点击事件

本文实例为大家分享了flutter实现点击事件的具体代码，供大家参考，具体内容如下

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

在Flutter中，有两种方法:

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

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

2.如果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");
    },
   ),
  ));
 }
}

2.1.使用GestureDetector，可以监听多种手势

（1）Tap

onTapDown
onTapUp
onTap
onTapCancel

(2)Double tap

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

(3)长按

onLongPress

(4)垂直拖动

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

(5)水平拖拽

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

2.2.示例：监听FlutterLogo的双击事件，双击时使其旋转。

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return new MaterialApp(
   title: '导航演示1',
   home: new MyAppHome(),
  );
 }
}

class MyAppHome extends StatefulWidget{
 @override
 _MyAppHomeState createState() => _MyAppHomeState();

}
class _MyAppHomeState extends State<MyAppHome> with TickerProviderStateMixin{
 AnimationController controller;
 CurvedAnimation curve;

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

 @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();
     }
    },
   ),
  ));
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • flutter InkWell实现水波纹点击效果

    在flutter 开发中用InkWell或者GestureDetector将某个组件包起来,已添加点击事件. GestureDetector 使用点击无水波纹出现,InkWell可以实现水波纹效果. 正常情况下使用 : InkWell( //单击事件响应 onTap: () { }, child: Container( alignment: Alignment(0, 0), height: 28, width: 120, child: Text("InkWell单击事件"), ), )

  • flutter实现点击事件

    本文实例为大家分享了flutter实现点击事件的具体代码,供大家参考,具体内容如下 在Android中,您可以通过调用方法setOnClickListener将OnClick绑定到按钮等view上. 在Flutter中,有两种方法: 1.如果Widget支持事件监听,则可以将一个函数传递给它并进行处理.例如,RaisedButton有一个onPressed参数 @override Widget build(BuildContext context) { return new RaisedButt

  • flutter Bloc 更新后事件同步与异步详解

    目录 前言 使用方式 Bloc 新形态用法 事件队列的阻塞属性? 前言 最近,小轰参与了公司 flutter 项目关于 Dart 2.0 的空安全升级工作.我们升级了所有依赖的三方库,其中就包括有 Bloc 库.作为一款使用率颇高的状态管理框架, Bloc 在版本迭代中进行了少许结构和细节的优化,下面是小轰对于 Bloc 新版本的使用总结. 使用方式 小轰使用的 Bloc 版本如下 flutter_bloc: ^7.3.1 通过最简单的例子来学习新知识 创建一个包含 加 减 操作的页面,使用 b

  • Angularjs中使用指令绑定点击事件的方法

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external n

  • IOS 中UIImageView响应点击事件

    IOS 中UIImageView响应点击事件 有时候会遇到点击一张图片,然后让这张图片触发一个事件,或者是跳转视图,想到的第一个方法就是用UIButton,将Button的背景图片属性设置为该图片,效果达到了,但不是最好的方法,直接触发方法 定义Image的对象 UIImageView *imgView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0,320,100)]; imgView.backgroundColor = [UIColor

  • asp.net js模拟Button点击事件

    复制代码 代码如下: <script type="text/javascript"> ///模拟按钮点击事件,插入数据 function addTmpDataApp() { document.<%=formCC.ClientID %>.<%=btnjh.ClientID %>.click(); } </script> 这有时候是无法执行模拟点击的. 需要加上一句代码就可以了. 复制代码 代码如下: <script type=&quo

  • iview给radio按钮组件加点击事件的实例

    如下所示: <RadioGroup v-model="formValidate.phone"> <Radio label="phone">商家电话</Radio> <Radio label="leaderPhone">负责人电话</Radio> <span @click="inputPhone()"><Radio label="newPho

  • jQuery实现按钮只点击一次后就取消点击事件绑定的方法

    本文实例讲述了jQuery实现按钮只点击一次后就取消点击事件绑定的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" id="my-selector" value="只能点击一次" /> <script> $('#my-selector').bind('click', function() { $(this).unbind('click'); alert('Clicked and un

  • jQuery实现当按下回车键时绑定点击事件

    当按下回车键时,绑定按钮点击事件代码如下,通过检测按下的键值,回车键keycode为13,判断是否是回车键,然后完成相应的方法. 复制代码 代码如下: <script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mouse").click(); } }); $("#mouse").click(function(){ alert("n

  • 为body标签和document.body都添加点击事件后仅Firefox弹出了两次

    这是 菜菜 刚刚发现的 给body标签和document.body都添加点击事件后仅Firefox之弹出了两次 HTML BODY document.body.onclick=function(){ alert ('body'); }; [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 1,给body标签添加了onclick事件,弹出1 2,给document.body添加了onclick事件,弹出body 点击页面红色区域 IE6/7/8/9/Safari/Chrome/Opera

  • java用arraycopy实现多击事件

    java用arraycopy实现多击事件

    本文实例为大家分享了java用arraycopy实现多击事件的3种方法,供大家参考,具体内容如下 1.双击事件的实现 我们规定两次点击的事件间隔在500毫秒内为双击事件,这一值可以随意限定. bt_click.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if(startTime!=0){ long endTime = System.currentTimeMillis(); i

随机推荐