How to add separable areas (QDockWidget) to a QML application

Question

How to add detachable areas in QML ApplicationWindow?

As an example, take the following application (Tiled). It has several removable zones. In the first image, all areas are attached, and in the second - in the process of disconnecting / reconnecting:

From C ++, this can be implemented using QDockWidget (see this question ). But is there a solution with QML?

Answer 1

As one of the possible solutions, you can create your own QDialog, use the QQuickView inside it with the desired qml file loaded from the corresponding qml file. Communication with the main window and the qml dialog box will be done through Q_PROPERTY and Q_INVOKABLE defines in your user dialog.

A pointer to a QDialog instance, for example, can be propagated in QML as a context property using QQmlContext :: setContextProperty .

Answer 2

Just an idea of ​​how to achieve this behavior. See the Window QML class and creating dynamic objects to actually create a window on demand.

Some (UNTESTED) pseudo-code, just to give the idea of ​​"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(); } } } 

Note. This code will not work out of the box and will probably lead to a dependency loop for the "parent" property!