Qml——Text元素

1、Text元素既可以显示普通文本，也可以显示富文本，属性可以自定义字体、大小、颜色

复制代码

Window {
    width: 640
    height: 480
    visible: true  // visible 是否显示
    title: qsTr("Hello World21323")
    minimumHeight: 300

    Column{
        Text{
            text: "Hello World!"
            font.family: "Microsoft Yahei"
            font.pointSize: 24
            color: "blue"
        }
        Text{
            text: "<font color=\"#199033\"> Hello World!</font>"
            font.family: "Microsoft Yahei"
            font.pointSize: 24
            color: "blue"
        }
    }
}

运行结果：

2、Text属性

（1）advance：从当前文本第一个字符的基线原点，到紧跟在它后面的下一个文本项第一个字符的基线原点之间的距离

（2）antialiasing：bool，文本是否使用抗锯齿

（3）clip：bool，为true时，该性质是否会判定文本是否被裁剪。注意，如果文本不符合边界矩形，将被突然切断。如果你想在有限空间内显示可能较长的文本，可能更适合使用elide

（4）color: color，设置文本颜色

（5）bottomPadding：底部内边距

（6）contentHeight：返回当前显示的文本高度

（7）contentWidth：返回当前显示的文本高度

（8）effectiveHorizontalAlignment：enumeration，只读，用来获取HorizontalAlignment水平对齐方式的值

（9）elide：enumeration，当文本长度超出文本显示区域，则可以通过该属性来设置文本省略方式，默认值为Text.ElideNone，也可以为：

Text.ElideLeft：省略靠左的文本，如ABCDEFJ，会显示："...FJ"
Text.ElideMiddle：省略中间的文本
Text.ElideRight：省略靠右的文本

（10）font.bold：bool，设置字体粗细，默认为false（细）

（11）font.capitalzation：enumeration，书写方式，有以下几种：

Font.MixedCase：正常情况
Font.AllUppercase：设置为大写字母（标准高度的大写字母）
Font.AllLowercase：设置为小写字母
Font.SmallCaps：设置为小型大写字母（看起来像小号的大写字母）
Font.Capitalize：每一个单的第一个字母大写

（12）font.family：字体，例如"Microsoft Yahei"

（13）font.italic：bool，设置是否为斜体，默认false（正体）

其余属性：

3.示例：

（1）clip和elide的区别

复制代码

Item {
        anchors.fill: parent
        focus: true
        Column{
            Text {
                text: qsTr("Hello World")
                font.family: "Microsoft Yahei"
                font.pointSize: 24
                color: "blue"
                width: 150
                clip: true
            }
            Text {
                text: qsTr("Hello World")
                font.family: "Microsoft Yahei"
                font.pointSize: 24
                color: "red"
                width: 150
                elide: Text.ElideLeft
            }
        }
    }

运行结果：

（2）style文字描边属性

复制代码

Item {
        anchors.fill: parent
        focus: true
        Column{
            Text{
                font.pointSize: 24;
                text: "Normal"
            }
            Text{
                font.pointSize: 24;
                text: "Raised"
                style: Text.Raised;
                color: "white";
                styleColor: "black"
            }
            Text{
                font.pointSize: 24;
                text: "Outline"
                style: Text.Outline;
                color: "white";
                styleColor: "black"
            }
            Text{
                font.pointSize: 24;
                text: "Sunken"
                style: Text.Sunken;
                color: "white";
                styleColor: "black"
            }
        }
    }

运行结果：

4.富文本常用标记

5.显示提示语句

复制代码

Button {
        text: qsTr("Save")
        ToolTip.delay: 500              // 徘徊在按钮上超过500ms则显示,则默认为直接显示
        ToolTip.timeout: 1000           // 设置显示提示的时长,如果不设置则默认为一直显示
        ToolTip.visible: hovered       // 当鼠标徘徊在按钮上时,则显示ToolTip
        ToolTip.text: qsTr("Save the active project") // 显示的内容
    }

运行结果：