ListView with external “delegate” in qt/qml

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!

Have you tried using "Loader QML Type". I think is an solution for your problem. Check out doc.qt.io/qt-5/qml-qtquick-loader.html#details — Adriano Campos

L. Chaumartin L. Chaumartin · Accepted Answer · 2019-04-09T16:20:21

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.

ListView with external “delegate” in qt/qml

1 Answers