如何將可拆卸區域 (QDockWidget) 添加到 QML 應用程序

Question

如何向 QML ApplicationWindow 添加可拆卸區域？

以下面的應用程序（Tiled）為例。 它有多個可拆卸區域。 在第一個圖像中，所有區域都已附加，而在第二個圖像中，區域正在分離/重新附加：

在 C++ 中，這可以通過QDockWidget來實現（參見這個問題）。 但是 QML 有解決方案嗎？

Answer 1

我做了一個簡單的工作示例。 你可以在這里找到它。 一定有足夠多的評論讓你整理出來。

我使用了這樣的對象的動態創建：

• 動態創建組件（DetachableItem.qml）並將其分配給屬性（不是必需的，但更容易找到它）
• 為這個組件的attached屬性創建連接，當它改變時我可以調用一些函數；
• 將項目移動到另一個窗口，將對象推送到它的data屬性中
• 以相同的方式將其移回 - 將其推送到主窗口的data屬性並隱藏單獨的窗口。

隨時提出問題或提出一些改進。 我對如何改進它的任何建議感興趣！

UPD：我用新的提交更新了這個例子，我擺脫了動態對象的創建。 如果您仍然對動態對象創建感興趣，可以簽出此提交

Answer 2

作為一種可能的解決方案，您可以創建自定義QDialog ，在其中使用QQuickView並從適當的 qml 文件加載所需的 qml 內容。 與主 qml 窗口和對話框的通信將通過自定義對話框中定義的Q_PROPERTY和Q_INVOKABLE完成。

例如，指向QDialog實例的指針可以在QQmlContext::setContextProperty的幫助下作為上下文屬性傳播到 QML。

Answer 3

只是關於如何實現這種行為的想法。 查看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();
  }
 }
}

注意：此代碼不能開箱即用，可能會導致“父”屬性上的依賴循環！

Answer 4

您可以使用他們已將其導出到KDDockWidget的 KDDockWidget，但它不是 LGPL..