我想開發一個從主視窗開始的 qml 應用程式，主視窗中有三個按鈕。通過按下每個按鈕，一個新頁面（布局）應該出現，但在回傳主視窗后，上一頁的狀態不應該改變。我試過 ListView 但它沒有用，因為它在 pop() 之后銷毀了 Item。這是我的代碼（PagesOne.qml 是我要打開的三個頁面的示例）：
主.qml
ApplicationWindow {
id: root
visible: true
width: 8 * Screen.width / 10
height: 8 * Screen.height / 10
color: "#154c79"
// Keep the window on the given x,y on starting
Component.onCompleted: {
x: Screen.width / 10
y: Screen.height / 10
}
minimumWidth: 700
minimumHeight: 400
// Current Working Layout
Component {
id: pageOne
PageOne{}
}
// Empty Layout
Component {
id: pageTwo
PageTwo{}
}
// Empty Layout
Component {
id: pageThree
PageThree{}
}
property variant items: [pageOne.createObject(), pageTwo.createObject(), pageThree.createObject()]
StackView {
id: stack
anchors.fill: parent
// initialItem: pageOne
Component.onCompleted: {
stack.push(items[2], {"destroyOnPop": false})
stack.push(items[1], {"destroyOnPop": false})
stack.push(items[0], {"destroyOnPop": false})
}
}
// change layout on call
function load_layout(layout){
console.log("#############", stack.depth, "#############")
switch (layout){
case 'one':
stack.pop(0, {"destroyOnPop": false})
break;
case 'two':
stack.pop(1, {"destroyOnPop": false})
break;
case 'three':
stack.pop(2, {"destroyOnPop": false})
break;
default:
stack.pop(0, {"destroyOnPop": false})
}
}
}
頁面一.qml：
Item{
id: root
// anchors.fill: parent
// Empty rect
Rectangle{
color: "#03fc88"
anchors.fill: parent
TextField {
anchors.right: parent.right
anchors.top: parent.top
width: 120
height: 60
placeholderText: qsTr("Enter: ")
}
Label{
anchors.centerIn: parent
text: "Page two"
}
// return button
RoundButton {
id: btnBack
text: "\u003C"
onClicked: {
if(text === "\u003C"){
load_layout('one')
}
}
}
}
}
有什么建議可以幫助我嗎？
uj5u.com熱心網友回復：
一個簡單的例子：
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.0
Window {
height: 800
width: 600
visible: true
title: qsTr("Stack test")
ColumnLayout {
anchors.fill: parent
spacing: 0
StackView {
id: stack
Layout.fillHeight: true
Layout.fillWidth: true
initialItem: screen1
Rectangle {
id: screen1
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
Rectangle {
id: screen2
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
Rectangle {
id: screen3
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
RowLayout {
id: bar
Layout.fillWidth: true
Layout.preferredHeight: 50
spacing: 0
Button {
Layout.preferredWidth: 300
Layout.preferredHeight: 50
text: "Change color"
onClicked: {
stack.currentItem.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
}
}
Button {
Layout.preferredWidth: 300
Layout.preferredHeight: 50
text: "Next"
onClicked: {
switch(stack.currentItem)
{
case screen1:
stack.replace(screen2)
break;
case screen2:
stack.replace(screen3)
break;
case screen3:
stack.replace(screen1)
break;
}
}
}
}
}
}
uj5u.com熱心網友回復：
因為，在您的主頁面中，您使用Component，根據定義，QML 可以創建和銷毀與堆疊上的推/拉對應的頁面實體。因此，您描述的功能符合設計。
如果您想維護一個持久的實體，請不要使用Component. 相反，宣告頁面的一個實體但保持它們不可見。
在下面的示例中，我宣告了每個具有不同 TextField 的頁面。當您在頁面之間切換時，您可以在該頁面上的原處繼續編輯 TextField。
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
StackView {
id: stackView
anchors.fill: parent
initialItem: "MenuPage.qml"
}
PageOne {
id: pageOne
visible: false
}
PageTwo {
id: pageTwo
visible: false
}
PageThree {
id: pageThree
visible: false
}
}
// MenuPage.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
header: Label { text: "MainPage" }
ColumnLayout {
Button {
text: qsTr("Page One")
onClicked: stackView.push(pageOne)
}
Button {
text: qsTr("Page Two")
onClicked: stackView.push(pageTwo)
}
Button {
text: qsTr("Page Three")
onClicked: stackView.push(pageThree)
}
}
}
// PageOne.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
header: Label { text: "Page One" }
ColumnLayout {
TextField {
text: "sheep"
}
Button {
text: qsTr("Back")
onClicked: stackView.pop()
}
}
}
// PageTwo.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
header: Label { text: "Page Two" }
ColumnLayout {
TextField {
text: "magic"
}
Button {
text: qsTr("Back")
onClicked: stackView.pop()
}
}
}
// PageThree.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
header: Label { text: "Page Three" }
ColumnLayout {
TextField {
text: "xyzzy"
}
Button {
text: qsTr("Back")
onClicked: stackView.pop()
}
}
}
您可以在線試用！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/533957.html
標籤：qtqml堆栈视图
上一篇：如何加載兩個QML合并兩個專案