如何检测小部件是不是在堆栈中重叠？

Posted 2023-02-23

【中文标题】如何检测小部件是不是在堆栈中重叠？

【英文标题】：How can I detect if widgets overlap in Stack?如何检测小部件是否在堆栈中重叠？

【发布时间】：2020-04-30 13:42:05

【问题描述】：

我打算在 Flutter 中制作一个简单的游戏，为此，我需要检测 Stack 中的某些 Widget 是否重叠（它们的部分相互重叠）。小部件将一直在移动，因此我需要在某种计时器中运行该检查。

有什么想法吗？我什么都没想。

【问题讨论】：

查看Rect类官方文档 - 它包含检查两个矩形是否重叠的方法

【参考方案1】：

计时器

您可以使用dart-async native package 中的Timer 类解决计时器问题。下面的 sn-p 创建一个计时器，每 750 毫秒将调用一个名为 _myCallbackFunction 的函数。例如，回调函数可以检查是否有小部件重叠。

Timer.periodic(Duration(milliseconds: 750), _myCallbackFunction);

堆栈重叠布局

您可以使用 Flutter 框架中的 Positioned 小部件来控制小部件在堆栈中的放置位置。

Stack(
  children: <Widget>[
    Positioned(left: 5, top: 0, right: 0, bottom: 10, child: MyCustomWidget(), ); 
    Positioned(left: 10, top: 10, right: 0, bottom: 0, child: MyCustomWidget(), );
  ]
);

如何检查是否有重叠

诀窍是状态管理。假设我们使用MyCustomWidget 将需要将每个MyCustomWidget 的位置参数存储在堆栈上，并最终检查在同一位置是否有小部件top, right, bottom, left。您可以定义您的逻辑，我建议您使用MobX库做一个简单而强大的状态管理。