如何使用QML StackView?

时间:2017-07-25 15:45:12

标签: qt qml qtquick2 qt-quick qtquickcontrols

我是QMl的初学者,在QT C ++中更多地使用StackWidget。在QML中,我很难使用 stackView 并编写以下代码:

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"
                }
            }
        }
    }
}

以下是问题:

  1. 在StackWidget中,我使用setCurrentIndex来设置所需的页面,我知道在QML中我应该使用push和pop。在这种情况下,如何根据某些选择使用push和pop在 page1 page2 之间导航。

  2. 最初,我可以将所有页面加载到 stackView 吗?

  3. 当我从stackView弹出一个项目时如何保存页面中的内容?

1 个答案:

答案 0 :(得分:7)

我知道我不会完全回答您关于如何使用StackView的问题,因为我认为您不希望跟随您的描述StackView

StackView的用例是,当你有一个页面 - 顾名思义 - 在堆栈上。如果您只想在不可确定的页面之间切换,哪一个在逻辑上低于另一个页面,StackView不是您想要的,您可能需要考虑SwipeView

SwipeView中,页面以并排的方式共存。自Qt 5.9起,它们具有interactive属性,您可以使用该属性禁用滑动行为。 在这里,您可以通过设置currentIndex

来选择要显示的页面

但是,SwipeView将根据需要创建其页面,以减少内存和CPU负载(有效地禁用已卸载页面的绑定)。如果数据未存储在页面本身外的model中,则可能导致数据丢失。

如果您希望同时加载所有页面,而您只想切换可见页面,则可能需要使用简单的自定义组件:

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

或者你喜欢:

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 { }
}