flutter GestureDetector 手势处理


【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 添加长按事件

在这里为一个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 随时 复制粘贴 使用


早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页