listview - 如何将点击传递给顶部小部件下方的小部件？

Question

我正在尝试实现一个非常简单的 Card Paginator Component 版本Flutter 中的(单卡)。

这是我创建的基本演示的示例:

class CardComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 20.0,
          left: 20.0,
          child: 
          GestureDetector(
          // onTap should run while the text is visible on the screen
          // The text will become invisible when the Listview gest scrolled upwards
          onTap: (){print('text tapped');},
            child:
          Container(
          alignment:Alignment.topCenter,
          color: Colors.blueAccent,
        // This is fixed Text over which the card should scroll
        child: Text('Test Button')))),
        ListView(
          children: [
            //  This margin in first empty container pushes the whole card downward and makes the 'Test Button visible'
            Container(margin: EdgeInsets.only(top: 50.0)),
            // This is where the scrolling card actually starts
            Container(color: Colors.cyan[100], height: 120.0, width: 20.0),
            Container(color: Colors.cyan, height: 120.0, width: 20.0),
            Container(color: Colors.cyan[100], height: 120.0, width: 20.0),
            Container(color: Colors.cyan, height: 120.0, width: 20.0),
            Container(color: Colors.cyan[100], height: 120.0, width: 20.0),
            Container(color: Colors.cyan, height: 120.0, width: 20.0),
          ]
        )
      ],
    );
  }
}

我面临的问题是，当卡片未向上滚动时，我无法单击按钮。由于空的虚拟容器向下插入可滚动的 ListView，固定的“测试按钮”在屏幕上可见。然而，由于 ListView 默认覆盖全屏，因此 onTap 永远不会在点击按钮可见时运行。

如果我用 IgnorePointer 类包围 ListView/SinglleChildScrollView ，整个滚动行为都会停止，并且对 ListView 子级的任何点击也会停止停止工作，这是不希望的。

如何在允许在 ListView 中滚动/点击的同时点击按钮(Stack 中的后向小部件)？或者我应该接近建筑物Card Paginator Component有什么不同的方式吗？

Answer 1

Flutter: How to make a ListView transparent to pointer events (but not its non-transparent contents)? 的潜在重复项

您需要使用覆盖 onTapUp 的 GestureDetector 将空容器包装在 ListView 中，以便您可以捕获屏幕上的点击位置:

GestureDetector(
  onTapUp: (TapUpDetails tapUpDetails) {
    print("onTapUp global: " + tapUpDetails.globalPosition.toString());
  },

然后，您需要使用该小部件的键来获取要点击的 ListView 后面的小部件的矩形:

RenderBox renderBox = _key.currentContext.findRenderObject();
Offset topLeftCorner = renderBox.localToGlobal(Offset.zero);
Size size = renderBox.size;
Rect rectangle = topLeftCorner & size;

最后，您可以计算空容器上的点击是否在后面的小部件的矩形内，然后调用您的代码，就像后面的小部件上有一个 GestureDetector 一样:

// if tap is within boundaries of the background widget
if (rectangle.contains(tapUpDetails.globalPosition)) {
  // your code here
}