How to access containing QML StackView? - qt

Question

I am new to QML, I have a Component which is pushed on a StackView. I'd like from this component to access the StackView containing it.
Here is a code that works
import QtQuick 2.11
import QtQuick.Controls.2.2
ApplicationWindow {
id: window
StackView {
id: stackView
initialItem: test1
anchors.fill: parent
}
Component {
id: test1
Button {
text: "Go to test2"
onClicked: stackView.push(test2)
}
}
Component {
id: test2
Button {
text: "Back to test1"
onClicked: stackView.pop()
}
}
}
However, I'd like to avoid accessing stackView by its id
Stack.view seems to be what I'm looking for, but I have no idea how to use it. I tried all of the following (replacing Buttons' onClicked) :
Stack.view.push(test2)
view.push(test2)
test1.Stack.view.push(test2)
test1.view.push(test2)
None of these work.
Am I misunderstanding something ? How am I supposed to use Stack.view ?
Edit : this question looks really close to mine : Access QML StackView from a control
I could indeed use a property to keep a reference to my StackView, but I would still like to avoid that if possible.
The accepted answer says that root.StackView.view.pop() is the correct method. I assume root is the Page's id from this post, so I tried test1.StackView.view.push(test2), but this still doesn't work. (Also tried with root, but it's not better)

Answer 1

Be aware that this Q/A is about the QtQuick.Controls 2.x
I also think it is good style to first use the attached property, rather than doubling this functionality by adding own, custom properties.
The problem is, that you are using the attached property in the wrong place - it is attached to the Item that is pushed onto the StackView and not to any of its children. So to use the attached property, you need to specify an identifier of this Item first.
In the example, that has been linked, this is root. But it is not the id of the Component-object. It has to be the root-node of the content of the Component-object.
You should have something like this:
Component {
id: myComponent
Item { // The Page. To this the attached property will be attached.
id: myComponentRoot // Use this to identify the root node of the pushed item.
Item { // Some more layers ...
...
Button { // Here you now want to access it perhaps?
onClicked: myComponentRoot.StackView.view.pop() // Reference the root node of the component to access it's attached properties.
}
}
}
}

Answer 2

A simple way of convenient using StackView.view is by assigning it to a property. In the following, I deliberately did not give the parent StackView an id. I can create a property in the sub-pages to grant access to the StackView as follows:
property StackView stackView: StackView.view
Here's a fully working example:
import QtQuick
import QtQuick.Controls
Page {
StackView {
anchors.fill: parent
initialItem: "Test1.qml"
}
}
//Test1.qml
import QtQuick
import QtQuick.Controls
Page {
property StackView stackView: StackView.view
Button {
anchors.centerIn: parent
text: "Go to test2"
onClicked: stackView.push("Test2.qml")
}
}
//Test2.qml
import QtQuick
import QtQuick.Controls
Page {
property StackView stackView: StackView.view
Button {
anchors.centerIn: parent
text: "Back to test1"
onClicked: stackView.pop()
}
}
You can Try it Online!