Flutter中能否检测Widget按压区域？含按钮分区检测需求

当然可以实现，以下是两种实用方案：

• 通过GestureDetector监听触摸坐标
  给目标按钮包裹GestureDetector，利用onTapDown回调获取触摸点的全局坐标，再转换为按钮内部的相对位置，最后根据坐标范围判断属于A/B/C/D哪个区域：

  GestureDetector(
    onTapDown: (TapDownDetails details) {
      final RenderBox box = context.findRenderObject() as RenderBox;
      final Offset localPos = box.globalToLocal(details.globalPosition);
      final halfWidth = box.size.width / 2;
      final halfHeight = box.size.height / 2;
  
      // 判断按压区域
      final isA = localPos.dx < halfWidth && localPos.dy < halfHeight;
      final isB = localPos.dx >= halfWidth && localPos.dy < halfHeight;
      final isC = localPos.dx < halfWidth && localPos.dy >= halfHeight;
      final isD = localPos.dx >= halfWidth && localPos.dy >= halfHeight;
  
      // 执行对应逻辑
      if (isA) print('按压了A区域');
      if (isB) print('按压了B区域');
      if (isC) print('按压了C区域');
      if (isD) print('按压了D区域');
    },
    child: Container(
      width: 200,
      height: 200,
      color: Colors.grey[300],
      child: const Center(child: Text('5', style: TextStyle(fontSize: 32))),
    ),
  )
  

• 拆分按钮为多子组件
  将单个大按钮拆分为四个独立的可点击子组件（用InkWell或GestureDetector），分别对应A/B/C/D区域，每个子组件单独处理点击事件。这种方式更直观，适合需要给不同区域添加专属视觉反馈的场景：

  Container(
    width: 200,
    height: 200,
    child: Column(
      children: [
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: InkWell(
                  onTap: () => print('按压了A区域'),
                  child: const Align(child: Text('A')),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: () => print('按压了B区域'),
                  child: const Align(child: Text('B')),
                ),
              ),
            ],
          ),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: InkWell(
                  onTap: () => print('按压了C区域'),
                  child: const Align(child: Text('C')),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: () => print('按压了D区域'),
                  child: const Align(child: Text('D')),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  )
  

两种方案各有优势：前者适合保持按钮视觉统一性，后者更便于单独控制每个区域的交互逻辑与样式。

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