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
	}

}