How to access containing QML StackView?

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)

did you also have a look at this: stackoverflow.com/questions/41652163/… . The first answer seems to be what you need. — luffy
@eyllanesc Possible indeed... I didn't see that. Edit (actually delete and repost, the edit button disappeared) : comment added in the question. — Annyo

derM derM · Accepted Answer · 2018-06-25T10:28:20

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.
            }
        }
    }
}

How to access containing QML StackView?

1 Answers