Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to change header title on swipe with SwipeView
QtWS25 Last Chance

How to change header title on swipe with SwipeView

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qtquickqtquickcontrolsqt5.6
3 Posts 2 Posters 2.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    rreignier
    wrote on 21 May 2016, 21:04 last edited by rreignier
    #1

    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

    1 Reply Last reply
    0
    • J Offline
      J Offline
      jpnurmi
      wrote on 22 May 2016, 08:42 last edited by
      #2

      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"
                  ...
              }
          }
          ...
      }
      
      1 Reply Last reply
      1
      • R Offline
        R Offline
        rreignier
        wrote on 22 May 2016, 10:50 last edited by
        #3

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

        1 Reply Last reply
        0

        1/3

        21 May 2016, 21:04

        • Login

        • Login or register to search.
        1 out of 3
        • First post
          1/3
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved