更多文章请查看 lutter从入门 到精通

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单击事件"),
        ),
      ),
    );
  }
}