如何将指针事件发送给堆栈中的下位儿童 [英] How to send Pointer events to Lower children in Stack

问题描述

正如标题所述，在颤动中使用堆栈时，如果该最后渲染的子代与所有其他子代重叠，则只能与该子代进行交互。在我的应用程序中，我有一个ListWheelScrollView，它包含在Stack中，然后用ScrollView顶部的渐变进行样式化。

As the title says, when using Stacks in flutter, only the "last" rendered children can be interacted with if that child overlaps all other children. In my application i have a ListWheelScrollView which is contained in a Stack, and afterwards "styled" with gradients that lie on top of the ScrollView.

一个例子。

在这里，有关这种确切情况的问题已经存在： Flutter- GestureDetector无法使用堆栈中的容器

There is an existing issue on almost this exact situation here: Flutter- GestureDetector not working with containers in stack

但是，它假定您正在使用

However, it assumes you are working with a gesture detector.

Stack(children: <Widget>[
          Container(
            height: 250,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: _style.fontSize * 1.5,
                  child: ListWheelScrollView.useDelegate(
                      controller: fixedExtentScrollController,
                      physics: FixedExtentScrollPhysics(),
                      itemExtent: _style.fontSize * 1.5,
                      childDelegate: ListWheelChildLoopingListDelegate(
                          children: hours
                              .map((hour) => hour < 10
                                  ? Text(
                                      "0$hour",
                                      style: _style,
                                    )
                                  : Text(
                                      "$hour",
                                      style: _style,
                                    ))
                              .toList())),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      ":",
                      style: _style,
                    ),
                    SizedBox(
                      height: 25,
                    )
                  ],
                ),
                Container(
                  width: _style.fontSize * 1.5,
                  child: ListWheelScrollView.useDelegate(
                      physics: FixedExtentScrollPhysics(),
                      itemExtent: _style.fontSize * 1.5,
                      childDelegate: ListWheelChildLoopingListDelegate(
                          children: minutes
                              .map((minute) => minute < 10
                                  ? Text(
                                      "0$minute",
                                      style: _style,
                                    )
                                  : Text(
                                      "$minute",
                                      style: _style,
                                    ))
                              .toList())),
                ),
              ],
            ),
          ),
          Container(
                height: 250,
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 75.3,
                      decoration: BoxDecoration(
                          gradient: LinearGradient(
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                              colors: [
                            Colors.white.withOpacity(0.1),
                            Theme.of(context).scaffoldBackgroundColor
                          ])),
                    ),
                    Center(
                        child: Container(
                            height: 83.3,
                            width: 220,
                            decoration: BoxDecoration(
                              border: Border.all(
                                  color: Color(0xFFc0ccd4), width: 5),
                            ))),
                  ],
                ),
          )
        ]),

设计完美地达到了预期的效果，但是由于容器位于滚动小部件的顶部，因此我不再能够滚动。

The design works perfectly as expected, however i am no longer able of scrolling since the containers are on top of the scroll widget.

有任何解决方法吗？

推荐答案

您只需要包装所有您的不应在 IgnorePointer 小部件。

在评论中，据说您应该使用 AbsorbPointer ，但是，您不想在忽略的窗口小部件上捕获点击事件。

You only need to wrap all of your widgets that are not supposed to receive tap events in IgnorePointer widgets.
In the comments it was said that you should use AbsorbPointer, however, you do not want to catch tap events on the ignoring widgets.

在您的情况下，您希望将上部，上部包装在堆栈的顶部，将 Container 包裹在中IgnorePointer 小部件：

In your case, you want to wrap your upper, upper as in top of the stack, Container in an IgnorePointer widget:

Stack(
  children: <Widget>[
    Container(...),
    IgnorePointer(
      child: Container(...),
    ),
  ],
)

了解详情。

这篇关于如何将指针事件发送给堆栈中的下位儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！