Qml组件之Text
- 用来显示文本的最基本控件
- 可以显示纯文本和富文本
- 继承自item，item的相关属性他都可以使用
Text{
}常用属性
文本
- text : string
即显示的文本内容，可以是纯文本，也可以是富文本
文本颜色
- color : color
设置文本的颜色，富文本模式下，有些可能不会遵循这个颜色
字体
font
- font.pixelSize : int //字体的大小
- font.bold : bool //字体加粗
- font.family : string //字体族
- ......还有很多字体属性
剪裁
即超出Text设定的宽高时，超出的部分会被剪裁掉，不显示
- clip : bool
省略
即超出Text设定的宽高时，内容显示省略号
- elide : enumeration
4种取值
依次为：
- 不显示省略号，默认就是这个
- 左边显示省略号
- 中间显示省略号
- 右显示省内号
换行
超出的部分进行换行，和elide同时指定时，会先换行，换行了还是显示不全就会显示省略号
4种取值
依次是（示例中多个数字算作1个单词）
- 不换行
- 在单词的边界处换行，如果1个单词太长，有可能会超过Text的宽度
- 任意处换行，有可能一个单词会被显示在2行
- 换行，优先在单词的边界处换行， 如果1个单词太长，那也只能显示成2行
对齐
- horizontalAlignment : enumeration
水平方向对齐,取值有：
Text.AlignLeft,
Text.AlignRight,
Text.AlignHCenter
Text.AlignJustify
---------------------------------------------------
- verticalAlignment : enumeration
垂直方向对齐，取值有
Text.AlignTop
Text.AlignBottom
Text.AlignVCenter
文字样式颜色
- styleColor : color
指定对应文字样式的颜色
文字样式见下
文字样式
- style : enumeration
4种取值
依次是
- 无样式
- 带轮廓线，
- 凸起样式，
- 凹陷样式，
上下左右内边距
- bottomPadding : real
- leftPadding : real
- padding : real
- rightPadding : real
- topPadding : real
最大行数
- maximumLineCount : int
仅在纯文本显示模式下有效，文本显示的行数有最大值
文本格式
- textFormat : enumeration
5种取值
依次是：
- 自动，即根据文本内容自动确定格式
- 纯文本格式，文字是什么就显示什么
- 富文本，支持HTML3.2
- 富文本，支持HTML4，是HTML4的子集
- Markdown，支持Markdown格式文本的格式化显示
假如文本是一个html的链接标签<a href=\"www.baidu.com\">百度一下</a>
则RichText格式下显示为一个带下划线的连接
信号
- linkActivated(string link)
即富文本模式下，内容如果为一个连接，点击这个链接就会发射这个信号
- linkHovered(string link)
即富文本模式下，内容如果为一个连接，鼠标悬浮到这个链接上就会发射这个信号
测试代码
//文本,可以显示纯文本和富文本
Text {
id: txt
text: qsTr("<a href=\"www.baidu.com\">百度一下</a>")
color: "red" //文本颜色
font.pixelSize: 16 //字体大小
font.family: "宋体" //字体族
font.bold: true; //加粗
clip: true //超出部分剪裁掉
elide: Text.ElideRight //超出的部分显示省略号，右边省略
wrapMode: Text.Wrap //超出部分换行
horizontalAlignment: Text.AlignHCenter //水平方向中心对齐
verticalAlignment: Text.AlignVCenter //垂直方向中心对齐
style: Text.Sunken//字体样式
styleColor: yellow;
textFormat: Text.RichText//文本格式
width: 300
height: 60
//信号处理器
onLinkActivated: (link) => {
print(link)
}
onLinkHovered: (link) => {
print(link)
}
//作为背景
Rectangle {
anchors.fill: parent
color: "lightblue"
z: -1
}
}