QML中动态变化的组件排列

Question

在按钮点击等事件上重新排列 QML UI 组件的首选（推荐）方式是什么？

我确实设计了一个由一堆自定义组件组成的 UI，每个组件都绑定到一个 (C++) 模型。我使用锚来定位 ApplicationWindow 中的组件。 单击按钮时，我想添加一个附加组件，由于其大小，有必要重新排列现有组件。实际上，该按钮可以理解为切换到不同的模式，例如 IDE 中的 Debug 视图（想想 Eclipse）。 我的目标是让组件在视图之间保持一致的状态，并使切换尽可能流畅。

我可以想到这些选项：

1. 设计两个不同的视图，并使用 Loader 或 State 在它们之间切换。由于初始化模型需要一些时间，因此在切换过程中不应删除它们。我认为，将它们设置为 QMLApplicationEngine 的 ContextProperty 应该可以解决这个问题。

2. 在按钮的 onClicked()-Handler 中进行大量的重新排列。可能是最糟糕的解决方案，但不需要重新初始化组件和模型。

3. 我认为最优雅的解决方案是在某种容器（或模型）中初始化组件，然后在单击按钮时为该容器分配不同的布局。但我不知道这是否可能以及如何实现。

编辑：我遵循方法 1. 使用 StackLayout。它基本上可以工作，但似乎不可见的 UI 仍在后台运行并消耗资源（例如，从我的 QQuickImageProvider 请求图像）。 使用 Loader 可以消除这个问题，因为它会在每次更改源属性时破坏之前的 UI。然而，我喜欢 StackLayout 的一点是它会在应用启动时预加载所有 UI。因此，与 Loader 相比，过渡更平滑。 有没有办法禁用不可见的 UI？

Answer 1

您的选项 (1) 是最灵活的选项，因为您有两个完全独立的 UI，具体取决于状态。

正如您已经发现的那样，这需要以两种 UI 都可以访问的方式保存所有相关的状态数据，例如在 C++ 或全局可访问的 QML/Script 对象中。

如果您设想更多的更改或调整，而不仅仅是重新排列元素，我会这样做。

如果您确定重新排列元素就足够了，请查看QML states

这有点像您的选项 (2) 和 (3) 的组合。

状态设置允许您在本地根据命名状态为每个元素定义anchors 和其他属性。

然后，按钮的信号处理程序只需将其中一个名称分配给相应的state 属性，即可更改哪个状态处于活动状态。