flutter - 如何将指针事件发送给 Stack 中的 Lower children

Question

正如标题所说，在 flutter 中使用 Stacks 时，如果“最后”渲染的子项与所有其他子项重叠，则只能与该子项进行交互。在我的应用程序中，我有一个包含在 Stack 中的 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

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

在你的例子中，你想把你的 upper，upper 包装在堆栈的顶部，Container 在 IgnorePointer 小部件中:

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

Learn more .