如何在QML中调用自定义JavaScript函数？

你当前代码的问题在于：在Image组件初始化阶段，myIDImage这个id还未指向实例化完成的组件，无法通过它调用函数；同时pics()也不是该Image组件的成员函数，导致调用失效。以下是几种正确的实现方式：

方式一：将函数定义为Image组件的成员函数 #

把pics()函数放在Image组件内部，作为它的成员函数，直接调用函数名即可：

Image {
    id: myIDImage
    // 定义组件内部的成员函数
    function pics() {
        var source = "file:/home/nabil/Downloads/4.png"
        if (ident === "Nabil") {
            source = "qrc:images/Plane1.png" ;
        }
        return source;
    }
    // 直接调用自身的成员函数
    source: pics()
    x: 0
    y: 0
    width: 30
    height: 30
}

方式二：调用全局定义的函数 #

如果pics()是在全局作用域（比如父组件或根上下文）定义的，直接使用函数名调用即可，无需通过组件id：

// 全局作用域定义函数
function pics() {
    var source = "file:/home/nabil/Downloads/4.png"
    if (ident === "Nabil") {
        source = "qrc:images/Plane1.png" ;
    }
    return source;
}

Image {
    id: myIDImage
    // 直接调用全局函数
    source: pics()
    x: 0
    y: 0
    width: 30
    height: 30
}

方式三：内联绑定实现动态更新 #

如果需要在ident变量变化时自动更新图片源，推荐使用内联绑定的方式，这样依赖变量变化时source会自动重新计算：

// 假设ident是已定义的属性或全局变量
property string ident: "Nabil"

Image {
    id: myIDImage
    source: {
        var src = "file:/home/nabil/Downloads/4.png"
        if (ident === "Nabil") {
            src = "qrc:images/Plane1.png" ;
        }
        return src;
    }
    x: 0
    y: 0
    width: 30
    height: 30
}

关键注意点 #

• QML组件的id只有在组件实例化完成后才能访问，因此不能在组件属性初始化时用自身id调用函数。
• 函数调用时，QML会优先在当前组件上下文查找，再向上查找父上下文或全局上下文的函数。
• 若需动态响应变量变化，使用内联绑定或函数绑定的方式，确保属性自动更新。

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