如何将指针事件发送到堆栈中的低级子级 [英] How to send Pointer events to Lower children in Stack

问题描述

正如标题所说，在 Flutter 中使用 Stacks 时，如果该子级与所有其他子级重叠，则只有最后"渲染的子级可以交互.在我的应用程序中，我有一个 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.

举个例子就更有意义了.

This makes more sense when given an example.

在几乎这种确切的情况下存在一个问题: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屋！