QML GridView委托报错ReferenceError: path未定义求解决

问题重现 #

使用带ListModel的GridView时，委托使用自定义ButtonIcon组件会抛出ReferenceError: path is not defined错误，但替换为原生Rectangle组件时一切正常。直接通过shapeSidePosList.get(index).path可以获取正确路径，但path或model.path均无法访问。

相关代码：

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" }
        ...
    }
}

ButtonIcon的icon属性定义：

property alias icon: buttonIcon.source

问题原因 #

1. 作用域冲突：自定义ButtonIcon组件内部可能存在同名的path属性，屏蔽了ListModel元素的path属性，导致直接访问path时指向组件内部而非model数据。
2. 绑定上下文差异：原生组件（如Rectangle）的作用域链会优先查找model上下文的属性，而自定义组件的作用域可能限制了对外部model属性的直接访问；model.path无效是因为model指向的是整个ListModel实例，而非当前元素。

解决方案 #

方案1：使用modelData访问当前元素属性 #

在QML中，当使用ListModel作为GridView的model时，委托上下文的modelData代表当前的ListElement对象，通过它可以明确访问元素的属性：

delegate: ButtonIcon {
    style: ButtonIcon.Styles.Parallel
    icon: modelData.path // 明确指定从当前model元素获取path
    ...
}

方案2：通过索引结合model实例获取 #

如果modelData无法正常工作，可以通过委托的index属性，直接从ListModel实例中获取对应元素的path：

delegate: ButtonIcon {
    style: ButtonIcon.Styles.Parallel
    icon: shapeSidePosList.get(index).path
    ...
}

方案3：用中间Item中转属性 #

通过在委托外层包裹一个Item，先将model的path属性存入Item的自定义属性中，再传递给ButtonIcon，避免作用域冲突：

delegate: Item {
    property string itemPath: path // 先在Item上下文获取model的path
    ButtonIcon {
        style: ButtonIcon.Styles.Parallel
        icon: itemPath
        ...
    }
}

方案4：检查并解决组件内部命名冲突 #

查看ButtonIcon组件的代码，确认是否存在path属性定义。如果有，可重命名该属性，或在委托中明确使用modelData.path来区分。

内容的提问来源于stack exchange，提问作者szymonkacperek