QML，GridView 委托：ReferenceError：`<variable_name> ` 未定义</variable_name>

Question

I am struggling with it a bit so far, but couldn't find an answer. Here is the core situation.

I have a GridView with ListModel:

GridView {
    id: shapeSidePos
    ...
    model: shapeSidePosList
                
    delegate: ButtonIcon {
        style: ButtonIcon.Styles.Parallel
        icon: path
        ...
        }

    ListModel {
        id: shapeSidePosList
        ListElement { path: "../../images/shape_side_positioning_base.png" }
        ListElement { path: "../../images/shape_side_positioning_right.png" }
        ...
    }
}

And in a runtime I get error:

ReferenceError: path is not defined

The thing is, when I have used eg Rectangle instead of ButtonIcon , everything worked fine! Accessing elements with model.path did not work either. In ButtonIcon, icon is defined so:

property alias icon: buttonIcon.source

where buttonIcon is an image with MouseArea.

Been searching through web, found some tricks with JS but that makes things complicated and many developers may use this code later. It would be problematic for them. However, I can access the right path while referring directly to an index:

icon: shapeSidePosList.get(0).path

I tried packing delegate into Component, tried DelegateModel, nothing has given the expected result.

I have no idea what is going on,

I would be very thankful for any help provided.

Answer 1

@iam_peter wrote:

You could try to enforce the path property in the delegate with the required keyword like shown here https://doc.qt.io/qt-6/qtquick-modelviewsdata-modelview.html#view-delegates and see if it yields any other errors.

I have added a required property to a delegate:

    delegate: ButtonIcon {
        required property var path // <-- this
        required property int index // <-- and this

        style: ButtonIcon.Styles.Parallel
        icon: path
        ...
        }

and it worked. Thank you very much!