如何将可分离区域（QDockWidget）添加到 QML 应用程序

Question

如何在 QML 应用程序窗口中添加可分离区域？

以 Tiled 应用程序为例，它有多个可分离区域。在第一幅图像中，所有区域都已连接，而在第二幅图像中，一个区域正在分离 / 重新连接的过程中:

从 C++ 中，可以通过 QDockWidget 实现这一点（请参见此问题）。但是在 QML 中有没有解决方案呢？

- Appleshell

---

请解释一下为什么这个问题被认为是“过于宽泛”。我很确定要么有一个预定义的类可以实现这种功能，要么有一种特定的方法可以创建可分离区域。 - Appleshell

我在QML中没有直接看到过那种功能。虽然可以轻松创建浮动区域，但我怀疑您想要一个可分离的窗口。如果设备是手机，则这并不是非常有用，因此它可能在他们的优先级列表中排名相对较低。 - Jay

@Appleshell，我目前也遇到了同样的问题。我查看了Qt文档，但没有找到任何相关信息，因此我认为它尚未实现。你在纯QML中找到了解决方案吗？ - SteveTJS

@SteveTJS 滚动到我的回答下面。我做了一个小例子。 - Maxim Skvortsov

请查看我的相关工作 https://github.com/HamedMasafi/qmldock - Hamed Masafi

Answer 1

我制作了一个简单的工作示例，你可以在这里找到它。里面必须有足够的注释让你理解。

我使用了动态创建对象的方式：

• 动态创建组件(DetachableItem.qml)并将其分配给属性(不必要，但更容易找到)
• 为该组件的attached属性创建连接，在它改变时可以调用一些函数;
• 将该项移动到另一个窗口，并将对象推入它的data属性中
• 以同样的方式将其移回 - 将其推入主窗口的data属性中并隐藏单独的窗口。

如果您对该示例有任何问题或提出改进建议，请随时提问。我对改进它的任何建议都感兴趣！

更新：我更新了示例，其中我摆脱了动态对象创建。如果你仍然对动态对象创建感兴趣，你可以检出这个提交。

- Maxim Skvortsov

---

我尝试了你更新后的示例。非常感谢你将其公开提供给大家。它运行得非常好。 - Aquarius_Girl

Answer 2

这只是一个实现该行为的想法。看一下Window QML类和动态对象创建，以实际请求创建窗口。

以下是一些（未经测试的）伪代码，只是为了给出一个想法 "DockWindow.qml":

import QtQuick 2.0
import QtQuick.Window 2.2

Rectangle {
 id: dockWidget

 property Window window: null
 property Item embedIn: null
 parent: window ? window : embedIn
 readonly property bool detached: window

 function detach() {
  if (!window) {
   window = Qt.createQmlObject('
    import QtQuick.Window 2.2
    Window { flags: …; }
    ', dockWidget, "dockWidget");
  }
 }

 function close() {
  if (window) {
   window.close();
  }
 }
}

注意：这段代码不能直接使用，可能会导致“parent”属性的依赖循环！

- Nils Fenner

Answer 3

作为一种可能的解决方案，您可以创建自定义 QDialog，在其中使用 QQuickView 并加载来自相应 qml 文件的所需 qml 内容 （已加载）。通过您的自定义对话框中的 Q_PROPERTY 和 Q_INVOKABLE 定义与主 qml 窗口和对话框进行通信。例如，可以使用 QQmlContext::setContextProperty 将指向您的 QDialog 实例的指针作为上下文属性传播到 QML 中。

- Max Go

Answer 4

你可以使用KDDockWidget，他们已经将其导出到qml中，但它不是LGPL许可证。

- ניר