Flutter InkWell 手势组件各种用法

前言：

flutter中有很多好用的手势，实现起来也非常的简单 ，今天给大家介绍下flutter中 InkWell组件的各种用法
废话不多说我们正式开始：

准备工作：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

需要用到三方库：

toast: ^0.1.5
请在pubspec.yaml 文件中添加依赖 如图：

QQ截图20200821153553.png

然后在控制台输入flutter pub get 下载依赖

具体实现

效果图：

screenrecorder-2020-08-21-20-08-41-838[00_00_03--00_00_23].gif

这里主要用到了inkwell的四个属性

onTap      单击事件
onDoubleTap 双击事件
onLongPress  长按事件
onTapCancel  点击取消

具体用法

import 'package:flutter/material.dart';
class CustomInkWell extends StatefulWidget {
  @override
  _CustomInkWellState createState() => _CustomInkWellState();
}
class _CustomInkWellState extends State<CustomInkWell> {
  var _info = 'Push';
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: Text("InkWell的各种手势用法"),
      ),
      body:    InkWell(
        onTap: (){
          setState(() {
            print("onTap");
            return _info = 'onTap';
          });
        },
        onDoubleTap: (){
          setState(() {
            print("onDoubleTap");
            return _info = 'onDoubleTap';
          });
        },
        onLongPress: (){
          setState(() {
            print("onLongPress");
            return _info = 'onLongPress';
          });
        },
        onTapCancel: (){
          setState(() {
            print("onTapCancel");
            return _info = 'onTapCancel';
          });
        },
        child: Container(
          alignment: Alignment.center,
          width: 120,
          height: 50,
          child: Text(_info),
        ),
      ),
    );
  }
}

QQ截图20200821201823.png

我们调用了inkwell 组件里面 onTap onDoubleTap onLongPress onTapCancel四个方法分别打印输出日志我们在控制台看到有对应的日志输出 单击事件 双击事件 长按事件 点击取消

配合listview的使用：

效果图：

Screenrecorder-2020-08-21-20-09-11-305[00_00_00--00_00_20].gif

通常我们的listview在加载数据并且显示item布局返回的是一个Widget 并不是所有的widget都有点击事件的方法,这个时候我我们就需要在item的布局最外层·嵌套inkwell来实现一些列手势操作.

import 'package:flutter/material.dart';
import 'toast_util.dart';
class ListviewInkWell extends StatefulWidget {
  ListviewInkWell({Key key}) : super(key: key);
  @override
  _ListviewInkWellState createState() {
    return _ListviewInkWellState();
  }
}
class _ListviewInkWellState extends State<ListviewInkWell> {
  @override
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("listview配合InkWell的使用"),
      ),
      body: ListView.builder(
           itemCount: 20,
          itemBuilder:(BuildContext context,int position){
             return itemWidget(position);
          }),
    );
  }
  Widget  itemWidget(int index){
    return InkWell(
      child: Container(
        margin: EdgeInsets.fromLTRB(0, 5, 0, 5),
        child: Center(
          child: Text("掏粪男孩",style: TextStyle(
            fontSize: 20
          ),),
        ),
      ),
      onTap: (){
        setState(() {
          print("onTap");
          ToastUtil.showInfo(context, "onTap");
        });
      },
      onDoubleTap: (){
        setState(() {
          print("onDoubleTap");
          ToastUtil.showInfo(context, "onDoubleTap");
        });
      },
      onLongPress: (){
        setState(() {
          print("onLongPress");
          ToastUtil.showInfo(context, "onLongPress");
        });
      },
      onTapCancel: (){

        setState(() {
          print("onTapCancel");
          ToastUtil.showInfo(context, "onTapCancel");
        });
      },
    );
  }
}

我们可以看到在listview里面我们返回了一个Container 盒子里面装载一个text组件加载了20条数据 当我们在Container 最外层嵌套InkWell 的时候我们 调用 onTap onDoubleTap onLongPress onTapCancel 这四个方法就可以对listview的item做一系列的操作了 我们看到效果图里面有对应的 toast提示

toast提示工具类

import 'package:toast/toast.dart';

/**
 *
 *  创建人：xuqing
 *  创建时间：2020年8月21日14:54:56
 *  类说明：toast工具类
 *
 */
class  ToastUtil{
   static  void  showInfo(Object context,String  str){
     Toast.show(str, context,  gravity: Toast.CENTER);
   }
}

最后总结：

到此InkWell组件的基础用法已经讲完了，flutter里面的手势组件非常丰富调用也比较简单，希望文章能帮助到各位同学 有兴趣学的的同学可以私下多多交流 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦 也可以加我个人QQ/微信（1693891473）

QQ交流群： 92437359.png