如何使用 QML StackView?

Posted

技术标签:

【中文标题】如何使用 QML StackView?【英文标题】:How to Use QML StackView? 【发布时间】:2017-07-25 15:45:12 【问题描述】:

我是 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"
                
            
        
    

以下是问题:

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

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

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

【问题讨论】:

听起来你想要StackLayout而不是StackView。 【参考方案1】:

我知道我不会准确回答你关于如何使用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  

【讨论】:

您上面的答案几乎符合我的要求,我会尝试 swipeView 然后将其标记为有答案。

以上是关于如何使用 QML StackView?的主要内容,如果未能解决你的问题,请参考以下文章

如何以递归方式推送到StackView QML?

QML StackView 没有啥可推送的

如何在QML应用中得到一个Item的所有属性,信号及方法,qmlitem

QML StackView:动态更改replaceEnter/Exit动画

QML:在 StackView 中,水平可滑动的视觉效果会持续存在

如何在swift中使用for循环将按钮添加到stackview?