QML Text详解

1.简介

文本项可以显示普通文本和富文本。

2.示例

示例1：一个简单的text，可以设置字体颜色、大小等。

Window {visible: truewidth: 400height: 400title: qsTr("Hello World")Rectangle{width: 200height: 200border.width: 2Text {text: "Hello World!"font.family: "Helvetica"font.bold: truefont.italic: truefont.underline: truefont.pointSize: 24color: "red"}}
}

示例2：设置字体过长用省略号显示。

elide：设置此属性以消除适合于Text项目宽度的文本部分。仅当设置了显式宽度时，文本才会消失。此属性不能与富文本一起使用

• Text.ElideNone（默认）：不缩略；
• Text.ElideLeft：文本左端缩略；
• Text.ElideMiddle：文本中间缩略；
• Text.ElideRight：文本右端缩略；

Window {visible: truewidth: 400height: 400title: qsTr("Hello World")Rectangle{width: 200height: 200border.width: 2Text {text: "Hello World! Hello World! Hello World!"font.family: "Helvetica"font.bold: truefont.italic: truefont.underline: truefont.pointSize: 24color: "red"anchors.fill: parentelide: Text.ElideRight}}
}

示例3：设置额外的文本样式。

Window {visible: truewidth: 400height: 400title: qsTr("Hello World")Row {Text { font.pointSize: 24; text: "Normal" }Text { font.pointSize: 24; text: "Raised"; style: Text.Raised; styleColor: "#AAAAAA" }Text { font.pointSize: 24; text: "Outline";style: Text.Outline; styleColor: "red" }Text { font.pointSize: 24; text: "Sunken"; style: Text.Sunken; styleColor: "#AAAAAA" }}}

示例4：设置富文本。

Window {visible: truewidth: 400height: 400title: qsTr("Hello World")Column {Text {font.pointSize: 24text: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 24textFormat: Text.RichTexttext: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 24textFormat: Text.PlainTexttext: "<b>Hello</b> <i>World!</i>"}}}

示例5：设置行高，自动换行。

wrapMode属性：Text控件文本换行属性。仅当设置了显式宽度时，文本才会换行。

• Text.NoWrap（默认）：不执行换行。如果文本宽度大于控件的width，则文本无法显示完全。
• Text.WordWrap：换行仅在单词边界上完成。如果单词太长，单词会无法显示完全。
• Text.WrapAnywhere：可以在任意一处位置换行，即使是单词的中间。
• Text.Wrap：如果可能的话，在单词边界处换行；否则，它将出现在行中的适当点，即使是在单词中间。

lineHeight属性：设置文本的行距。具体取决于lineHeightMode。默认值为1.0的倍数，行距必须为正值。

Window {visible: truewidth: 400height: 400title: qsTr("Hello World")Rectangle{width: 200height: 200border.width: 2Text {text: "Hello World! Hello World! Hello World!"font.family: "Helvetica"font.bold: truefont.italic: truefont.underline: truefont.pointSize: 24color: "red"anchors.fill: parentwrapMode: Text.WordWrap//lineHeightMode:Text.FixedHeightlineHeight: 2}}
}