Difficulty in creating a dynamic dock area

[mehrdadpilevar]

Using this library, I need to be able to dynamically create tabs that have their own tabs, but I ran into a problem. The structure is like this🤔🤔

main.qml

import QtQuick 2.6 import QtQuick.Controls 2.12 import com.kdab.dockwidgets 2.0 as KDDW import QtQuick.Layouts 1.15 ApplicationWindow { visible: true width: 1000 height: 800

ColumnLayout{
    anchors.fill: parent
    TabBar{
        id:bar
        Layout.fillHeight: false
        Layout.fillWidth: true
        TabButton{
            text: "1"
        }
        TabButton{
            text: "2"
        }
    }

    StackLayout{
        currentIndex: bar.currentIndex
        Layout.fillHeight: true
        Layout.fillWidth: true

        KDDW.DockingArea {
            id:dockmain1
            uniqueName: "MainLayout-1"

            KDDW.DockWidget {
                id: dock1
                uniqueName: "dock1"
                Rectangle{
                    anchors.fill: parent
                    color: "red"
                }
            }
            KDDW.DockWidget {
                id: dock2
                uniqueName: "dock2" // Each dock widget needs a unique id
                Rectangle{
                    anchors.fill: parent
                    color: "blue"
                }
            }
            KDDW.DockWidget {
                id: dock3
                uniqueName: "dock3" // Each dock widget needs a unique id
                Rectangle{
                    anchors.fill: parent
                    color: "green"
                }
            }

            Component.onCompleted: {
                dockmain1.addDockWidget(dock1,KDDW.KDDockWidgets.Location_OnBottom,dockmain1)
                dock1.addDockWidgetAsTab(dock2)
                dock1.addDockWidgetAsTab(dock3)

            }

        }


        KDDW.DockingArea {
            id:dockmain2
            uniqueName: "MainLayout-2"

            KDDW.DockWidget {
                id: dock4
                uniqueName: "dock4"
                Rectangle{
                    anchors.fill: parent
                    color: "gray"
                }
            }
            KDDW.DockWidget {
                id: dock5
                uniqueName: "dock5" // Each dock widget needs a unique id
                Rectangle{
                    anchors.fill: parent
                    color: "yellow"
                }
            }
            KDDW.DockWidget {
                id: dock6
                uniqueName: "dock6" // Each dock widget needs a unique id
                Rectangle{
                    anchors.fill: parent
                    color: "black"
                }
            }

            Component.onCompleted: {
                dockmain2.addDockWidget(dock4,KDDW.KDDockWidgets.Location_OnBottom,dockmain2)
                dock4.addDockWidgetAsTab(dock5)
                dock4.addDockWidgetAsTab(dock6)
            }

        }

    }

}

}

but result is

Problems are divided into several parts 🥲

1.I should be able to save these 3 tabs that are dynamically created in a dock area, and in the future, I should be able to make every tab that is created inside the Livet stack in the same shape (half of them must be the same) so that there is no problem in saving to do not exist

2. When I shake the second or more windows in the docking area, the photos are not displayed to fit on the screen.

Thanks for the readership and support ❤️❤️❤️