How to use custom components in QML Repeaters

Praveen.Illa

Hi Team,

If I use a rectangle item inside repeater, the output is working as expected.
I am facing an issue if a custom component is used inside the repeater. The output is not as expected.
Can someone please help me on this.

Below is the code
main.qml

Window {
    visible: true
    width: 500
    height: 500
    title: qsTr("Hello World")

    property var arr : ["red", "black"]

    ColumnLayout {
        anchors.fill: parent

        Repeater {
            model: 2

            Rectangle {
                width: 100
                height: 100
                color: arr[index]
            }

            //CustomComponent {
            //    colorName: arr[index]
            //}
        }
    }
}

CustomComponent.qml

Item {
    id: customComponent
    width: 500
    height: 500
    visible: true

    property string colorName

    Rectangle {
        width: 100
        height: 100
        color: colorName
    }
}

sierdzio

@Praveen-Illa said in How to use custom components in QML Repeaters:

The output is not as expected.

What is wrong, then? Code looks fine.

Markkyboy

@Praveen-Illa is right, if the custom component is used in place of rectangle, the error from console says that CustomComponent is not a type (words to the effect). I compiled this with Qt6.

QQmlApplicationEngine failed to load component
qrc:/custom-component-repeater/main.qml:10:5: CustomComponent is not a type

I checked out the documents https://doc.qt.io/qt-6/qtqml-documents-definetypes.html and followed the brief tutorial and the same result is the one given above.

So it seems that QQmlApplicationEngine is not happy with something, but i don't understand what is missing or incorrect.

J.Hilk

@Markkyboy works perfectly fine for me.

your CustomComponent.qml is inside a resource file, right ?
And you did rerun qmake after adding it to it?

Markkyboy

@J-Hilk - Yes, Rectangle works, now replace that with CustomComponent.qml as in the crossed out chunk of code given by the OP.

J.Hilk

@Markkyboy

and if you actually adjust the sizes a bit, one also sees the 2nd component

like I said, works perfectly fine. But admittedly I should have used the correct screenshot.