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

flutter手势的更多相关文章

  1. Flutter交互实战-即刻App探索页下拉&拖拽效果

    前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇 ...

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

    导语 发布app后,开发者最头疼的问题就是如何解决交付后的用户侧问题的还原和定位,是业界缺乏一整套系统的解决方案的空白领域,闲鱼技术团队结合自己业务痛点在flutter上提出一套全新的技术思路解决这个 ...

  3. Flutter资源

    目录 文章 一开始 HOWTO文档 网站/博客 高级 视频 组件 演示 UI 材料设计 图片 地图 图表 导航 验证 文字和富文本 分析.流量统计 自动构建 风格样式 媒体 音频 视频 语音 存储 获 ...

  4. 从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求

    从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo.demo源码分享在github上,现在对flutter有种说不出的喜欢了.大家一起搞吧! 废话 ...

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

    Flutter中的手势系统有两个层次.第一层具有原始指针事件,其描述了穿过屏幕的指针(例如触摸.鼠标和触控笔)的位置和移动.第二层具有手势,其描述由一个或多个指针移动组成的语义动作. 指针指针代表用户 ...

  6. flutter系列之:移动端的手势基础GestureDetector

    目录 简介 Pointers和Listener GestureDetector 手势冲突 总结 简介 移动的和PC端有什么不同呢?同样的H5可以运行在APP端,也可以运行在PC端.两者最大的区别就是移 ...

  7. 【译】使用 Flutter 实现跨平台移动端开发

    作者: Mike Bluestein   | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...

  8. 在Flutter中嵌入Native组件的正确姿势是...

    引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

  9. Android程序员的Flutter学习笔记

    作为忠实与较资深的Android汪, 最近抽出了一些时间研究了一下Google的亲儿子Flutter, 尚属皮毛, 只能算是个简单的记录吧. Google自2017年第一次提出Flutter, 到20 ...

随机推荐

  1. StringComparison 枚举

    地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.stringcomparison?redirectedfrom=MSDN&view= ...

  2. 使用React.Fragment替代render函数中div的包裹

    1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...

  3. 第122题:买卖股票的最佳时机II

    一. 问题描述 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交 ...

  4. mysql跨表删除多条记录

    Mysql可以在一个sql语句中同时删除多表记录,也可以根据多个表之间的关系来删除某一个表中的记录. 假定我们有两张表:Product表和ProductPrice表.前者存在Product的基本信息, ...

  5. PPT扁平化设计总结

    注:以下内容基本都来自知乎,由于已经不记得网址了,所以未能附上所有相关链接,抱歉. PPT扁平化设计原则一.亲密:意思相近的内容放在一起二.对齐:页面上的某两个元素之间总是围绕一条直线对齐三.对比:有 ...

  6. PPP

    名称 chat–调制解调器的自动对话脚本 命令格式 chat [options] script 描述 Chat程序定义了一个计算机和调制解调器之间对话交流,其主要目的是用来在本地PPPD和远端PPPD ...

  7. jsp页面解析出错,或出现下载情况.

    当没有下面代码时,会出现空白页的bug <dependency> <groupId>org.apache.tomcat.embed</groupId> <ar ...

  8. web表单

    1.配置 使用Flask-WTF, 它集成了WTForms并且完美地集成到了flask. 在microblog根目录下创建一个文件,存储flask扩展的所有配置,CSRF_ENABLED用于激活跨站点 ...

  9. linux 环境变量的设置

    方法一: 在/etc/profile文件中添加变量[对所有用户生效(永久的)] 用VI在文件/etc/profile文件中增加变量,该变量将会对Linux下所有用户有效,并且是“永久的”. 要让刚才的 ...

  10. Linux 文件基本属性: chown修改所属组 和 chmod修改文件属性命令

    [root@www /]# ls -l total 64 dr-xr-xr-x 2 root root 4096 Dec 14 2012 bin -rwxrwxr-x 4 root root 4096 ...