Flutter Align widget rect 不检测 onTap 手势

Question

我有几个图像按钮布局如下：

布局代码为：

new Container(
  height: 48.0,
  child: new Row(
    children: <Widget>[
      new GestureDetector(
        onTap: cancelTurn,
        child: new Align(child: new Image.asset("assets/cancel_button.png"), widthFactor: 1.5),
      ),
      new Expanded(child: new Container()),
      new GestureDetector(
        onTap: confirmTurn,
        child: new Align(child: new Image.asset("assets/confirm_button.png"), widthFactor: 1.5),
      ),
    ],
  ),
)

我正在使用 Align 小部件希望增加 GestureDetector 的可点击区域。但是，只有在 Image 小部件矩形内单击时，我的点击才会起作用。如果您注意到，Align 和 Image 的 bounds/rects 是不同的。 Align 通过使用 widthFactor 属性（设置为 1.5）

扩展到 Image child 之外

关于为什么 Align 小部件可能无法在其范围内检测到点击手势的任何想法。

Answer 1

要获得所需的效果，您可以将 GestureDetector 元素替换为 InkWell。这将向用户提供反馈（由于 Ink 动画），并在按下整个区域时激活。

为此，您的容器应如下所示：

   new Container(
      height: 48.0,
      child: new Row(
        children: <Widget>[
          new InkWell(
            onTap: cancelTurn,
            child: new Align(child: new Image.asset("assets/cancel_button.png"), widthFactor: 1.5),
          ),
          new Expanded(child: new Container()),
          new InkWell(
            onTap: confirmTurn,
            child: new Align(child: new Image.asset("assets/confirm_button.png"), widthFactor: 1.5),
          ),
        ],
      ),
    )

Answer 2

尝试将 HitTestBehavior.opaque 的 hitTestBehavior 传递给 GestureDetector。

其他提示：

而不是 Align，考虑 Padding。
考虑使用IconButton with Icons.close and Icons.check instead of embedding a custom png. You could wrap it in a Material画黑圈，它甚至会自动为你剪掉墨水飞溅。

Flutter Align widget rect 不检测 onTap 手势

Flutter Align widget rect does not detect the onTap gesture

layout

gesture

flutter