ListView with external "delegate" in qt/qml - qt

Question

I have a problem with my QML code. I have a different pages(each page is a different .qml file) and want to change from one page to another using vertical swipe/scroll. The QT already provides a swipe examples but are only for horizontal swipe view, and I want a vertical swipe. I also saw an examples for vertical swipe using ListView. However, in the list view, so far I only can put text.
I want to put a different QML view in each ListView row.There are some examples using external qml files in the "delegate", but none are working for me.
In other tutorials, I saw a code similar to this one:
//This is the main.qml
ListView {
id: iranCitiesList
snapMode: ListView.SnapOneItem
highlightRangeMode: ListView.StrictlyEnforceRange
model: ListModel
delegate: Loader {
height: childrenRect.height
width: parent.width
source: "Page1.qml"
}
}
Page1 { id: page }
//listModel.qml
import QtQuick 2.9
ListModel {
ListElement { sourceComponent: Page1}
ListElement { sourceComponent: Page2}
}
//Page1.qml
//The Page1.qml is very basic. Only displays a simple text
import QtQuick 2.9
Rectangle {
id: delegateItem
width: parent.width; height: 100
color: "white"
Text {
id: itexItem
font.pixelSize: 40
text: "Page1"
}
}
Here, the view from Page1.qml is loaded, but I cant scroll between pages.
Now, heres the code I'm working on. This one is a working list view.
Its very basic, but its working.
//main.qml
ListView {
id: listView
snapMode: ListView.SnapOneItem
highlightRangeMode: ListView.StrictlyEnforceRange
anchors {
top: parent.top
bottom: parent.bottom
left: parent.left
right: parent.right
}
model: ListModel {
id: listModel
ListElement {
text: "1"
}
ListElement {
text: "2"
}
}
delegate: Page {
width: ListView.view.width
height: ListView.view.height
Text {
anchors.centerIn: parent
text: model.text
}
}
}
As I said before, the Listview is loadded, I can scroll between each row but I want to put a more complex design in my list. Like an external qml view.
How can I do that?
Thanks!

Answer 1

You should read the dynamic object creation documentation : https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
ListView{
snapMode: ListView.SnapOneItem
highlightRangeMode: ListView.StrictlyEnforceRange
anchors {
top: parent.top
bottom: parent.bottom
left: parent.left
right: parent.right
}
model: ListModel {
ListElement { path: "file1.qml" }
ListElement { path: "file2.qml" }
}
delegate: Page {
width: ListView.view.width
height: ListView.view.height
Component.onCompleted: {
var component = Qt.createComponent(path)
if (component.status == Component.Ready)
component.createObject(this, {"width": width, "height": height});
}
}
}
This code should work, you just have to put your pages paths in the model.