5.qml-Text元素学习

上章我们学习了4.qml-Item元素学习
所以本章主要来讲解Item的子元素Text

1. Text元素

既可以显示普通文本也可以显示富文本,它的属性可以自定义字体,大小,颜色等。
示例如下所示:

Item {
        anchors.fill: parent
        focus: true
        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"
            }
         }

效果如下所示:

由于富文本是默认激活的,如果不想让Text进行富文本检测,只使用普通文本,那么可以通过"textFormat: Text.PlainText"只显示普通文本.

2. Text属性
Text其它常用属性如下所示:
antialiasing : bool，文本是否使用抗锯齿。只有具有renderType为Text.NativeRendering的Text才能禁用抗锯齿。默认值为true。
bottomPadding : real,底部内边距
clip : bool,为true时,那么超出文本显示区域,则将被裁减,如果只想显示在区域内显示所有文本,则使用elide(省略)
color : color,设置文本颜色
contentHeight : real,只读属性,用来返回当前显示的文本高度
contentWidth : real,只读属性,用来返回当前显示的文本宽度
effectiveHorizontalAlignment : enumeration,只读属性,用来获取HorizontalAlignment水平对齐方式的值
elide : enumeration,当文本长度超出文本显示区域,则可以通过该属性来设置文本省略方式,默认值为Text.ElideNone,Eliding可以设置为：

• Text.ElideLeft - 省略靠左的文本,比如:ABCDFGHIJ,那么会显示: "...HIJ"
• Text.ElideMiddle- 省略中间的文本
• Text.ElideRight- 省略靠右的文本

font.bold : bool,设置字体粗细,默认为false(细)
font.capitalization : enumeration,书写方式,enumeration可以有以下值：

• Font.MixedCase - 正常情况
• Font.AllUppercase - 设置为大写字母
• Font.AllLowercase - 设置为小写字母
• Font.SmallCaps - 设置为小型大写字母
• Font.Capitalize - 每一个单的第一个字母大写

font.family : string,字体,比如"Microsoft Yahei"(雅黑)
font.italic : bool:设置是否斜体,默认为false;
font.kerning : bool,默认值为true,绘制文本时会自动调整字距,禁用后会提高性能,牺牲外观效果
font.letterSpacing : real,设置每个字符之间的间距
font.pixelSize : int,设置字体像素大小,
font.pointSize : real,设置字体大小,单位为磅
font.strikeout : bool,设置字体是否具有删除线样式，默认为false
font.styleName : string,设置字体的样式名称
font.underline : bool,设置字体是否具有下划线样式，默认为false
font.weight : enumeration,设置字体体重，可以有以下值：

• Font.Light
• Font.Normal - 默认值
• Font.DemiBold
• Font.Bold
• Font.Black

font.wordSpacing : real,设置每个单词之间的空白(设置空格可以伸缩)。word-spacing对中文无效。
fontSizeMode : enumeration,设置文字大小此属性指定显示的文字的字体大小来确定。可能的值有：

• Text.FixedSize (默认值) - 使用的大小由font.pixelSize或font.pointSize指定。
• Text.HorizontalFit - 最大尺寸到指定的大小，适合该项目的宽度使用。
• Text.VerticalFit - 最大尺寸到指定的大小，适合该项目的高度使用。
• Text.Fit - 最大尺寸的大小指定的宽度和高度。

合身的文字的字体大小有一个由minimumPointSize或minimumPixelSize指定的最小限制和font.pointSize或font.pixelSize指定的最大限制属性。
如果文本不适合最小显示，则文本将被省略。
horizontalAlignment : enumeration,设置文本水平对齐方式，可设值有:Text.AlignLeft，Text.AlignRight，Text.AlignHCenter，Text.AlignJustify.
hoveredLink : string，当鼠标悬浮在文本中嵌入的链接时，返回该链接字符串。链接必须为富文本格式或HTML格式
leftPadding : real,左侧内边距
lineCount : int,只读属性,用来返回当前显示的文本行数
lineHeight : real,设置文本的行高。该值的单位可以是像素，可以是倍数，取决于lineHeightMode。
lineHeightMode : enumeration,此属性指定线高类型：

• Text.ProportionalHeight （默认值）-设置与行成比例的间距（作为乘数）,例如，设置值lineHeight=2表示双倍间距。
• Text.FixedHeight 将行高设置为固定杭盖（lineHeight以像素为单位）。

