QML 文本：如何使用 CSS 属性，例如文本修饰：上划线

Question

是否可以在 QML Text 或 QML Label 元素中使用 CSS 属性？我对 text-decoration: overline 感兴趣，我想将带上划线的字符与普通字符混合使用。我知道我可以为每个字符放置单独的文本元素并使用 font.overline: true，但这是不切实际的解决方案。

因此，如何写出“*a b *c *d”，使 a、c 和 d 加上划线而不是使用星号作为前缀。

顺便说一句，带下划线很简单，只需使用<u>和</u>，但这对我没有帮助。

Answer 1

您的意思是 CSS 内嵌在文本中吗？好的。如果您的意思是将 CSS 应用于 QML 元素（就好像它们是 HTML），那么不（我觉得这很讽刺 :)。

例子改编自 Qt Text demo:

import QtQuick 2.3
Pane  {
    id: root
    width: 480
    height: 320
    Rectangle {
        anchors.fill: parent;
        color: "#272822"
  }
  Column {
        spacing: 20
        Text {
            anchors.fill: parent;
            text: '<font color="white">I am the <b>very</b> model of' +
                         '<p>a <span style="text-decoration: overline">modern</span> ' +
                         '<i>major general</i>!</p></font>'
            font.pointSize: 14
            textFormat: Text.RichText
        }
  }
}

我特别需要设置 textFormat: Text.RichText，Text.StyledText 上划线不起作用。

Answer 2

除了使用 CSS 与 HTML 元素的 style="..." 属性内联外，还可以在 QML 文本对象中使用 CSS 类 . 看起来像这样：

import QtQuick 2.3
Pane  {
    id: root
    width: 480
    height: 320
    Rectangle {
        anchors.fill: parent;
        color: "#272822"
    }
    Column {
        spacing: 20
        Text {
            anchors.fill: parent;
            text: '
                <html>
                    <head><style>
                        p.white   { color: white; }
                        .overline { text-decoration: overline; }
                    </style></head>
                    <body>
                        <p class="white">I am the very model of a 
                            <span class="overline">modern</span> major general!
                        </p>
                    </body>
                </html>
            '
            font.pointSize: 14
            textFormat: Text.RichText
        }
  }
}

使用 Qt 5.12 测试。

QML 文本：如何使用 CSS 属性，例如文本修饰：上划线

QML Text: how to use CSS properties, e.g. text-decoration: overline

qt

text

qml

label

richtext