flutter GestureDetector 手势处理

 2023-09-10 阅读 13 评论 0

摘要:【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 【x2】各种系列的视频教程 免费开源 关注 你不会迷路 【x3】系列文章 百万 Demo 随时 复制粘贴 使用 flutter Gesture 手势处理 1 widget 添加单击事件 在这里为一个Container容器添加了一个单击事件监听 Widget buil

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用


flutter Gesture 手势处理

1 widget 添加单击事件

在这里为一个Container容器添加了一个单击事件监听

 Widget buildOnTab() {return Padding(padding: EdgeInsets.all(10),child: GestureDetector(onTap: () {print("单击事件 ");},child: Container(alignment: Alignment(0, 0),color: Colors.grey,height: 28,width: 120,child: Text("单击事件"),),),);}

2 widget 添加长按事件

flutter指纹登录,在这里为一个Container容器添加了一个长按事件监听

Widget buildLongTab() {return Padding(padding: EdgeInsets.all(10),child: GestureDetector(onLongPress: () {print("长按事件 ");},child: Container(alignment: Alignment(0, 0),color: Colors.grey,height: 28,width: 120,child: Text("长按事件"),),),);}

3 widget 添加双击事件

在这里为一个Container容器添加了一个双击事件监听

 Widget buildDoTab() {return Padding(padding: EdgeInsets.all(10),child: GestureDetector(onDoubleTap: () {print("双击事件 ");},child: Container(alignment: Alignment(0, 0),color: Colors.grey,height: 28,width: 120,child: Text("双击事件"),),),);}

4 widget 添加按下与抬起监听事件

在这里为一个Container容器添加了按下与抬起监听事件

Widget buildDownUp() {return Padding(padding: EdgeInsets.all(10),child: GestureDetector(onTapDown: (tapDown) {print("按下 ");},onTapUp: (tapUp) {print("抬起 ");},child: Container(alignment: Alignment(0, 0),color: Colors.grey,height: 28,width: 120,child: Text("监听按下与放开"),),),);}

5 widget 使用InkWell 添加事件监听

使用 InkWell 同样可以实现 GestureDetector的添加事件监听功能,两者的区别是GestureDetector的child 点击无水波纹效果,而 InkWell 的child 触发事件时会有水波纹效果。

5.1 默认效果

在这里插入图片描述

 Widget buildOnTabInWell() {return Padding(padding: EdgeInsets.all(10),child: InkWell(onTap: () {print("InkWell单击事件 ");},child: Container(alignment: Alignment(0, 0),color: Colors.white54,height: 28,width: 120,child: Text("InkWell单击事件"),),),);}
5.2 自定义效果

华为手势识别。在这里插入图片描述

Widget buildOnTabInWell2() {return Padding(padding: EdgeInsets.all(10),child: InkWell(//按下去的颜色 或者说是说中状态的颜色highlightColor: Colors.blue[800],//点击时的水波纹颜色splashColor: Colors.yellow,onTap: () {print("InkWell单击事件 ");setState(() {});},child: Container(alignment: Alignment(0, 0),height: 28,width: 120,child: Text("InkWell单击事件"),),),);}
}

完毕


【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用


版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/4/35305.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息