如何让溢出父组件的InkWell/GestureDetector可点击？

我之前也碰到过一模一样的需求——就是想让按钮的点击区域比可见容器范围大一点，提升用户点击的容错率，这几个方案亲测有效：

方案1：取消Container的裁剪行为 #

默认情况下Container的clipBehavior是Clip.hardEdge，这会把内部组件的手势检测范围限制在自身边界内，哪怕Stack设置了overflow: Overflow.visible让内容显示出来，超出部分的点击还是会被拦截。只需要给Container添加clipBehavior: Clip.none就能解决：

Container(
  width: 300,
  height: 100,
  clipBehavior: Clip.none, // 关键：关闭裁剪，允许手势检测到容器外的区域
  child: Stack(
    overflow: Overflow.visible,
    children: <Widget>[
      Positioned(
        top: 0,
        bottom: 0,
        left: -15,
        child: InkWell(
          onTap: () {
            print("超出部分也能点击啦！");
          },
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: Text("Test"),
          ),
        ),
      ),
    ],
  ),
);

方案2：将可点击组件移到Container外层的Stack中 #

如果不想修改Container的裁剪行为（比如Container本身需要裁剪内部其他内容），可以把整个结构调整为外层Stack包裹Container和可点击组件，这样InkWell的手势检测就不受Container边界限制了：

Stack(
  overflow: Overflow.visible,
  children: [
    // 原来的Container
    Container(
      width: 300,
      height: 100,
      // 这里保留你原来的Container样式、内容
    ),
    // 把InkWell移到外层Stack里，保持原来的定位
    Positioned(
      top: 0,
      bottom: 0,
      left: -15,
      child: InkWell(
        onTap: () {},
        child: Padding(
          padding: EdgeInsets.all(15.0),
          child: Text("Test"),
        ),
      ),
    ),
  ],
);

为什么原来的代码不行？ #

简单来说：Flutter的手势检测系统会受父组件的裁剪行为影响，Container默认的Clip.hardEdge不仅会裁剪可见内容的显示范围，还会限制内部组件的手势响应区域在自身边界内。Stack的overflow: Overflow.visible只是让内容显示出来，但没法突破父组件的手势裁剪限制。

内容的提问来源于stack exchange，提问作者Paul Rangger