How to change header title on swipe with SwipeView



  • Hello,
    I am new to QtQuick so I need your help.
    I am building an application based on the Qt Labs Controls - Gallery example so I use the new qtquickcontrols2, named Qt.labs.controls 1.0 with Qt 5.6.
    I am using a SwipeView within an ApplicationWindow with a Toolbar as a header and I would like the title to change on a swipe to get a new title for each page.

    A minimal example would be:

    import QtQuick 2.6
    import Qt.labs.controls 1.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        header: ToolBar{
            Label {
                id: titleLabel
                text: "Title"
                anchors.fill: parent
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
        }
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
    
            Page {
                Label {
                    text: qsTr("First page")
                    anchors.centerIn: parent
                }
            }
    
            Page {
                Label {
                    text: qsTr("Second page")
                    anchors.centerIn: parent
                }
            }
        }
    
       PageIndicator {
            id: indicator
            count: swipeView.count
            currentIndex: swipeView.currentIndex
            anchors.bottom: swipeView.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
    

    So, does anyone could point me how to achieve the title changing on a swipe?

    Thanks



  • Hi, with the early tech preview in Qt 5.6, you could do:

    import QtQuick 2.6
    import Qt.labs.controls 1.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        header: ToolBar{
            Label {
                id: titleLabel
                text: swipeView.currentItem.title
                anchors.fill: parent
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
        }
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
    
            Page {
                property string title: "First"
                Label {
                    text: qsTr("First page")
                    anchors.centerIn: parent
                }
            }
    
            Page {
                property string title: "Second"
                Label {
                    text: qsTr("Second page")
                    anchors.centerIn: parent
                }
            }
        }
    
       PageIndicator {
            id: indicator
            count: swipeView.count
            currentIndex: swipeView.currentIndex
            anchors.bottom: swipeView.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
    

    In the final release in Qt 5.7, Page has gained a title property for convenience, so the code will change to:

    import QtQuick 2.6
    import QtQuick.Controls 2.0
    
    ApplicationWindow {
        ...
        SwipeView {
            ...
            Page {
                title: "First"
                ...
            }
    
            Page {
                title: "Second"
                ...
            }
        }
        ...
    }
    


  • Oh, thanks a lot!
    I did not know we can create custom properties.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.