QML学习（四）——Text显⽰
⽂本显⽰是界⾯开发必不可少的内容，在Qt Quick模块中提供了 Text 项⽬来进⾏⽂本的显⽰，其中可以使⽤ font 属性组对⽂本字体进⾏设置。这⼀篇我们来看看它们的具体使⽤。
使⽤字体
就像前⾯教程中提到过的，在⽂本中可以使⽤ font 属性组来设置字体，常⽤的属性如下：
font.bold：是否加粗，取值为true或false
font.capitalization：⼤写策略，取值为
Font.MixedCase不改变⼤⼩写（默认值）；
Font.AllUppercase全部⼤写；
Font.AllLowercase全部⼩写；
Font.SmallCaps⼩型⼤写字母（即⼩写字母变为⼤写但不改变字体原始的⼤⼩）；
Font.Capitalize：⾸字母⼤写
font.family：字体族，取值为字体族的名字（区分⼤⼩写）
font.italic：是否斜体，取值为true或false
font.letterSpacing：字符间距，正值加⼤间距，负值减⼩间距
font.pixelSize：字号⼤⼩，取值为整数（单位为像素，依赖于设备）
font.pointSize：字号⼤⼩，取值为⼤于0的值（是设备⽆关的）
font.strikeout：是否有删除线，取值为true或false
font.underline：是否有下划线，取值为true或false
font.weight：字体重量，取值为Font.Thin、Font.Light、Font.ExtraLight、Font.Normal（默认）、Font.Medium、Font.DemiBold、Font.Bold、Font.ExtraBold 和 Font.Black
font.wordSpacing：单词间距，正值加⼤间距，负值减⼩间距
我们可以直接使⽤点表⽰法来使⽤⼀个属性，也可以使⽤组表⽰法来⼀次指定多个属性，建议使⽤组表⽰法，这样代码的可读性更好。下⾯来看⼀个⽰例：
Text {
id: text1
text: "hello qt! Hello World!"
}
Text {
id: text2
anchors.horizontalCenter: text1.horizontalCenter
text: "hello qt! Hello World!"
font.weight: Font.ExtraBold
font.pointSize: 20
font.letterSpacing: 3
font.wordSpacing: 6
font {
capitalization: Font.AllLowercase
italic: true
underline: true
}
font.family: webFont.name
FontLoader {
id: webFont
source: "/f"
onStatusChanged: if (webFont.status == FontLoader.Ready)
console.log('Loaded')
}
}
这⾥最后使⽤了 FontLoader 类型来加载⼀个字体，可以通过设置 source 属性来指定⼀个字体名称或者⽹络 url 地址，⽐如这⾥使⽤了⽹上的⼀个 ttf 字体，当使⽤⽹络字体时，可以通过 status 属性来获取加载的状态。下图是运⾏效果。
⽂本裁剪
Text 项⽬是可以设置宽度的，当⾥⾯的⽂本内容超出 Text 的宽度时，可以使⽤ clip 属性设置⽂本是否被裁剪。下⾯来看⼀个例⼦：Column{
spacing: 5
Rectangle {
width: 186; height: 30
color: "lightblue"
Text {
text: "hello qt! Hello World!"
font.pointSize: 15
}
}
Rectangle {
width: 186; height: 30
color: "lightblue"
Text {
text: "hello qt! Hello World!"
font.pointSize: 15
width: 186
clip: true
}
}
Rectangle {
width: 186; height: 30
color: "lightgreen"
Text {
text: "hello qt! Hello World!"
font.pointSize: 15
}
}
Rectangle {
width: 186; height: 30
color: "lightgreen"
Text {
text: "hello qt! Hello World!"
font.pointSize: 15
width: 186
clip: true
}
}
}
运⾏效果如下图所⽰。
⽂本省略
如果使⽤ clip 属性，当⽂本超出边界后会被突然截断，这样可能在边界只显⽰了单词或字母的局部，⾮常不友好。在 Text 中还提供了 elide 属性，可以通过省略⽂本的部分内容来匹配⽂本的宽度，其取值包括Text.ElideNone （默认）、Text.ElideLeft、Text.ElideMiddle 和 Text.ElideRight ，需要注意的是，该属性也是在设置了 Text 宽度时才有作⽤。下⾯看⼀段⽰例代码：
Column{
spacing: 5
Rectangle {
width: 186; height: 30
color: "lightblue"
Text {
width: 186
text: qsTr("hello qt! Hello World!⽂本省略")
font.pointSize: 15
elide: Text.ElideLeft
}
}
Rectangle {
width: 186; height: 30
color: "lightblue"
Text {
width: 186
text: qsTr("hello qt! Hello World!⽂本省略")
font.pointSize: 15
elide: Text.ElideMiddle
}
}
Rectangle {
width: 186; height: 30
color: "lightblue"
Text {
width: 186
text: qsTr("hello qt! Hello World!⽂本省略")
font.pointSize: 15
elide: Text.ElideRight
}
}
}
运⾏效果如下图所⽰。
⽂本换⾏
对于过长的⽂本，除了进⾏省略以外，也可以使⽤ wrapMode 来设置换⾏，可⽤的换⾏模式包括：Text.NoWrap (默
认) 、Text.WordWrap、Text.WrapAnywhere 和Text.Wrap。当设定了 Text 的⾼度 height，或者最⼤⾏数 maximumLineCount 后，换⾏和省略可以同时使⽤。下⾯来看⼀个例⼦，在前⾯代码的基础上继续添加如下代码：
Rectangle {
width: 186; height: 50
color: "lightgreen"
Text {
width: 186
text: qsTr("hello qt! Hello World!⽂本换⾏")
font.pointSize: 15
wrapMode: Text.WordWrap
}
}
Rectangle {
width: 186; height: 50
color: "lightgreen"
Text {
width: 186
text: qsTr("hello qt! Hello World!⽂本换⾏")
font.pointSize: 15
wrapMode: Text.WrapAnywhere
}
}
Rectangle {
width: 186; height: 50
color: "lightgreen"
Text {
width: 186; height: 50
text: qsTr("hello qt! Hello World!⽂本换⾏的同时也可以省略")
font.pointSize: 15
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
}
}
运⾏效果如下图所⽰。
text align center
⽂本样式
使⽤ Text 的 style 属性可以设置⽂本的样式，包括：Text.Normal(默认)、Text.Outline、Text.Raised 和 Text.Sunken ，下⾯是⽰例：
Row {
spacing: 10
Text { font.pointSize: 24; text: "Normal" }
Text { font.pointSize: 24; text: "Raised"; color: "white"
style: Text.Raised; styleColor: "blue" }
Text { font.pointSize: 24; text: "Outline";
style: Text.Outline; styleColor: "red" }
Text { font.pointSize: 24; text: "Sunken"; color: "white"
style: Text.Sunken; styleColor: "black" }
}
运⾏效果如下图所⽰。
对齐⽅式
当设置了 Text 的宽度和⾼度以后，可以通过 horizontalAlignment 和 verticalAlignment 来设置⽂本内容的对齐⽅式，⽔平⽅向包括：Text.AlignLeft、 Text.AlignRight、 Text.AlignHCenter 和 Text.AlignJustify；垂直⽅向包括：Text.AlignTop、 Text.AlignBottom 和 Text.AlignVCenter 。下⾯是⽰例代码：
Rectangle {
width: 300; height: 50
color: "gold"
Text {
width: 300; height: 50
text: qsTr("hello qt! Hello World!")
font.pointSize: 15
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignBottom
}
}
运⾏效果如下图所⽰。
显⽰富⽂本
Text 项⽬除了显⽰纯⽂本以外，也可以显⽰富⽂本。通过 textFormat 属性可以设置⽂本格式，包括：
Text.AutoText (默认)：⾃动判断以什么样式来进⾏显⽰；
Text.PlainText：以纯⽂本进⾏显⽰；
Text.StyledText：是⼀种⽀持基本⽂本样式标签的优化格式，例如HTML 3.2中的标签：
<b></b>
<strong></strong>
<i></i>
<br>
<p>
<u>
<font color="color_name" size="1-7"></font>
<h1> to <h6>
<a href="">
<img src="" align="top,middle,bottom" width="" height="">
<ol type="">, <ul type=""> , <li>
<pre></pre>
> < &
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论