Flutter GestureDetector 单击问题 - 堆栈外的按钮不可单击

Question

我有一个 Flutter 应用程序，我正在尝试创建动画按钮交互。当我单击第一个按钮时，第二个按钮应该从第一个按钮下方的左侧滑入。动画按预期工作，但问题是第二个按钮在部分位于堆栈之外时不可单击。请参阅此 gif 以便更好地理解。

白色矩形附近（靠近右上角和右下角）的小区域是可单击的，因为它不在堆栈之外。您可以在 DartPad 上使用这个工作示例。

我使用堆栈并将 clipBehavior 设置为 Clip.none 以允许按钮溢出堆栈。我已经尝试过 GestureDetector behavior 到 HitTestBehavior.translucent 但是，堆栈外部出现第二个按钮的区域不响应触摸事件。

我想让第二个按钮即使在堆栈之外也可单击。我怎样才能实现这种行为？任何指导或建议将不胜感激。

Answer 1

我不确定这是否适用于您的情况，因为您在这里使用动画，但它应该是相同的：

Stack 与 RenderBox 配合使用，后者检查单击是否不在堆栈边界之外。

使用 DeferPointer 小部件 https://pub.dev/packages/defer_pointer

通常在 Flutter 中，如果您将某个小部件偏移到其父级之外 边界命中测试将被打破。 DeferPointer 通过以下方式解决了这个问题 将命中测试和（可选）渲染交给 DeferredPointerHandler 小部件位于树的更上方。