flutter手势

import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/pages/dismissed_page.dart‘;

class GestureAppPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _GestureAppPageState();
  }
}

class _GestureAppPageState extends State<GestureAppPage> {

  var tapEvent = ‘‘;

//  _showSnakeBar(String str) {
//    final snackBar = new SnackBar(content: new Text(str));
//    Scaffold.of(context).showSnackBar(snackBar);
//  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(‘Gesture 学习‘),
        centerTitle: true,
      ),
      body: new ListView(
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
            child: new RaisedButton(
                textColor: Colors.black,
                child: new Text(‘RaisedButton 点击‘),
                onPressed: () {
                  final snackBar = new SnackBar(content: new Text("这是一个 RaisedButton 点击事件,onPressed处理"));
                  Scaffold.of(context).showSnackBar(snackBar);
//                  _showSnakeBar("这是一个 RaisedButton 点击事件,onPressed处理");
                }),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
            child: new GestureDetector(
              onTap: () {
                final snackBar = new SnackBar(content: new Text("这是一个GestureDetector监听的onTap事件"));
                Scaffold.of(context).showSnackBar(snackBar);
//                _showSnakeBar("这是一个GestureDetector监听的onTap事件");
              },
              child: new BorderButton(‘GestureDetector onTap 按钮‘),
            ),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
            child:
                new Text(tapEvent, style: Theme.of(context).textTheme.display1),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
            child: new GestureDetector(
              onTapDown: (tapDown) {
                setState(() {
                  tapEvent = ‘这是GestureDetector监听的onTapDown事件‘;
                });
              },
              onTapUp: (tapUp) {
                setState(() {
                  tapEvent = ‘这是GestureDetector监听的onTapUp事件‘;
                });
              },
              onTapCancel: () {
                setState(() {
                  tapEvent = ‘这是GestureDetector监听的onTapCancel事件‘;
                });
              },
              onDoubleTap: () {
                setState(() {
                  tapEvent = ‘这是GestureDetector监听的onDoubleTap事件‘;
                });
              },
              onLongPress: () {
                setState(() {
                  tapEvent = ‘这是GestureDetector监听的onLongPress事件‘;
                });
              },
              child: new BorderButton(‘GestureDetector onTap 分解事件按钮‘),
            ),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
            child: new Text(‘上面的按钮通过GestureDetector监听事件后,涟漪效果消失了,使用下面的方案解决‘),
          ),
          new Padding(
              padding:
                  const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
              child: new InkWell(
                borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
                onTap: () {
                  final snackBar = new SnackBar(content: new Text("这是一个InkWell监听的onTap事件"));
                  Scaffold.of(context).showSnackBar(snackBar);
//                  _showSnakeBar("这是一个InkWell监听的onTap事件");
                },
                child: new BorderButton(‘InkWell 按钮‘),
              )),
          new Padding(
              padding:
                  const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
              child: new InkWell(
                borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
                onTap: () {
                  Navigator.of(context).push(new MaterialPageRoute(builder: (context)=> new  DismissedPage()));
                  },

                child: new BorderButton(‘Dismissed 手势‘),
              )),
        ],
      ),
    );
  }
}

class BorderButton extends StatelessWidget {
  final String text;

  BorderButton(this.text);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(
          left: 10.0, top: 10.0, right: 10.0, bottom: 10.0),
      height: 48.0,
      decoration: new BoxDecoration(
        border: new Border.all(
          width: 1.0,
          color: Colors.blue,
        ),
        borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
      ),
//      foregroundDecoration: new BoxDecoration(
//        border: new Border.all(
//          width: 1.0,
//          color: Colors.red,
//        ),
//        borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
//      ),
      child: new Text(text),
    );
  }
}

class GesturePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body: new GestureAppPage(),
    );
  }
}

原文地址:https://www.cnblogs.com/loaderman/p/11352384.html

时间: 2024-11-05 14:56:03

flutter手势的相关文章

开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题

导语发布app后,开发者最头疼的问题就是如何解决交付后的用户侧问题的还原和定位,是业界缺乏一整套系统的解决方案的空白领域,闲鱼技术团队结合自己业务痛点在flutter上提出一套全新的技术思路解决这个问题. 我们透过系统底层来捕获ui事件流和业务数据的流动,并利用捕获到的这些数据通过事件回放机制来复现线上的问题.本文先介绍flutter触摸手势事件原理,接着介绍里面怎样录制flutter ui手势事件,然后介绍怎样还原回放flutter ui手势事件,最后附上包括native录制回放的整体框架图.

