How to change header title on swipe with SwipeView

rreignier

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

jpnurmi

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

rreignier

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