QML之Text

Text在qml中显示文本时，经常用到，它的属性也有很多，其实最重要最经常用到的属性有，color(文本颜色)，font.pixelSize(字体大小)，text(文本内容)，textFormat(文本格式),elide(文本缩略)，并且Text还支持富文本，这个属性解决超链接的问题，文本缩略这个属性也很实用，下面来看具体的示例：

属性

• advance : size
• antialiasing : bool
• baseUrl : url
• bottomPadding : real
• clip : bool
• color : color
• contentHeight : real
• contentWidth : real
• effectiveHorizontalAlignment : enumeration
• elide : enumeration
• font.bold : bool
• font.capitalization : enumeration
• font.family : string
• font.hintingPreference : enumeration
• font.italic : bool
• font.kerning : bool
• font.letterSpacing : real
• font.pixelSize : int
• font.pointSize : real
• font.preferShaping : bool
• font.strikeout : bool
• font.styleName : string
• font.underline : bool
• font.weight : enumeration
• font.wordSpacing : real
• fontInfo.bold : bool
• fontInfo.family : string
• fontInfo.italic : bool
• fontInfo.pixelSize : string
• fontInfo.pointSize : real
• fontInfo.styleName : string
• fontInfo.weight : int
• fontSizeMode : enumeration
• horizontalAlignment : enumeration
• hoveredLink : string
• leftPadding : real
• lineCount : int
• lineHeight : real
• lineHeightMode : enumeration
• linkColor : color
• maximumLineCount : int
• minimumPixelSize : int
• minimumPointSize : int
• padding : real
• renderType : enumeration
• rightPadding : real
• style : enumeration
• styleColor : color
• text : string
• textFormat : enumeration
• topPadding : real
• truncated : bool
• verticalAlignment : enumeration
• wrapMode : enumeration

Signals

• lineLaidOut(object line)
• linkActivated(string link)
• linkHovered(string link)

Methods

• forceLayout()
• linkAt(real x, real y)

代码示例

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row {//用这个有一个好处是，文本和图片一起显示可以连成一行
        id:row
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.left: parent.left
        anchors.leftMargin: 50
        Text { font.pixelSize: 16; color: "red"; text: "查看" }
        Text {
            font.pixelSize: 16; text: "See the <a href=\"https://doc.qt.io/Qt-5/qml-qtquick-text.html\"> qml帮助文档</a>"; style: Text.Raised; styleColor: "#AAAAAA"
            onLinkActivated: {
                console.log("link==========" + link)
                Qt.openUrlExternally(link) //打开链接
            }
        }
        Text { font.pixelSize: 16; text: "<img src=\"https://www.qt.io/hubfs/2016_Qt_Logo/qt_logo_green_rgb_16x16.png\" alt=\"图片\">";style: Text.Outline; styleColor: "red" }
        Text { font.pixelSize: 16; text: "文字、图片、链接混合显示"; style: Text.Sunken; styleColor: "#AAAAAA" }
    }

    Column {
        id:column
        width: 200
        anchors.top:row.bottom
        anchors.topMargin: 50
        anchors.left: parent.left
        anchors.leftMargin: 50
        Text {
            id: text1
            font.pixelSize: 24
            text: qsTr("<b>江</b> <i>雪</i>")
        }
        Text {
            id: text2
            font.pixelSize: 18
            textFormat: Text.RichText //<b>文字加粗  <br>换行
            text: qsTr("<b>千山鸟飞绝，万径人踪灭。</b> <br>孤舟蓑笠翁，独钓寒江雪。")
        }
        Text {
            id: text3
            width: 500
            font.pixelSize: 18
            elide: Text.ElideRight //右边缩略
            textFormat: Text.PlainText  //原样输出
            text: qsTr("<b>翻译</b> <i>所有的山上，飞鸟的身影已经绝迹，所有道路都不见人的踪迹。江面孤舟上，一位披戴着蓑笠的老翁，独自在大雪覆盖的寒冷江面上垂钓。</i>")
        }

    }
}

运行结果：

 

参考：

Text QML Type

Supported HTML Subset