Solved 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 inStackView
. If you has thetitle
inStackView
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 itFgaln::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