QML:上标/下标文本

Question

问题是QML完全忽略了<sub>和<sup> html标记，这些标签实际上在官方支持的html子集中提到。
因此，下面的代码将显示常规的"xy"而不是"x^y":

Text {
text: "x<sup>y</sup>"
}

是否有其他可能的方式来显示下标/上标文本?

UPD:这是自Qt 5.0以来最新Qt Quick版本的已知错误。您可以通过在这里或这里投票来帮助修复错误

Answer 1

我添加了textFormat: Text。RichText让sub和sup正常工作:

Text {
    textFormat: Text.RichText
    text: "Normal<sub> Subscript</sub> <sup>Superscript</<sup>"
}

Answer 2

因为这似乎是一个Qt的错误，你需要一个解决方案，如果你想这工作现在。碰巧，我受到了Canvas元素的启发(这基本上是HTML5画布元素，例如这里的一些文档)。通过从QML属性中获取硬编码值，可以很容易地将下面的代码片段扩展为一个简单的可配置专用文本元素。

Canvas {
    anchors.fill: parent
    onPaint: {
        var basetext = 'x';
        var suptext = 'y';
        var ctx = this.getContext("2d");
        ctx.strokeStyle = "blue";
        ctx.fillStyle = "red";
        ctx.font = 'bold 20px serif';
        ctx.strokeText(basetext, 20, 30);
        var metrics = ctx.measureText(basetext);
        console.debug('basetext width:', metrics.width);
        ctx.font = 'italic 12px serif';
        ctx.fillText(suptext, 20+metrics.width, 20);
    }
}

注意:当使用这样的代码时，需要注意控制台的输出，例如关于无效字体的警告。