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
Forum Updated to NodeBB v4.3 + New Features

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 1 Watching
  • 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

        3/3

        22 May 2016, 10:50

        • Login

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