import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Page{
    id: pageid
    width: parent.width
    height: parent.height

    Row{
        id: row1

        Button{
            text: "0"
            onClicked: layout.currentIndex = 0
        }
        Button{
            text: "1"
            onClicked: layout.currentIndex = 1
        }
        Button{
            text: "2"
            onClicked:{
                var str = 'import QtQuick 2.15; Rectangle {id: rect2; color: "red"; DropArea{anchors.fill: parent; onEntered: {rect2.color = "silver"}}}'
                var comp = Qt.createQmlObject(str,layout,"dynamicSnippet1")
                onClicked: layout.currentIndex = 2
            }
        }
    }

    // Stacklayout block
    StackLayout {
        id: layout
        anchors.top: row1.bottom
        height: parent.height - row1.height - dragger.height
        width: parent.width
        currentIndex: 0

        // Component 0
        Rectangle {
            id: rect0
            color: 'teal'
        }

        // Component 1
        Rectangle {
            id:rect1
            color: 'plum'

            DropArea{
                anchors.fill: parent
                onEntered: {rect1.color = "gold"}

            }
        }
    }



    // Drag rectangles
    ListView{
        id: dragger
        anchors.top: layout.bottom
        height: 30
        width: parent.width
        orientation: Qt.Horizontal
        model: 3
        delegate:  Rectangle{
            id: xrect
            height: 30
            width: 60
            color:"grey"
            border.width: 1
            border.color: "orange"

            MouseArea{
                id: ma
                anchors.fill: parent
                onReleased: parent.Drag.drop()
                drag.target: parent

            }
        }
    }
}