Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Stackview title change with each pages



  • 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



  • @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
            }
        }
    
    


  • 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



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



  • @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!


  • @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 ?



  • @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 ;-)



  • 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


Log in to reply