如何将Taps传递到顶部小部件下方的小部件? [英] How to pass Taps to widgets below the top widget?

问题描述

我正在尝试实现 Card Paginator组件(单张卡)在Flutter中.

I'm trying to implement a very simple version of Card Paginator Component (single card) in Flutter.

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

Here is an example of a basic demo I've created:

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永远不会在可见时轻按按钮.

The issue I'm facing is, I'm unable to click the button when the card in not scrolled up. The fixed 'Test Button' is visible on the screen because of the empty dummy Container pushing the scrollable ListView downwards. Yet, since the ListView covers the full screen by default, hence the onTap never runs on tapping the button when it's visible.

如果用IgnorePointer类包围ListView/SinglleChildScrollView，则整个滚动行为将停止，并且对ListView子级的任何轻击也将停止，这是不希望的.

If I surround the ListView/SinglleChildScrollView with IgnorePointer class, the whole scrolling behaviour stops and also any taps to the children of the ListView stops working which is not desired.

如何在允许在ListView中滚动/点击的同时点击按钮(Stack中的向后小部件)?还是应该采用构建卡片分页器组件的方法不同?

How to tap on the button (backward widget in Stack) while allowing scrolling/tapping in ListView? Or should I approach building Card Paginator Component is some different way?

推荐答案

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

You need to wrap your empty Container within the ListView with a GestureDetector overriding onTapUp so that you can capture the tap position on the screen:

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

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

You then need to get the rectangle of the widget behind the ListView that you want to tap on, by using that widget's key:

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

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

And finally you can calculate whether the tap on the empty Container is within the rectangle of the widget behind, and at that point invoke your code as if you had a GestureDetector on the widget behind:

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

这篇关于如何将Taps传递到顶部小部件下方的小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！