flutter GestureDetector和InkWell、

这里我不是来说他们三者的用法，主要讲讲他们之间的响应范围区别。

Widget build(BuildContext context) {
    print('rebuild goodslistScreen');
    return Scaffold(
      body:SafeArea(
        child: GestureDetector(
          child:Container(
            color: Colors.red,
            height: 200,
            width: 500,
          ),
          onTap: (){
            print('tap this container');
          },
        ),
      )
    );
  }

执行如上代码，点击红色区域控制台输出为

flutter: tap this container
flutter: tap this container

这一点都没疑问。但是一旦我把红色部分代码注释掉。结果却令我差异
点击毫无效果。

我们在对代码进行改造如下：

  @override
  Widget build(BuildContext context) {
    print('rebuild goodslistScreen');
    return Scaffold(
      body:SafeArea(
        child: GestureDetector(
          child:Container(
            margin: EdgeInsets.all(50),
            color: Colors.red,
            height: 200,
            width: 500,
          ),
          onTap: (){
            print('tap this container');
          },
        ),
      )
    );
  }

点击红色区域依然有输出，但是点击magin区域没有任何反应。

我们再次做实验，代码如下改造。Container内部添加一行文字。把Contianer的颜色去掉会怎样

@override
  Widget build(BuildContext context) {
    print('rebuild goodslistScreen');
    return Scaffold(
      body:SafeArea(
        child: GestureDetector(
          child:Container(
            margin: EdgeInsets.all(50),
            //color: Colors.red,
            height: 200,
            width: 500,
            child: Text(
              '有内容部分'
            ),
          ),
          onTap: (){
            print('tap this container');
          },
        ),
      )
    );
  }

如上代码，点击magin部分没输出，点击文字或者Container区域都有输出。
从这里我们感觉好像只要Container内部只要有颜色或者child整个container都能触发手势；

其实不然。我们再次改造代码如下：

 @override
  Widget build(BuildContext context) {
    print('rebuild goodslistScreen');
    return Scaffold(
      body:SafeArea(
        child: GestureDetector(
          child:Container(
            margin: EdgeInsets.all(50),
            //color: Colors.red,
            height: 200,
            width: 500,
            child: Column(
              children: <Widget>[
                Text(
                  '有内容部分'
                ),
              ],
            ),
          ),
          onTap: (){
            print('tap this container');
          },
        ),
      )
    );
  }

如上我们添加了一个布局组件Column.神奇的事情发生了。我们除了点击文字会触发手势，其他所有地方都没有效果...

或者，它们不但有点击水墨效果而且完全避免了上述问题。但是使用InkWell要注意他会把整个child都包裹，内部的Container的margin部分也会触发手势。