Adding Component dynamically to stacklayout at specific index

James A

I am able to dynamially add componets to stacklayout, but not able to insert at specific position. I am able insert tabbutton at position 1 for Tabbar , but not for StackLayout.

I tried this function layout.children.push(object) but this did not help me.
How to insert ChargerCalibration screen at position 1 in StackLayout

Page {
    id:setuppage

    Component {
        id: tabButton
        TabButton {
            text: qsTr("screen 1")
        }
    }

    Component{
        id : calibraScreen
        ChargerCalibration{}
    }

    Component.onCompleted:  {
        var tab = tabButton.createObject(tabBar)
        tabBar.insertItem(1,tab)

        var object = calibraScreen.createObject(layout)
        layout.children.push(object)

    }

    TabBar {
        id: tabBar
        width: parent.width
        spacing: 2

        TabButton {
            text: qsTr("I/O Parameters")
        }

        TabButton {
            text: qsTr("Device Information")
        }
    }

    StackLayout {
        id: layout
        width: parent.width
        height: parent.height-tabBar.height
        currentIndex: tabBar.currentIndex
        anchors.top:tabBar.bottom

        IOInfo{}

        DeviceInfo{}

    }
}

freedbrt

When you call this line:

var object = calibraScreen.createObject(layout)

You are already added new object as a parent of the StackLayout, and it's automatically add to the end of the children. You can modify the order only change of the parent. For example:

StackOrder {
   id: stack
   Item { id: a }
   Item { id: b }
   Item { id: c }
}

Component.onCompleted: {
   a.parent = null // it can be null, or other visible/non visible temp element
   b.parent = null
   c.parent = null
   // and then add order what you want
   c.parent = stack // now it's first element
   a.parent = stack // now it's second element
   b.parent = stack // now it's third element
}

But it is a bay way, and you are doing something wrong.