Flutter - 点击/触摸区域如何工作？

Question

1）如果我有这个，当我点击孩子时，Container它不会打印“点击”：

Container(
  color: Colors.red,
  child: GestureDetector(
    onTap: () => print('tap'),
    child: Container(
      width: 100,
      height: 100,
    ),
  ),
),

2）如果我有这个，当我点击孩子时，Container它会打印“点击”：

Container(
  color: Colors.red,
  child: GestureDetector(
    onTap: () => print('tap'),
    child: Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(),
    ),
  ),
),

3）如果我有这个，当我点击孩子时Container，在文本之外，它会打印“点击”：

Container(
  color: Colors.red,
  child: GestureDetector(
    onTap: () => print('tap'),
    child: Container(
      width: 100,
      height: 100,
      child: Text("A"),
    ),
  ),
),

有人可以向我解释这 3 种行为吗？

Answer 1

1. 一个Container具有界限(height and width)是什么，但对于其他部件的占位符里面去了。由于您尚未child向它提供任何内容或任何其他属性，例如color或decoration，container被认为是不可见的GestureDetector。

根据GestureDetector官方文档，by default a GestureDetector with an invisible child ignores touches. this behavior can be controlled with behavior.

如果您仍然希望占位符container被识别为点击事件，请使用behavior属性 of GestureDetector，这将告诉 GestureDetector 点击容器，然后您将看到tap打印，如下所示：

Container(
          color: Colors.red,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () => print('tap'),
            child: Container(
              width: 100,
              height: 100,
            ),
          ),
        ),

2. 在这种情况下，由于您提供了decorationproperty 和 used BoxDecoration()，它会根据其父小部件提供的边界呈现一个框。所以，它container有一个盒子形状。为了查看盒子形状在容器内是如何渲染的，只需提供一个border属性，如下所示：

Container(
        color: Colors.red,
        child: GestureDetector(
          onTap: () => print('tap'),
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.yellow, width: 4)
            ),
          ),

您可以看到yellow跨越整个container尺寸的边框，它作为 顶部的一个层container，现在被认为是可点击的。因此，GestureDetector 的点击被识别，您会看到tap打印。

3. 在这种情况下，由于您提供了child小部件 as text，GestureDetector因此可以识别它，因为小部件是可见的，因此tap被打印，无论您是点击文本还是外部，因为它GestureDetector本身没有大小，它依赖于孩子的大小，在这种情况下是bounds（高度和宽度）。因此，它认为整个有界区域都是可点击的，并且您可以在其中的tap任何地方打印事件。

希望这能回答你的问题。