为何BoxDecoration会扩大GestureDetector作用区域？附点击异常代码

咱们先搞懂第一个问题：为什么BoxDecoration会扩大GestureDetector的作用区域？

其实这不是BoxDecoration直接“扩大”了点击范围，而是Flutter组件布局和命中测试的特性在起作用：

• 当你给Container添加BoxDecoration（尤其是带背景色的），如果Container没有设置明确的宽高，它会自动占据父组件的可用空间；就算设置了宽高，只要有BoxDecoration的背景绘制，Container就会被视为有“实际内容”的组件。
• 而GestureDetector的可点击区域是由它的child组件的布局尺寸+命中测试范围决定的。默认情况下，Flutter的命中测试只会识别有实际绘制像素的区域——如果Container没有BoxDecoration也没设置color，它是完全透明的，命中测试会跳过它，只有里面的子组件（比如图片）会触发点击；但加了BoxDecoration后，Container的整个区域都有了绘制内容（哪怕是透明背景），命中测试就会把整个Container区域算进去，看起来就像是GestureDetector的作用区域被扩大了。

再说说你代码里的问题：为什么GestureDetector仅能识别图片左上角的点击事件？

看你的代码结构，GestureDetector包裹了一个400x400的Container，而Container里是FittedBox+图片。出现这个问题的核心原因是默认命中测试只检测有绘制像素的区域：

• 你的Container没有设置color，也没有BoxDecoration，所以它是完全透明的，命中测试会忽略它；
• 而图片可能因为FittedBox的fit模式（你代码里没写完），只在Container的左上角区域有实际像素，所以只有这部分能触发点击。

解决这个问题有几个简单的方法，你可以根据需求选：

方法1：给Container添加透明背景色 #

给Container加上color: Colors.transparent，这样它会被视为有绘制内容的组件，整个400x400区域都会成为可点击区域：

class _MyHomePageState extends State<MyHomePage> {
  void tap(TapDownDetails details) {
    print('${details.globalPosition}');
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new GestureDetector(
        onTapDown: tap,
        child: new Center(
          child: new Container(
            height: 400.0,
            width: 400.0,
            color: Colors.transparent, // 添加这一行
            child: new FittedBox(
              fit: BoxFit.cover, // 补全你的缩放模式
              child: Image.asset('你的图片路径'),
            ),
          ),
        ),
      ),
    );
  }
}

方法2：修改GestureDetector的行为 #

给GestureDetector设置behavior: HitTestBehavior.opaque，强制它将整个child的布局区域视为可点击区域，不管child是否透明：

body: new GestureDetector(
  onTapDown: tap,
  behavior: HitTestBehavior.opaque, // 添加这一行
  child: new Center(
    child: new Container(
      height: 400.0,
      width: 400.0,
      child: new FittedBox(
        fit: BoxFit.cover,
        child: Image.asset('你的图片路径'),
      ),
    ),
  ),
),

方法3：只让图片区域可点击 #

如果你本来就只想点击图片，那把GestureDetector直接包裹图片就行，这样点击区域就严格对应图片的实际显示范围：

child: new Center(
  child: new Container(
    height: 400.0,
    width: 400.0,
    child: new FittedBox(
      fit: BoxFit.cover,
      child: GestureDetector(
        onTapDown: tap,
        child: Image.asset('你的图片路径'),
      ),
    ),
  ),
),

内容的提问来源于stack exchange，提问作者kg.