QML：上标/下标文本答案

【问题标题】：QML: superscript/subscript textQML：上标/下标文本
【发布时间】：2014-07-07 11:33:38
【问题描述】：

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

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

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

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

【问题讨论】：

尝试添加textFormat: Text.RichText。如果可行，请告诉我，以便我将其扩展为实际答案。
@hyde 发生了一些变化。但它与上标字体相去甚远……现在 _{和 ^{标签只是让字符变小了一点。不管怎么说，还是要谢谢你。还有其他想法吗？}}
我想我会测试一下自己，但要尝试一些随机的东西：不同的字体、其他标记，如粗体、最新的 Qt 版本（如果还没有）、Qt 错误报告（如果有，则归档t)。作为最终解决方法，编写自定义组件，在 C++ 端使用 QPainter，在 QML 端使用 Canvas。

标签： qt user-interface qml html4

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

由于这似乎是一个 Qt 错误，如果您希望它现在可以工作，您需要一个解决方法现在。碰巧，我受到了Canvas element 的启发（它基本上是 HTML5 画布元素，一些文档，例如 here）。通过从 QML 属性中获取硬编码的值，下面的 sn-p 可以很容易地扩展为一个简单的可配置的专用文本元素。

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);
    }
}

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

【讨论】：