How to Use QML StackView?

Question

I am a beginner in QMl and have worked more on StackWidget in QT C++.In QML i am confused to use stackView and have written following code:

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Stack view")

    MainForm {
        StackView {
            id: stackView
            x: 0
            y: 0
            width: 360
            height: 360

            initialItem: page1

            Rectangle {
                id: page1

                //anchors.fill: parent
                color: "lightgreen"
                Button {
                    id: buttonPage1
                    text: "back to 2"
                    anchors.centerIn: parent
                    onClicked: {
                        stackView.pop()  //**Is THIS CORRECT**
                        stackView.push(page2) //**Is THIS CORRECT**

                    }
                }
                TextEdit {
                    id: te1
                    width: 105
                    height: 40
                    text: "enter"
                }
            }
            Rectangle {
                id: page2

                //anchors.fill: parent
                color: "lightblue"
                Button {
                    id: buttonPage2
                    text: "back to 1"
                    anchors.centerIn: parent
                    onClicked: {
                        stackView.pop() //**Is THIS CORRECT**
                    }
                }
                TextEdit {
                    id: te2
                    width: 109
                    height: 29
                    text: "enter"
                }
            }
        }
    }
}

Below are the questions:

1. In StackWidget i was using setCurrentIndex to set the desired page and I know that in QML i should use push and pop. In that case how to use push and pop to navigate between page1 and page2 based on some selection. ?

2. Initially, can I load all the pages to the stackView?

3. How to save the content in the page when I pop an item from stackView?

Solution

I know that I will not exactly answer your question on how to use the StackView, that is because I think you don't want to have a StackView following your description.

The use-case of a StackView is, when you have the pages - as the names suggests - on a stack. If you only want to switch between pages, where it is not determinable, which one is logically below another, the StackView is not what you want, and you might want to consider a SwipeView.

In the SwipeView the pages coexist in a side-by-side manner. Since Qt 5.9 they have a interactive property with which you might disable the swipe behaviour. Here you can choose the page you want to show by setting the currentIndex.

However, the SwipeView will create its pages as needed, to reduce the memory and CPU load (effectively disabling bindings of unloaded pages). This might result in data loss, if the data is not stored in a model outside the page itself.

If you want to have all the pages loaded at the same time, and you only want to switch the visible one, you might go with a simple custom component:

Item {
    property int currentIndex
    Page1 { visible: parent.currentIndex === 0 }
    Page2 { visible: parent.currentIndex === 1 }
    Page3 { visible: parent.currentIndex === 2 }
    ...
}

Or you go like:

MyView.qml

Item {
    id: root
    property int currentIndex: 0
    default property Item newContent

    onNewContentChanged: {
        newContent.parent = root
        newContent.visible = Qt.binding(bindingsClosure(root.children.length - 1))
    }

    function bindingsClosure(index) { return function() { return root.currentIndex === index } }
}

main.qml

MyView {
    Page1 { }
    Page2 { }
    Page3 { }
}

Comments

[jpnurmi]

It sounds like you want StackLayout instead of StackView.

[pra7]

Your above answer almost matches my requirement and i will try swipeView and then will mark it has answer.