Flutter 点击事件基础GestureDector,InkWell,Ink的使用

开发环境：Win 10 ，Android studio 3.4.0

目的：在使用过程中需要用到点击某一个Column，怎么实现？

一、在网上找到最多的是InkWell,Ink去实现的单个Widget的点击事件，这里我就不多说了，在网上找了几张截图丢这里了[图见文章最下方]，本篇主要介绍怎么使用GestureDector去实现单个或一个Column的点击事件

二、GestureDector包裹widget实现widget的点击事件

代码1：Column点击事件

 onFthClick(String label) {//点击后调用
    print("点击了 按钮:" + label);
    setState((){
      title = '点击紫色按钮';
    });
  }
....
GestureDetector buildButtonColumn(IconData icon, String label) {
      Color color = Theme.of(context).primaryColor;
      Text text1 = new Text(
        label,
        style: new TextStyle(
          fontSize: 12.0,
          fontWeight: FontWeight.w400,
          color: color,
        ),
      );

      GestureDetector gd = new GestureDetector(
          onTap: () {
            print('点击行：' + text1.data);
          },
          //onTap:()=>onFthClick("紫色按钮"),//两种点击实现
          child: new Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new Icon(icon, color: color),
                new Container(
                  margin: const EdgeInsets.only(top: 8.0),
                  child: text1,
                )
              ]));
      return gd;

代码2：单个widget的点击事件

return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new GestureDetector(
              child: new Icon(icon, color: color),
              onTap: () {
                print('点击：图标' + text1.data);
              }),
          new Container(
              margin: const EdgeInsets.only(top: 8.0),
              child: new GestureDetector(
                  child: text1,
                  behavior: HitTestBehavior.opaque,
                  //防止在Container内容为空的区域点击时，捕捉不到onTap点击事件。
                  onTap: () {
                    print('点击：' + text1.data);
                  })),
        ],
      );

说明：最终实现效果（1.界面展示一样，Column和单个widget的点击事件都实现了）

下面是用inkwell和ink来实现的：[来源：网络]