Question

问题是QML完全忽略<sub>和<sup> html标记，这些标记实际上是在官方Supported HTML Subset中提到的。
因此，以下代码将显示“x ^y”的常规“xy”：

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

还有其他可能的方法来显示下标/上标文本吗？

UPD：这是自Qt 5.0以来最新Qt Quick版本的已知错误。您可以通过投票here或here

来帮助修复错误

Answer 1

我添加了 textFormat：Text.RichText 以使sub和sup正常工作：

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

Answer 2

由于这似乎是一个Qt错误，如果您希望这个现在，您需要一个解决方法。碰巧的是，我受到了Canvas element（基本上是HTML5 canvas元素，例如here的一些文档）的启发。通过从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);
    }
}

注意：在玩这样的代码时，注意控制台输出是值得注意的，例如关于无效字体的警告。

QML：上标/下标文本

2 个答案: