If you just want to display different qml components on the same area, have a look at the loader qml type. You can set the src for the loader component when hitting the button. For some types (like a dialog) you will have to also call visible = true or open() in the loaded item. You can access a src in the loader with loaderName.item.
Check out the example in the documentation:
https://doc.qt.io/qt-5/qml-qtquick-loader.html#details
After setting the source like in the example, you can set properties in the loaded qml with pageloader.item.<PROPERTY NAME>. replace <PROPERTY NAME> with the name of the property in your qml file.

Update: I downloaded the most recent version of Qt, 5.13.0, and I could not get the issue to repeat. So I think the problem is related to specific versions of Qt.

Note: it turns out that setting background to Qt.transparent doesn't make sense. It worked simply because the types are incompatible and background got set to null. It's easier to simply set background to null to get the same result.

@J.Hilk said in Property Alias and runtime loaded QML-Items:

I'm however not sure what you mean with parameters dictionary.

Oh sorry, wrong word :-) I've meant this from the link I provided:

properties: a list of QML properties that should be assigned to the item upon push. These properties will be copied into the item when it is loaded (in case of a component or URL), or when it becomes the current item for the first time (normally upon push).

Another possibility would be to use some global context property (added in C++) which your whole app can access. Then you don't need to worry about when and how elements are loaded.

In this case, not jet. But I thought, If I'm basically learning a "new language" than I better avoid adopting bad habits, if I can.

It is not necessarily a bad habit. It is a trade-off:

you load all QML code at application startup - startup is longer (slightly - parsing QML is extremely fast), then all works fast at runtime (or possibly it instantiates components on push(). It definitely does that if you encapsulate ObjX in Component, I'm not sure if it also applies to the way you've done it) or you load by Loader / URL at runtime - startup is faster, but then you will need some time to load the QML file at runtime when user wants to access given stack page

Are you using QtQuick Controls 1 or QtQuick Controls 2?

If QtQuick Control 2, do the following:

stackView.push("qrc:/Profile.qml", {user_info: user_data})

For Controls 1:

stackView.push({item: "qrc:/Profile.qml", properties: {user_info: user_data}})

I think you may be using Controls 2, and the original command you used was for Controls 1. Your solution worked because it is a correct way to use the push function for Controls 2 (although having it as a list isn't necessary since you're only pushing one item)

See the difference between the push function for Controls 1 and Controls 2 in the documentation:
http://doc.qt.io/qt-5/qml-qtquick-controls-stackview.html#push-method (Controls 1)
http://doc.qt.io/qt-5/qml-qtquick-controls2-stackview.html#push-method (Controls 2)

Hi @dhb285,

the problem is, that you do not instantiate your SettingView.

To solve it, you should make 2 little changes:

Remove the following line from SettingView.qml: id: settingView Add an instance of SettingView to your StackView (as you did with MainView): StackView{ ... initialItem: MainView {} SettingView { id: settingView } ...

But I cannot tell why you can't see errors in QtCreator, when I run your code I get the following message in the Application Output:

qrc:/MainView.qml:29: ReferenceError: settingView is not defined

Hi again. I found way to cause crash if I use Qt.createComponent + createObject + FileDialog +Controls2.StackView. Here is my code:

Main.qml (for this example I just create qml app from QtCreator template and rewrite main.qml)

import QtQuick 2.7 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.0 ApplicationWindow { id: window visible: true height: 300 ColumnLayout{ Button { text: "Push" onClicked: { var component = Qt.createComponent("file:///D:/aknew-Data/Sandbox/build-test-Desktop_Qt_5_7_0_MinGW_32bit-Debug/debug/TestQML.qml") switch (component.status) { case Component.Ready: var form = component.createObject() stackView.push(form) break case Component.Error: console.log(component.errorString()) break } } } Button { text: "Pop" onClicked: stackView.pop() } StackView { id: stackView height: 100 width: 100 initialItem: Rectangle { Component.onDestruction: console.log( "Cyan Destruction Beginning!") color: "cyan" } } } }

TestQml which I loadfrom file:

import QtQuick 2.5 import QtQuick.Controls 2.0 import QtQuick.Dialogs 1.2 Rectangle { Component.onDestruction: console.log("Green Destruction Beginning!") color: "Green" FileDialog {} }

If I push-pop TestQml few times, I got QCoreApplication::postEvent: Unexpected null receiver during push (really during component.createObject() ) and app crashes. It seems that reason is that js garbage collector destroy previous instances of component , but something in C++ still have pointer to it (I suppose so because I have seen some methods with name like QV4::MemoryManager::runGC in call stack when I tried to debug this crash, but it happens rarely with active debugger and doesn't happen if I make push-pop sequence from code). I figure out that if I remove FileDialog, the app does not crash.

I understand that my code can be incorrect for Controls 2, but I haven't had any system notification about it, this code is result of migration from Controls 1 and it is work in general (when I don't use FileDialog), so I think this situation is should be at least described because figure out what causes this crash was not easy

My environment is Qt Creator 4.0.2, Qt 5.7.0, MinGW 32 bit, OS Win 8.1 64 bit, if you need some other information, please, I ready to answer, but maybe not very fast - I use qt only in my pet project now.

SOLVED

onClicked: { loader.source = "qrc:/pages/search.qml" stackView.push(loader.item) listView.currentIndex = -1 }

Thanks @medyakovvit

Why are you guys trying to invoke StackView methods directly from C++? StackView has been designed to be used from QML. Probably best if you don't let your C++ backend even know anything about the stack view. You can, for example, just emit signals from the C++ backend, and make the QML UI react to that and do the actual push. This is the normal way to communicate between C++ backends and QML UI layers.

Thank you very much for your help. I'm going to find another way to avoid this "borderline" situation. Anyway I think it will be a nice to have feature!

Thanks again for the input!

I think I got now a rough understanding of the structure / logic.

I'll try to load the contents dynamically and show them using eigther Stackview / Loader or some own implementation.

That really helped me a lot! :-)

@luca You can create your own effect using Transitions.