QT 5.5中QML函数引用兄弟对象报错问题求助

问题描述 #

以下代码在Qt 5.15中可正常运行，但在Qt 5.5环境下，编译器提示getFontSize()函数的前三行缺少分号（实际已存在分号），核心原因是Qt 5.5的QML引擎在JS函数中访问兄弟组件invisibleText时存在支持局限。

原代码：

Text {
    id: invisibleText;
    text: mainText.text
    
    property bool fitWithinParent : true /* simplified, most likely irrelevant */
    
    property var referenceObject: (fitWithinParent)? parent : page /* page is a top level Window */
    property int baseFontSize : (referenceObject.height / 10) * 7
    font.family: currentFontName
    font.pointSize: baseFontSize
    color: "transparent"
}

Text {
    objectName: "numberText"
    id: mainText                                        
    text: ""
                            
    font.family: currentFontName

    function getFontSize() {
        let referenceObject = invisibleText.referenceObject; // Expected token ;
        let baseFontSize = invisibleText.baseFontSize;  // Expected token ;
        let fitFontSize = Math.min(baseFontSize, baseFontSize * ((invisibleText.paintedWidth > referenceObject.width)? (referenceObject.width / invisibleText.paintedWidth) : 1));  // Expected token ;

        if (mainText.text.slice(-1) == "A") {
            fitFontSize *= 0.94;
        }

        return fitFontSize * page.songNumberScaling;
    }

    font.pointSize: getFontSize();

    color: page.foregroundColor
}

解决思路及修改方案 #

1. 提前绑定兄弟组件引用

在mainText中新增属性绑定兄弟组件invisibleText，避免在JS函数中直接跨组件查找引用：

Text {
    objectName: "numberText"
    id: mainText                                        
    text: ""
                            
    font.family: currentFontName
    // 提前绑定兄弟组件引用
    property var invText: invisibleText

    function getFontSize() {
        // 改用绑定后的属性访问
        var referenceObject = invText.referenceObject;
        var baseFontSize = invText.baseFontSize;
        var fitFontSize = Math.min(baseFontSize, baseFontSize * ((invText.paintedWidth > referenceObject.width)? (referenceObject.width / invText.paintedWidth) : 1));

        if (mainText.text.slice(-1) == "A") {
            fitFontSize *= 0.94;
        }

        return fitFontSize * page.songNumberScaling;
    }

    font.pointSize: getFontSize();
    color: page.foregroundColor
}

2. 替换ES6 let为var

Qt 5.5的QML JS引擎对ES6语法支持不完善，将let替换为var可避免语法解析误报。

3. 改用QML属性绑定替代JS函数

直接将字体大小的计算逻辑写入font.pointSize的绑定表达式中，避开JS函数中访问兄弟组件的限制：

Text {
    objectName: "numberText"
    id: mainText                                        
    text: ""
                            
    font.family: currentFontName

    font.pointSize: {
        var refObj = invisibleText.referenceObject;
        var baseSize = invisibleText.baseFontSize;
        var fitSize = Math.min(baseSize, baseSize * ((invisibleText.paintedWidth > refObj.width) ? (refObj.width / invisibleText.paintedWidth) : 1));
        if (text.slice(-1) === "A") {
            fitSize *= 0.94;
        }
        return fitSize * page.songNumberScaling;
    }

    color: page.foregroundColor
}

4. 通过父组件代理属性

若两个Text组件有共同父组件，可将invisibleText的referenceObject、baseFontSize等属性迁移至父组件，让mainText直接访问父组件属性，彻底避免跨兄弟组件引用：

// 父组件示例
Item {
    property var referenceObject: (invisibleText.fitWithinParent)? parent : page
    property int baseFontSize: (referenceObject.height / 10) * 7

    Text {
        id: invisibleText;
        text: mainText.text
        property bool fitWithinParent : true
        font.family: currentFontName
        font.pointSize: parent.baseFontSize
        color: "transparent"
    }

    Text {
        objectName: "numberText"
        id: mainText                                        
        text: ""
        font.family: currentFontName
        font.pointSize: {
            var fitSize = Math.min(parent.baseFontSize, parent.baseFontSize * ((invisibleText.paintedWidth > parent.referenceObject.width) ? (parent.referenceObject.width / invisibleText.paintedWidth) : 1));
            if (text.slice(-1) === "A") fitSize *= 0.94;
            return fitSize * page.songNumberScaling;
        }
        color: page.foregroundColor
    }
}

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