Nominate our 2022 Qt Champions!

Problems with using Loader as delegate of ListView

  • Hi to all! I faced with the next problem with a ListView - when i scroll a list out the bounds a have the next errors (warnings?), but all displays in application correctly:

    qrc:/Resources/qml/TitledMessage.qml:62: TypeError: Cannot read property 'DisplayRole' of null
    qrc:/Resources/qml/UntitledMessage.qml:32: TypeError: Cannot read property 'DisplayRole' of null

    Here is my ListView:

    ListView {
        id: chatView;
        spacing: dp(20);
        model: applicationBridge.chatModel;
        delegate: Loader {
            property variant modelData: model;
            width: chatView.width;
            sourceComponent: applicationBridge.toDrawMessageHeader( index ) ? titledMessage : untitledMessage;
        Component {
            id: titledMessage;
            TitledMessage {}
        Component {
            id: untitledMessage;
            UntitledMessage {}

    and i use modelData.DisplayRole to display some text in my TitledMessage {} and UntitledMessage {}.

    I tryed to call console.log( modelData.DisplayRole ) in Component.onDestruction of my TitledMessage {} and i see in the log next:

    qrc:/Resources/qml/TitledMessage.qml:84: ReferenceError: modelData is not defined

    What wrong with my code? I cant't fix it. Thank you in advance.

  • Someone faced with the same problem?

  • @FOXLISIN based on my understanding, you tried to display/log modelData.DisplayRole in your Loader sources: TitledMessage {} and UntitledMessage {}. You are getting such error that modelData is not defined because it (modelData) will only be accessible in the Loader or on the ListView not on its sources. If you wanted to display something in either TitledMessage {} and UntitledMessage {}, you need to use console.log(model.propertyName). Please be advised that property name is case sensitive.

    I hope this helps.

Log in to reply