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

c++, qml, qt, qt-quick, qt5

Solution

I made a simple working example. You can find it here. There must be enough comments for you to sort it out.

I used dynamic creation of objects like that:

- dynamically create component(DetachableItem.qml) and assign it to property(not necessary, but it is easier to find it)

- create connection for this component's `attached` property, where I can call some function when it changes;

- move the item into another window pushing the object into it's `data` property

- move it back the same way - pushing it to `data` property of main window and hiding separate window.

Feel free to ask question or proposing some improvements. I am interested in any suggestions how to improve it!

UPD: I updated the example with new commit where I got rid of dynamic objects creation. If you are still interested in dynamic object creation, you can checkout to this commit

Problem

How do I add detachable areas to a QML ApplicationWindow? Take the following application (Tiled) as an example. It has multiple detachable areas. In the first image all areas are attached, while in the second one area is in the process of being detached/reattached: From C++ this can be realized with QDockWidget (see this question). But is there a solution with QML?

Original source

Related problems