如何将指针事件发送到堆栈中的下层孩子

Question

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

当给出一个例子时，这更有意义。

在几乎这种确切情况下存在一个现有问题：Flutter-GestureDetector not working with containers in stack

但是，它假定您正在使用手势检测器。

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),
                            ))),
                  ],
                ),
          )
        ]),

该设计按预期完美运行，但是由于容器位于滚动小部件的顶部，因此我不再能够滚动。

任何解决方法？

Answer 1

您只需要将所有不应该在IgnorePointerwidgets 中接收点击事件的小部件包装起来。
在评论中，有人说您应该使用AbsorbPointer，但是，您不想在忽略的小部件上捕获点击事件。

在您的情况下，您想将上层、上层包装在堆栈顶部Container的IgnorePointer小部件中：

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

了解更多。