如何将指针事件发送到堆栈中的低级子级

Question

正如标题所说，在 Flutter 中使用 Stacks 时，如果该子项与所有其他子项重叠，则只有“最后”渲染的子项可以交互。在我的应用程序中，我有一个 ListWheelScrollView，它包含在 Stack 中，然后使用位于 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 中。
在 cmets 中，有人说您应该使用 AbsorbPointer，但是，您不想在忽略的小部件上捕获点击事件。

在你的情况下，你想把你的上部，上部作为堆栈的顶部，Container 包装在一个 IgnorePointer 小部件中：

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

Learn more.