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") // 显示的内容 }

运行结果：