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. Stackview title change with each pages
Forum Updated to NodeBB v4.3 + New Features

Stackview title change with each pages

Scheduled Pinned Locked Moved Solved QML and Qt Quick
8 Posts 3 Posters 2.7k Views 2 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.
  • F Offline
    F Offline
    filipdns
    wrote on last edited by
    #1

    Hello, I'm trying to use stackview for my project but I would like to have the title change when the page is switching, to you know how I can do that?

    Then you very much for your help

    joeQJ 1 Reply Last reply
    0
    • F filipdns

      Hello, I'm trying to use stackview for my project but I would like to have the title change when the page is switching, to you know how I can do that?

      Then you very much for your help

      joeQJ Offline
      joeQJ Offline
      joeQ
      wrote on last edited by
      #2

      @filipdns Hi, friend. Welcome.

      I didn't find title attribute in StackView. If you has the titlein StackView or you add one object as title.

      You can use the currentItemChanged signal, like:

          StackView {
              id: id_stack
      
              anchors.fill: parent
              initialItem: id_sViewItem
              onCurrentItemChanged: {
                  console.log("item Changed :" + id_stack.depth); /// at here,you can update view title
              }
          }
      
      

      Just do it!

      F 1 Reply Last reply
      0
      • GTDevG Offline
        GTDevG Offline
        GTDev
        wrote on last edited by
        #3

        Hi!

        You can also have a look at V-Play Engine for qt-based mobile apps and games.

        The NavigationStack stack type already contains a NavigationBar, which automatically displays the Page::title and other configured navigationbar-items for the page.

        The NavigationStack also provides with native UI and page transitions for both iOS and Android:

        import VPlayApps 1.0
        
        App {
          NavigationStack {
            id: navigationStack
        
            Page {
              title: "First Page"
              AppButton {
                text: "Push Second"
                onClicked: navigationStack.push(secondPage)
              }
            }
          }
        
          Component {
            id: secondPage
            Page { title: "Second Page" }
          }
        }
        
        

        Hope this helps!

        Best,
        GTDev

        Senior Developer at Felgo - https://felgo.com/qt

        Develop mobile Apps for iOS & Android with Qt
        Felgo is an official Qt Technology Partner

        1 Reply Last reply
        0
        • F Offline
          F Offline
          filipdns
          wrote on last edited by
          #4

          Thank you very much!! I will test that today and will give feedback here ;-)

          1 Reply Last reply
          0
          • joeQJ joeQ

            @filipdns Hi, friend. Welcome.

            I didn't find title attribute in StackView. If you has the titlein StackView or you add one object as title.

            You can use the currentItemChanged signal, like:

                StackView {
                    id: id_stack
            
                    anchors.fill: parent
                    initialItem: id_sViewItem
                    onCurrentItemChanged: {
                        console.log("item Changed :" + id_stack.depth); /// at here,you can update view title
                    }
                }
            
            
            F Offline
            F Offline
            filipdns
            wrote on last edited by
            #5

            @joeQ Hello Joe, thank you very much for your solution, it's look much better than v-play but could you explain me how can I implement your solution in my code?

            //import QtQuick 2.7
            import QtQuick.Controls 1.2
            import QtQuick.Controls.Styles 1.3
            import QtQuick.Window 2.2
            
            import "content"
            
            
            ApplicationWindow {
                id: mainWindow
                visible: true   // this is mandatory
                visibility: Window.Maximized
                style: ApplicationWindowStyle {
                        background: Rectangle {
                           gradient: Gradient {
                                GradientStop { position: 0.0; color: "green" }
                                GradientStop { position: 0.5; color: "white" }
                                GradientStop { position: 1.0; color: "green" }
                            }
                        }
                   }
                
               StackView {
                    id: stackView
                    anchors.fill: parent
                    // Implements back key navigation
                    focus: true
                    Keys.onReleased: if (event.key === Qt.Key_Back && stackView.depth > 1) {
                                         stackView.pop();
                                         event.accepted = true;
                                     }
            
                    initialItem: Item {
                        width: parent.width
                        ListView {
                            anchors.topMargin: 0
                            model: pageModel
                            anchors.fill: parent
                            delegate: Fgaln {
                                text: title
                                onClicked: stackView.push(Qt.resolvedUrl(page))
                            }
                        }
                        ListView {
                            anchors.topMargin: 100
                            model: pageModel1
                            anchors.fill: parent
                            delegate: Fgalp {
                                text: title
                                onClicked: stackView.push(Qt.resolvedUrl(page))
                            }
                        }
                    }
                }
            
                toolBar: BorderImage {
            
            
                    border.bottom: 9
                    source: "images/toolbar.png"
                    width: parent.width
                    height: 100
                    visible: true
            
                    Rectangle {
                        id: backButton
                        width: opacity ? 60 : 0
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        opacity: stackView.depth > 1 ? 1 : 0
                        anchors.verticalCenter: parent.verticalCenter
                        antialiasing: true
                        height: 60
                        radius: 4
                        color: backmouse.pressed ? "#222" : "transparent"
                        Behavior on opacity { NumberAnimation{} }
                        Image {
                            anchors.verticalCenter: parent.verticalCenter
                            source: "images/navigation_previous_item.png"
                        }
                        MouseArea {
                            id: backmouse
                            anchors.fill: parent
                            anchors.margins: -10
                            onClicked: stackView.pop()
                        }
                    }
            
                    Text {
                        font.pixelSize: 42
                        Behavior on x { NumberAnimation{ easing.type: Easing.OutCubic} }
                        x: backButton.x + backButton.width + 20
                        anchors.verticalCenter: parent.verticalCenter
                        color: "lightgrey"
                        text: "Kardex"
                        font.italic: true
                        font.family: "Calibri"
                        font.bold: true
                    }
            
                    ListModel {
                        id: pageModel
                        ListElement {
                            title: "F-GALN"
                            page: "content/ataLN.qml"
                        }
                     }
                    ListModel {
                        id: pageModel1
                        ListElement {
                            title: "F-GALP"
                            page: "content/ataLP.qml"
                        }
                     }
                }
            }
            
            ``
            Thank very much for your help!
            joeQJ 1 Reply Last reply
            0
            • F filipdns

              @joeQ Hello Joe, thank you very much for your solution, it's look much better than v-play but could you explain me how can I implement your solution in my code?

              //import QtQuick 2.7
              import QtQuick.Controls 1.2
              import QtQuick.Controls.Styles 1.3
              import QtQuick.Window 2.2
              
              import "content"
              
              
              ApplicationWindow {
                  id: mainWindow
                  visible: true   // this is mandatory
                  visibility: Window.Maximized
                  style: ApplicationWindowStyle {
                          background: Rectangle {
                             gradient: Gradient {
                                  GradientStop { position: 0.0; color: "green" }
                                  GradientStop { position: 0.5; color: "white" }
                                  GradientStop { position: 1.0; color: "green" }
                              }
                          }
                     }
                  
                 StackView {
                      id: stackView
                      anchors.fill: parent
                      // Implements back key navigation
                      focus: true
                      Keys.onReleased: if (event.key === Qt.Key_Back && stackView.depth > 1) {
                                           stackView.pop();
                                           event.accepted = true;
                                       }
              
                      initialItem: Item {
                          width: parent.width
                          ListView {
                              anchors.topMargin: 0
                              model: pageModel
                              anchors.fill: parent
                              delegate: Fgaln {
                                  text: title
                                  onClicked: stackView.push(Qt.resolvedUrl(page))
                              }
                          }
                          ListView {
                              anchors.topMargin: 100
                              model: pageModel1
                              anchors.fill: parent
                              delegate: Fgalp {
                                  text: title
                                  onClicked: stackView.push(Qt.resolvedUrl(page))
                              }
                          }
                      }
                  }
              
                  toolBar: BorderImage {
              
              
                      border.bottom: 9
                      source: "images/toolbar.png"
                      width: parent.width
                      height: 100
                      visible: true
              
                      Rectangle {
                          id: backButton
                          width: opacity ? 60 : 0
                          anchors.left: parent.left
                          anchors.leftMargin: 20
                          opacity: stackView.depth > 1 ? 1 : 0
                          anchors.verticalCenter: parent.verticalCenter
                          antialiasing: true
                          height: 60
                          radius: 4
                          color: backmouse.pressed ? "#222" : "transparent"
                          Behavior on opacity { NumberAnimation{} }
                          Image {
                              anchors.verticalCenter: parent.verticalCenter
                              source: "images/navigation_previous_item.png"
                          }
                          MouseArea {
                              id: backmouse
                              anchors.fill: parent
                              anchors.margins: -10
                              onClicked: stackView.pop()
                          }
                      }
              
                      Text {
                          font.pixelSize: 42
                          Behavior on x { NumberAnimation{ easing.type: Easing.OutCubic} }
                          x: backButton.x + backButton.width + 20
                          anchors.verticalCenter: parent.verticalCenter
                          color: "lightgrey"
                          text: "Kardex"
                          font.italic: true
                          font.family: "Calibri"
                          font.bold: true
                      }
              
                      ListModel {
                          id: pageModel
                          ListElement {
                              title: "F-GALN"
                              page: "content/ataLN.qml"
                          }
                       }
                      ListModel {
                          id: pageModel1
                          ListElement {
                              title: "F-GALP"
                              page: "content/ataLP.qml"
                          }
                       }
                  }
              }
              
              ``
              Thank very much for your help!
              joeQJ Offline
              joeQJ Offline
              joeQ
              wrote on last edited by
              #6

              @filipdns hi,

              From your snippet:

              ListView {
                              anchors.topMargin: 0
                              model: pageModel
                              anchors.fill: parent
                              delegate: Fgaln {
                                  text: title // this title is from model, does it wok?
                                  onClicked: stackView.push(Qt.resolvedUrl(page))
                              }
                          }
              

              and which title you want to change in you code when stackView push or pop ? is it Fgaln::text ?

              Just do it!

              F 1 Reply Last reply
              0
              • joeQJ joeQ

                @filipdns hi,

                From your snippet:

                ListView {
                                anchors.topMargin: 0
                                model: pageModel
                                anchors.fill: parent
                                delegate: Fgaln {
                                    text: title // this title is from model, does it wok?
                                    onClicked: stackView.push(Qt.resolvedUrl(page))
                                }
                            }
                

                and which title you want to change in you code when stackView push or pop ? is it Fgaln::text ?

                F Offline
                F Offline
                filipdns
                wrote on last edited by
                #7

                @joeQ yes, I have to have 4 listview in the sent code I put only 2 for test and I would like to have the title change from "Kardex" to "Kardex FGALN" or "Kardex FGALP" following the listview selected
                Thank you ;-)

                1 Reply Last reply
                0
                • F Offline
                  F Offline
                  filipdns
                  wrote on last edited by filipdns
                  #8

                  Solved,
                  page1.qml

                  /****************************************************************************
                  **
                  ** Copyright (C) 2017 The Qt Company Ltd.
                  ** Contact: https://www.qt.io/licensing/
                  **
                  ** This file is part of the examples of the Qt Toolkit.
                  **
                  ** $QT_BEGIN_LICENSE:BSD$
                  ** Commercial License Usage
                  ** Licensees holding valid commercial Qt licenses may use this file in
                  ** accordance with the commercial license agreement provided with the
                  ** Software or, alternatively, in accordance with the terms contained in
                  ** a written agreement between you and The Qt Company. For licensing terms
                  ** and conditions see https://www.qt.io/terms-conditions. For further
                  ** information use the contact form at https://www.qt.io/contact-us.
                  **
                  ** BSD License Usage
                  ** Alternatively, you may use this file under the terms of the BSD license
                  ** as follows:
                  **
                  ** "Redistribution and use in source and binary forms, with or without
                  ** modification, are permitted provided that the following conditions are
                  ** met:
                  **   * Redistributions of source code must retain the above copyright
                  **     notice, this list of conditions and the following disclaimer.
                  **   * Redistributions in binary form must reproduce the above copyright
                  **     notice, this list of conditions and the following disclaimer in
                  **     the documentation and/or other materials provided with the
                  **     distribution.
                  **   * Neither the name of The Qt Company Ltd nor the names of its
                  **     contributors may be used to endorse or promote products derived
                  **     from this software without specific prior written permission.
                  **
                  **
                  ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
                  ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
                  ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
                  ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
                  ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
                  ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
                  ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
                  ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
                  ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
                  ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
                  ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
                  **
                  ** $QT_END_LICENSE$
                  **
                  ****************************************************************************/
                  
                  import QtQuick 2.6
                  import QtQuick.Controls 2.1
                  
                  
                  Page {
                      id: root
                  
                      header: ToolBar {
                          Label {
                              text: qsTr("KARDEX")
                              font.pixelSize: 50
                              color: "lightgrey"
                              anchors.centerIn: parent
                              font.family: "Times New Roman"
                              font.bold: true
                              font.italic: true
                          }
                          background: Rectangle {
                              gradient: Gradient {
                                  GradientStop { position: 0 ; color: "black" }
                                  GradientStop { position: 1 ; color: "green" }
                              }
                           }
                      }
                  
                      ListView {
                          id: listView
                          anchors.fill: parent
                          topMargin: 48
                          leftMargin: 48
                          bottomMargin: 48
                          rightMargin: 48
                          spacing: 20
                          model: ["LNx4", "LPx4", "GBx4","LTx4"]
                          delegate: ItemDelegate {
                              width: avatar.implicitWidth
                              height: avatar.implicitHeight
                              leftPadding: avatar.implicitWidth + 32
                              onClicked: root.StackView.view.push("qrc:/Page2.qml", { inConversationWith: modelData })
                  
                              Image {
                                  id: avatar
                                  source: "qrc:/images/" + modelData.replace(" ", "_") + ".png"
                              }
                          }
                      }
                  }
                  
                  

                  Page2.qml

                  import QtQuick 2.6
                  import QtQuick.Layouts 1.3
                  import QtQuick.Controls 2.1
                  import QtQuick.Controls.Styles 1.1
                  import QtQuick.Extras 1.4
                  import QtQuick.Controls 1.2
                  
                  
                  Page {
                      id: root
                      background: Rectangle {
                              color: "black"
                          }
                      property string inConversationWith
                  
                      header: ToolBar {
                          width: parent.width
                              height: 60
                          style: ToolBarStyle {
                                  padding {
                                      left: 8
                                      right: 8
                                      top: 3
                                      bottom: 3
                                  }
                                  background: Rectangle {
                                      gradient: Gradient {
                                          GradientStop { position: 0 ; color: "black" }
                                          GradientStop { position: 1 ; color: "green" }
                                      }
                                  }
                              }
                  
                          Rectangle {
                                  id: backButton
                                  width: opacity ? 60 : 0
                                  anchors.left: parent.left
                                  anchors.leftMargin: 20
                                  opacity: stackView.depth > 1 ? 1 : 0
                                  anchors.verticalCenter: parent.verticalCenter
                                  antialiasing: true
                                  height: 40
                                  radius: 4
                                  color: backmouse.pressed ? "darkgreen" : "transparent"
                                  Behavior on opacity { NumberAnimation{} }
                                  Image {
                                      anchors.verticalCenter: parent.verticalCenter
                                      source: "images/navigation_previous_item.png"
                                  }
                                  MouseArea {
                                      id: backmouse
                                      anchors.fill: parent
                                      anchors.margins: -10
                              onClicked: root.StackView.view.pop()
                          }
                      }
                  
                          Label {
                              id: pageTitle
                              text: "KARDEX " + inConversationWith
                              textFormat: Text.AutoText
                              fontSizeMode: Text.VerticalFit
                              font.pixelSize: 50
                              color: "lightgrey"
                              anchors.centerIn: parent
                              font.family: "Times New Roman"
                              font.bold: true
                              font.italic: true
                  
                          }
                  
                      }
                  
                      Item {
                          y: 60
                          width: 359
                          height: 530
                  
                          Column {
                              y: 0
                              spacing: 5
                  
                              Button {
                                  text: "05"
                                  style: touchStyle1
                              }
                              Button {
                                  text: "12"
                                  style: touchStyle1
                              }
                              Button {
                                  text: "21"
                                  style: touchStyle1
                              }
                             }
                          Column {
                              x:105
                          Button {
                              anchors.margins: 20
                              style: touchStyle2
                              text: "24"
                              onClicked: stackView.push (Qt.resolvedUrl("LocalstoragePage.qml"))
                          }
                          }
                          Component {
                              id: touchStyle1
                              ButtonStyle {
                                  panel: Item {
                                      implicitHeight: 100
                                      implicitWidth: 100
                                      BorderImage {
                                          anchors.fill: parent
                                          antialiasing: true
                                          anchors.margins: control.pressed ? 0 : -2
                                          source: control.pressed ? "../images/green_button_pressed.png" : "../images/green_button.png"
                                          Text {
                                              text: control.text
                                              anchors.centerIn: parent
                                              color: "white"
                                              font.pixelSize: 23
                                              renderType: Text.NativeRendering
                                          }
                                      }
                                  }
                              }
                          }
                          Component {
                              id: touchStyle2
                              ButtonStyle {
                                  panel: Item {
                                      implicitHeight: 100
                                      implicitWidth: 100
                                      BorderImage {
                                          anchors.fill: parent
                                          antialiasing: true
                                          anchors.margins: control.pressed ? 0 : -2
                                          source: control.pressed ? "../images/gold_button_pressed.png" : "../images/gold_button.png"
                                          Text {
                                              text: control.text
                                              anchors.centerIn: parent
                                              color: "white"
                                              font.pixelSize: 23
                                              renderType: Text.NativeRendering
                                          }
                                      }
                                  }
                              }
                          }
                       }
                  }
                  
                  
                  

                  images are in images folder and avatars names are LNx4.png,LPx4.png,GBx4.png, LTx4.png

                  1 Reply Last reply
                  0

                  • Login

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