linkColor : color，文本中链接的颜色。并且textFormat=Text.StyledText时才能生效，因为富文本链接的颜色可以在文本的CSS样式标签中指定。
maximumLineCount : int,设置最大显示的行数,默认值是最大整数值
minimumPixelSize : int,设置文本的最小像素，如果fontSizeMode = Text.FixedSize.则不生效
minimumPointSize : int,设置文本的最小字体(单位为磅)，如果fontSizeMode = Text.FixedSize.则不生效

renderType : enumeration,设置渲染类型,如果设置为Text.NativeRendering.显示效果会很差，可能会出现像素化。
padding : real,设置内边距
rightPadding : real,设置右内边距
style : enumeration,设置文字描边的样式,描边的颜色配合styleColor设置,样式的值有以下几种：

• Text.Normal - 默认
• Text.Outline - 对文字周围全部进行描边,显示最明显
• Text.Raised - 突出文字上部分
• Text.Sunken - 突出文字下部分

styleColor : color,设置文字描边的颜色，如果未设置style，则该属性无效
text : string,设置显示的文本内容.
textFormat : enumeration,设置文本显示格式类型,值有以下几种:

• Text.AutoText （默认值）通过Qt::mightBeRichText()校验
• Text.PlainText 纯文本
• Text.StyledText 和HTML3.2一样，优化基本富文本
• Text.RichText HTEML4的子集,比Text.StyledText更丰富

topPadding : real,设置顶部内边距
truncated : bool,如果显示的文本被maximumLineCount或elide属性截断，则返回true
verticalAlignment : enumeration,垂直对齐方式,取值有Text.AlignTop，Text.AlignBottom，Text.AlignVCenter.
wrapMode : enumeration ,设置换行模式,取值有以下几种:

• Text.NoWrap - 不支持换行（默认）
• Text.WordWrap - 如果单词太长，超过显示边界，则将该单词换行。
• Text.WrapAnywhere - 支持任意字符的换行。
• Text.Wrap - 自动合适换行，以单词优先

3.示例-clip和elide属性区别

Item {
        anchors.fill: parent
        focus: true
        Column {
            Text {
                    text: "Hello World!"
                    font.family: "Microsoft Yahei"
                    font.pointSize: 24
                    color: "blue"
                    width: 150
                    clip: true
                }
            Text {
                    text: "Hello World!"
                    font.family: "Microsoft Yahei"
                    font.pointSize: 24
                    color: "green"
                    width: 150
                    elide: Text.ElideLeft   // 省略左边字符
            }
         }
    }

效果如下所示,对于clip,如果超出显示区域,则直接不显示,而elide,则是省略不显示的字符.

4.示例-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" }
         }
}

效果如下所示,可以看到Raised的轮廓只描绘了文字的下部分,所以只突出文字上部分:

5.富文本常用标记
参考https://www.cnblogs.com/lifexy/p/12275053.html

• <p>:段落标签,每个段落之间都会有个段间距(一空白行),不需要</p>作结尾,
• <br/>:换行
• <hr>:水平线horizontal
• <center>:居中标记
• <h1>~<h5>:标题标记
• <STRONG> <B>:两者皆能产生字体加粗的效果
• <I>:斜体
• <U> 是加底线的标记
• <STRIKE> 加上删除线的标记。
• <BIG> 令字体加大。
• <SMALL> 令字体变细。
• <font> 指定字体大小、颜色、格式等
• <a> ：链接标记

6.Text信号
Text的信号有下面3个:

其中linkActivated(link)和linkHovered(link),分别是链接鼠标点击信号和链接鼠标徘徊信号,示例如下所示:

Item {
        anchors.fill: parent
        focus: true
        Text {
                textFormat: Text.RichText
                text: "See the <a href="http://qt-project.org">Qt Project website</a>."
                onLinkHovered: console.log(link + " link 鼠标徘徊")
                onLinkActivated: console.log(link + " link 鼠标点击")
        }
}

而lineLaidOut信号,则是在每行文本准备布局的时候触发,然后我们可以在槽方法中来定义排版（后面深入学习后,再回来补充）.

未完待续

• 还没有人评论，欢迎说说您的想法！

相关课程

DHCP服务器

4577 9.8元

C++ 匠心之作 从0到1入门学编程

3782 9.8元

C语言提高深入浅出

5316 9.8元