How to load .qml files as list element in QT?

Gautham Bhojan 0
Viewed 30
Page
{
    id : root
    focus: true

    ListView
    {
        id : listview
        width: 1250
        height: 400
        focus: true
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        model: myModel
        delegate: myDelegate
        preferredHighlightBegin : 0
        preferredHighlightEnd : 0
        highlightRangeMode : ListView.NoHighlightRange
        antialiasing: true
        clip: true

        ListModel {
            id: myModel
            ListElement {
                element: "a.qml"
            }
            ListElement {
                element: "b.qml"
            }
            ListElement {
                element: "c.qml"
            }
            ListElement {
                element: "d.qml"
            }
            ListElement {
                element: "e.qml"
            }
        }

        Component {
            id: myDelegate
            Loader { source: element }
        }
    }
}

Note: Here a.qml, b.qml, c.qml, d.qml and e.qml have a combination of images, Buttons, etc but they are not unique. I'm able to create a horizontal list with this code and it is not scrolling properly. When tried scrolling by pressing and holding the list element its not scrolling, the spaces apart from the list element is scrollable. Do we have any solution for this use case?

qml qt
1 Answers

It is not clear what the width and height of each delegate are. I would recommend, as a starting point, setting the width and height of each Loader instance, e.g.

Loader {
    source: element
    width: ListView.view.width
    height: 100
}

I still think your problem may be due to sizing. There are several things to look at. The size of your app, the size of your Page, the size of your ListView.

//MyApp.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
Window {
    id: app
    width: 300
    height: 300
    MyPage {
        anchors.fill: parent
    }
}

//MyPage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
    ListView {
        anchors.fill: parent
        model: ListModel {
            id: myModel
            ListElement { element: "a.qml" }
            ListElement { element: "b.qml" }
            ListElement { element: "c.qml" }
            ListElement { element: "d.qml" }
            ListElement { element: "e.qml" }
        }
        delegate: Loader { source: element }
    }
}

//a.qml
import QtQuick 2.15
Rectangle { implicitWidth: 200; implicitHeight: 50; color: "red" }

//b.qml
import QtQuick 2.15
Rectangle { implicitWidth: 200; implicitHeight: 50; color: "orange" }

//c.qml
import QtQuick 2.15
Rectangle { implicitWidth: 200; implicitHeight: 50; color: "yellow" }

//d.qml
import QtQuick 2.15
Rectangle { implicitWidth: 200; implicitHeight: 50; color: "green" }

//e.qml
import QtQuick 2.12
Rectangle { implicitWidth: 200; implicitHeight: 50; color: "blue" }

rainbow-png

Stephen Quan0
Related