Flutter进阶—点击、拖动和其他手势

Flutter中的手势系统有两个层次.第一层具有原始指针事件,其描述了穿过屏幕的指针(例如触摸.鼠标和触控笔)的位置和移动.第二层具有手势,其描述由一个或多个指针移动组成的语义动作. 指针指针代表用户与设备屏幕交互的原始数据.有四种类型的指针事件: PointerDownEvent:指针已经在特定位置联系了屏幕.PointerMoveEvent:指针已经从屏幕上的一个位置移动到另一个位置.PointerUpEvent:指针已停止接触屏幕.PointerCancelEvent:此指针的输入不再针对

【手势交互】8. Nimble Sense

早在2012.2013年度,手势识别领域就发生了几起重要的行业并购.比如英特尔对Omek的收购,谷歌对Flutter的收购,而苹果公司更是以3.45亿美金得高价收购了之前为微软Kinect提供技术支持的以色列公司Prime Sense.手势识别,早已成为了各大巨头角逐未来的战场.因为巨头们正逐渐看清(手势识别)体感技术对传统操作方式的重要改变. 虚拟现实会是下一代人机交互界面,Oculus已经在显示输出这一端做出表率,而且表现不错.但是在输入端,也就是人该如何在虚拟现实中发出指令和进行操作,依然

深入理解flutter的编译原理与优化

摘要: 闲鱼技术-正物 问题背景 对于开发者而言,什么是Flutter?它是用什么语言编写的,包含哪几部分,是如何被编译,运行到设备上的呢?Flutter如何做到Debug模式Hot Reload快速生效变更,Release模式原生体验的呢?Flutter工程和我们的Android/iOS工程有何差别,关... 闲鱼技术-正物 问题背景 对于开发者而言,什么是Flutter?它是用什么语言编写的,包含哪几部分,是如何被编译,运行到设备上的呢?Flutter如何做到Debug模式Hot Reloa

深入理解 Flutter 的编译原理与优化

阿里妹导读:对于开发者而言,Flutter工程和我们的Android/iOS工程有何差别?Flutter的渲染和事件传递机制如何工作?构建缓慢或出错又如何去定位,修改和生效呢?凡此种种,都需要对Flutter从设计,开发构建,到最终运行有一个全局视角的观察. 本文由闲鱼技术团队出品,将以一个简单的hello_flutter为例,介绍下Flutter相关原理及定制与优化. Flutter简介 Flutter的架构主要分成三层:Framework,Engine和Embedder. Framework

Flutter 实现下拉刷新 非安卓原生效果

先附上连接 https://github.com/dikeboy/flutter-refrensh 这里涉及到flutter中的 几块   动画 ,事件点击, 异步, 要自定义下拉刷新   首先必须要了解Flutter 中的事件监听方法 https://flutter.io/docs/development/ui/advanced/gestures flutter 的手势主要是两个类listener 和GestureDecetor Listener 主要类似touchevent  包括 按下,移

初识flutter

初识flutterflutter是Google开发的一套全新的跨平台开源框架.目前flutter已经发布很多很多版本,正在逐步的完善,它的目标其实是和react native一样的,就是同一份代码可以同时运行在Android和iOS两个系统上.如果你同时有react native和flutter开发经验,你就会发现flutter的很多设计理念和react native是一样的,react native基于组件开发页面,flutter则是widget,他们都有自己的生命周期,他们都是自己的属性或者

Flutter系列博文链接

Flutter系列博文链接 ↓: Flutter基础篇: Flutter基础篇(1)-- 跨平台开发框架和工具集锦 Flutter基础篇(2)-- 老司机用一篇博客带你快速熟悉Dart语法 Flutter基础篇(3)-- Flutter基础全面详解 Flutter基础篇(4)-- Flutter填坑全面总结 Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备 Flutter基础篇(6)-- 水平和垂直布局详解 Flutter进阶篇: Flutter进阶篇(1)--

浅谈跨平台框架 Flutter 的优势与结构

作者:个推iOS工程师 伊泽瑞尔 一.背景 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平台上,使用平台所支持的开发工具和语言,直接调用系统提供的API所开发的应用.原生开发的主要优势体现在:1.可以快速访问本平台的全部功能,比如摄像头.GPS等:2.原生应用的速度快.性能高,而且可以实现比较复杂的动画和绘制效果,用户体验较好.原生开发的缺点也很明显,主要体现在:1.开发成本较高,不同的平台必须维护不同的代码,人力成本也会随之增加:2.有新的功能需要更新