這里我不是來說他們?nèi)叩挠梅ǎ饕v講他們之間的響應(yīng)范圍區(qū)別。

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');
          },
        ),
      )
    );
  }

執(zhí)行如上代碼，點(diǎn)擊紅色區(qū)域控制臺輸出為

flutter: tap this container
flutter: tap this container

這一點(diǎn)都沒疑問。但是一旦我把紅色部分代碼注釋掉。結(jié)果卻令我差異
點(diǎn)擊毫無效果。

我們在對代碼進(jìn)行改造如下：

  @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');
          },
        ),
      )
    );
  }

點(diǎn)擊紅色區(qū)域依然有輸出，但是點(diǎn)擊magin區(qū)域沒有任何反應(yīng)。

我們再次做實驗，代碼如下改造。Container內(nèi)部添加一行文字。把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(
              '有內(nèi)容部分'
            ),
          ),
          onTap: (){
            print('tap this container');
          },
        ),
      )
    );
  }

如上代碼，點(diǎn)擊magin部分沒輸出，點(diǎn)擊文字或者Container區(qū)域都有輸出。
從這里我們感覺好像只要Container內(nèi)部只要有顏色或者child整個container都能觸發(fā)手勢；

其實不然。我們再次改造代碼如下：

 @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(
                  '有內(nèi)容部分'
                ),
              ],
            ),
          ),
          onTap: (){
            print('tap this container');
          },
        ),
      )
    );
  }

如上我們添加了一個布局組件Column.神奇的事情發(fā)生了。我們除了點(diǎn)擊文字會觸發(fā)手勢，其他所有地方都沒有效果...

或者，它們不但有點(diǎn)擊水墨效果而且完全避免了上述問題。但是使用InkWell要注意他會把整個child都包裹，內(nèi)部的Container的margin部分也會觸發(fā)手勢。