QML TextEdit设置font.preferShaping报错及跨端文本显示一致问题

问题场景 #

我有一个包含TextEdit的QML组件，代码如下：

TextEdit {
    ...
    font: settings.myFont
    font.preferShaping: false
}

加载组件时，font.preferShaping: false行报错：qml Can't create component <path_to_my_qml>: Property has already been assigned a value。

尝试注释该行，转而在C++侧设置属性：

QFont Settings::myFont() const
{
    ...
    font.setStyleStrategy(QFont::PreferNoShaping);    
    return font;
}

但此时文本显示效果和font.preferShaping默认值true一致，无法达到预期。

最终需求：让QML的TextEdit与C侧（通过updatePaintNode绘制文本）的显示效果一致，C侧代码：

QSGNode* Text::updatePaintNode(QSGNode* oldNode, QQuickItem::UpdatePaintNodeData*)
{
    ...
    painter.setFont(settings.myFont());
    painter.drawText(rect, alignment(), m_textParams.text());
    ...
}

解决方法 #

方法1：QML内通过绑定逻辑修改字体属性 #

不要单独设置font.preferShaping，而是先获取C++传来的字体对象，修改属性后再整体赋值，避免重复赋值报错：

TextEdit {
    ...
    font: {
        var f = settings.myFont
        f.preferShaping = false
        return f
    }
}

方法2：修正C++侧字体设置逻辑 #

此前QFont::PreferNoShaping不生效，可能是原有样式策略未被清除或被后续逻辑覆盖，可调整代码确保策略生效：

QFont Settings::myFont() const
{
    QFont font = ...; // 原有字体初始化逻辑
    // 先清除原有样式策略，再设置目标策略
    font.setStyleStrategy(QFont::NoStyleStrategy);
    font.setStyleStrategy(QFont::PreferNoShaping);
    // 可选：补充设置hinting属性强化效果
    font.setHintingPreference(QFont::PreferNoHinting);
    return font;
}

QML侧直接使用该字体即可：

TextEdit {
    ...
    font: settings.myFont
}

方法3：自定义C++属性实现灵活控制 #

如果需要频繁调整这类字体属性，可在C++的Settings类中单独暴露对应属性，再在QML中结合使用：

1. C++侧添加属性：

class Settings : public QObject
{
    Q_OBJECT
    Q_PROPERTY(bool preferFontShaping READ preferFontShaping CONSTANT)
public:
    bool preferFontShaping() const { return false; } // 根据需求返回对应值
    // ... 原有myFont方法
};

2. QML侧使用：

TextEdit {
    ...
    font: {
        var f = settings.myFont
        f.preferShaping = settings.preferFontShaping
        return f
    }
}

效果验证 #

设置完成后，对比QML TextEdit和C++侧绘制的文本，重点检查字符间距、形状是否一致。若仍有差异，需确认：

• 两端使用的字体对象属性完全一致（字号、字重等）
• C++侧绘图是否存在额外变换、抗锯齿等设置影响显示

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