Roson的Qt之旅#110 QML Text

发布于:2023-01-18 ⋅ 阅读:(348) ⋅ 点赞:(0)

1.概述

Text可以同时显示纯文本和富文本。例如,具有特定字体和大小的红色文本可以这样定义:

Text {

      text: "Hello World!"

      font.family: "Helvetica"

      font.pointSize: 24

      color: "red"

  }

富文本是使用html样式的标记定义的:

  Text {

      text: "<b>Hello</b> <i>World!</i>"
  }

如果高度和宽度没有显式设置,Text将尝试确定需要多少空间,并相应地设置。除非设置了wrapMode,否则它将始终优先选择宽度而不是高度(所有文本将放置在单行上)。

elide属性也可用于将单行纯文本调整为设置的宽度。

注意,受支持的HTML子集是有限的。另外,如果文本包含加载远程图像的HTML img标记,则重新加载文本。

Text提供只读文本。有关可编辑文本,请参阅TextEdit。

参见Fonts示例。

2.属性说明

baseUrl : url

此属性指定用于解析文本中的相对URL的基URL。

URL被解析为与基本URL的目标在同一目录内,这意味着路径的最后一个'/'之后的任何部分将被忽略。

Base URL

Relative URL

Resolved URL

http://qt-project.org/

images/logo.png

http://qt-project.org/images/logo.png

http://qt-project.org/index.html

images/logo.png

http://qt-project.org/images/logo.png

http://qt-project.org/content

images/logo.png

http://qt-project.org/content/images/logo.png

http://qt-project.org/content/

images/logo.png

http://qt-project.org/content/images/logo.png

http://qt-project.org/content/index.html

images/logo.png

http://qt-project.org/content/images/logo.png

http://qt-project.org/content/index.html

../images/logo.png

http://qt-project.org/images/logo.png

http://qt-project.org/content/index.html

/images/logo.png

http://qt-project.org/images/logo.png

默认值是实例化Text项的QML文件的url。

bottomPadding : real

这些属性保存内容周围的填充。除了contentWidth和contenttheight之外,这个空间也被保留。

这个QML属性是在Qt 5.6中引入的。

clip : bool

此属性保存文本是否被剪切。

注意,如果文本不适合边框,它会突然被截断。

如果希望在有限的空间中显示可能很长的文本,那么可能需要使用elide。

color : color

文本的颜色。

一个使用十六进制表示法定义的绿色文本示例:

  Text {

      color: "#00FF00"

      text: "green text"

  }

一个使用SVG颜色名称定义的钢蓝色文本示例:

  Text {

      color: "steelblue"

      text: "blue text"

  }

contentHeight : real

返回文本的高度,包括超过因文本数量多于设置高度而被覆盖的高度.

contentWidth : real

返回文本的宽度,包括超过设置WrapMode时由于换行不足而覆盖的宽度.

effectiveHorizontalAlignment : enumeration

设置“文本项宽度和高度”内文本的水平和垂直对齐方式。默认情况下,文本是垂直向上对齐的。水平对齐遵循文本的自然对齐,例如从左向右读取的文本将向左对齐.

horizontalAlignment的有效值是Text。AlignLeft、文本。AlignRight、文本。AlignHCenter Text.AlignJustify。垂直对齐的有效值是文本。AlignTop、文本。AlignBottom Text.AlignVCenter。

注意,对于单行文本,文本的大小就是文本的面积。在这种常见情况下,所有对齐都是等价的。如果你想让文本居中于父文本,那么你需要修改Item::锚,或者设置水平对齐为文本。对齐中心并将宽度绑定到父对象的宽度。

当使用附加属性LayoutMirroring::来镜像应用布局时,文本的水平对齐也会被镜像。但是,属性horizontalAlignment将保持不变。要查询文本的有效水平对齐,请使用只读属性effecvehorizontalalignment。

elide : enumeration

设置此属性以删除适合“文本”项宽度的文本部分。只有在设置了显式宽度时,文本才会删除。

此属性不能用于富文本。

Elide的值可以是:

  • Text.ElideNone - the default
  • Text.ElideLeft
  • Text.ElideMiddle
  • Text.ElideRight

如果此属性设置为Text。ElideRight,它可以用于自动换行文本。只有在设置了maximumLineCount或高度时,文本才会被删除。如果同时设置了maximumLineCount和height,则maximumLineCount将应用,除非行不符合允许的高度。

如果文本是多长度字符串,且模式不是text。ElideNone,第一个匹配的字符串将被使用,否则最后一个将被省略。

多长度字符串按从最长到最短排序,由Unicode“字符串终止符”字符U009C分隔(用“\ U009C”或“\x9C”在QML中书写)。

font.bold : bool

设置字体粗体是否为粗体.

font.capitalization : enumeration

设置文本的大小写.

  • Font.MixedCase - 这是普通的文本呈现选项,其中不应用任何大小写更改。
  • Font.AllUppercase - 这将文本以全大写形式呈现
  • Font.AllLowercase - 这将文本转换为所有小写类型 .
  • Font.SmallCaps - 这将文本转换为小大写类型.
  • Font.Capitalize - 这将文本更改为将每个单词的第一个字符作为大写字符呈现.
 Text { text: "Hello"; font.capitalization: Font.AllLowercase }

font.family : string

设置字体的家族名称。

字族名称是不区分大小写的,并且可以选择包括一个铸造厂的名称,例如:"Helvetica [Cronyx]"。如果该字体家族在多个铸造厂中可用,并且没有指定铸造厂,则会选择一个任意的铸造厂。如果没有可用的字族,我们将使用字体匹配算法来设置一个字族。

font.hintingPreference : enumeration

设置文本的首选提示。这是对底层文本渲染系统的一个提示,以使用某种程度的提示,在不同的平台上有不同的支持。更多细节请参见QFont::HintingPreference文档中的表格。

注意:这个属性只有在与渲染类型Text.NativeRendering一起使用时才有效果。

Font.PreferDefaultHinting - 使用目标平台的默认提示级别。

Font.PreferNoHinting - 如果可能的话,渲染文本时不提示字形的轮廓。文本布局将是准确的,使用与打印时相同的指标。

Font.PreferVerticalHinting - 如果可能的话,渲染文本时没有水平提示,但在垂直方向上将字形与像素网格对齐。在密度太低而无法准确呈现字形的显示器上,文字会显得更清晰。但由于字形的水平度量没有被提示,文本的布局将可扩展到更高密度的设备(如打印机),而不会影响到换行等细节。

Font.PreferFullHinting - 如果可能的话,在水平和垂直方向渲染带有提示的文本。文本将被改变以优化在目标设备上的可读性,但由于指标将取决于文本的目标尺寸,字形、换行和其他排版细节的位置将不会扩展,这意味着文本布局在不同像素密度的设备上可能看起来不同。

  Text { text: "Hello"; renderType: Text.NativeRendering; font.hintingPreference: Font.PreferVerticalHinting }

font.italic : bool

设置字体是否具有斜体风格。.

font.letterSpacing : real

设置字体的字母间距。

字母间距可以改变字体中各个字母之间的默认间距。一个正值会增加相应像素的字母间距;一个负值会减少间距。

font.pixelSize : int

设置以像素为单位的字体大小。

使用这个函数使字体依赖于设备。使用pointSize可以以独立于设备的方式设置字体的大小。

font.pointSize : real

以点为单位设置字体大小。点的大小必须大于零。

font.strikeout : bool

设置字体是否有删除的样式。

font.styleName : string

设置字体的样式名称。

样式名称是不分大小写的。如果设置了,字体将被匹配到样式名称,而不是字体属性font.weight、font.bold和font.italic。

font.underline : bool

设置文本是否有下划线。

font.weight : enumeration

设置字体的权重。

权重可以是以下之一。:

  • Font.Thin
  • Font.Light
  • Font.ExtraLight
  • Font.Normal - the default
  • Font.Medium
  • Font.DemiBold
  • Font.Bold
  • Font.ExtraBold
  • Font.Black
  Text { text: "Hello"; font.weight: Font.DemiBold }

font.wordSpacing : real

设置字体的字距。

字距会改变单个单词之间的默认间距。一个正值会将字间距增加相应的像素,而一个负值则会相应地减少字间的间距。

fontInfo.bold : bool

已为当前字体和fontSizeMode解析的字体信息的粗体状态。如果被解析的字体的权重是黑体或更高,这就是真的。

fontInfo.family : string

为当前字体和fontSizeMode解决的字体的家族名称。

fontInfo.italic : bool

字体信息的斜体状态,它已经为当前的字体和fontSizeMode解决了。

fontInfo.pixelSize : string

为当前字体和fontSizeMode解决的字体信息的像素大小。

fontInfo.pointSize : real

对于当前的字体和fontSizeMode来说,字体信息的点尺寸已经被解决了。

fontInfo.styleName : string

为当前字体和fontSizeMode解析的字体信息的样式名称。

  • fontInfo.weight : int

为当前字体和fontSizeMode解决的字体信息的重量。

fontSizeMode : enumeration

这个属性指定了如何确定显示文本的字体大小。可能的值是。

  • Text.FixedSize(默认) - 使用由font.pixelSize或font.pointSize指定的大小。
  • Text.HorizontalFit - 使用在项目宽度范围内适合的最大尺寸,而不会被包裹。
  • Text.VerticalFit - 使用符合项目高度的最大尺寸,直到指定的尺寸。
  • Text.Fit - 在项目的宽度和高度范围内,使用最大的尺寸,直到指定的尺寸。

拟合文本的字体大小有一个由minimumPointSize或minimumPixelSize属性指定的最小界限和由font.pointSize或font.pixelSize属性指定的最大界限。

  Text { text: "Hello"; fontSizeMode: Text.Fit; minimumPixelSize: 10; font.pixelSize: 72 }

如果文本不适合在最小字体大小的项目边界内,文本将按照elide属性被隐藏。

horizontalAlignment : enumeration

设置文本项目宽度和高度内文本的水平和垂直对齐。默认情况下,文本是垂直对齐到顶部的。水平对齐遵循文本的自然对齐方式,例如,从左到右阅读的文本会向左对齐。

horizontalAlignment的有效值是Text.AlignLeft、Text.AlignRight、Text.AlignHCenter和Text.AlignJustify。垂直对齐的有效值是Text.AlignTop、Text.AlignBottom和Text.AlignVCenter。

请注意,对于单行文本,文本的大小就是文本的面积。在这种常见的情况下,所有的对齐方式都是等同的。如果你想让文本在其父本中居中,那么你需要修改Item::anchors,或者将horizontalAlignment设置为Text.AlignHCenter并将宽度与父本的宽度绑定。

当使用附加属性LayoutMirroring::enabled来镜像应用程序的布局时,文本的水平对齐也将被镜像。然而,属性horizontalAlignment将保持不变。要查询文本的有效水平对齐方式,请使用只读属性 effectiveHorizontalAlignment。

hoveredLink : string

此属性包含当用户悬停嵌入文本中的链接时的链接字符串。该链接必须是富文本或HTML格式,hoveredLink字符串提供了对该特定链接的访问。

也请看linkHovered和linkAt()。

leftPadding : real

这些属性保留了内容周围的padding。这个空间是在contentWidth和contentHeight之外保留的。

lineCount : int

返回文本项目中可见的行数。

这个属性不支持富文本。

请参阅maximumLineCount。

lineHeight : real

设置文本的行高。这个值可以是像素或一个乘数,取决于lineHeightMode。

默认值是一个1.0的乘数。行高必须是一个正值。

lineHeightMode : enumeration

此属性决定了如何指定线的高度。可能的值是。

- Text.ProportionalHeight(默认)--这设置了与行高成比例的间距(作为一个乘数)。例如,设置为2表示双倍间距。

- Text.FixedHeight - 这将行高设置为一个固定的行高(以像素为单位)。

linkColor : color

文本中链接的颜色。

这个属性对StyledText textFormat有效,但对RichText无效。RichText中的链接颜色可以通过在文本中加入CSS样式标签来指定。

maximumLineCount : int

设置此属性以限制文本项显示的行数。如果elide被设置为Text.ElideRight,文本将被适当地elide。默认情况下,这是一个最大的可能的整数的值。

这个属性不支持富文本。

另请参见lineCount和elide。

minimumPixelSize : int

此属性指定由fontSizeMode属性缩放的文本的最小字体像素大小。

如果fontSizeMode是Text.FixedSize或者font.pixelSize是-1,这个属性将被忽略。

minimumPointSize : int

此属性指定由fontSizeMode属性缩放的文本的最小字体点大小。

如果fontSizeMode是Text.FixedSize或者font.pointSize是-1,这个属性将被忽略。

padding : real

这些属性保留了内容周围的padding。这个空间是在contentWidth和contentHeight之外保留的。

renderType : enumeration

覆盖这个组件的默认渲染类型。

支持的渲染类型有

- Text.QtRendering - 默认的

- Text.NativeRendering

如果你希望文本在目标平台上看起来是原生的,并且不需要文本的转换等高级功能,请选择Text.NativeRendering。如果将这些功能与NativeRendering渲染类型结合起来使用,会导致效果不佳,有时还会出现像素化。

rightPadding : real

这些属性保留了内容周围的padding。这个空间是在contentWidth和contentHeight之外保留的。

style : enumeration

设置一个额外的文本样式。

支持的文本样式有:

  • Text.Normal - the default
  • Text.Outline
  • Text.Raised
  • Text.Sunken
  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" }

  }

styleColor : color

定义文本样式所使用的辅助颜色。

styleColor被用作勾勒文本的轮廓颜色,以及作为凸起或凹陷文本的阴影颜色。如果没有设置任何样式,它就完全不被使用。

  Text { font.pointSize: 18; text: "hello"; style: Text.Raised; styleColor: "gray" }

参见 style.

text : string

要显示的文本。文本支持纯文本和富文本字符串。

该项目将尝试自动确定该文本是否应被视为有风格的文本。这个判断是通过Qt::mightBeRichText()进行的。

textFormat : enumeration

文本属性的显示方式。

支持的文本格式有:

  • Text.AutoText (default)
  • Text.PlainText
  • Text.StyledText
  • Text.RichText

如果文本格式是Text.AutoText,文本项将自动确定文本是否应被视为有风格的文本。这个判断是通过Qt::mightBeRichText()进行的,它使用了一个快速的、因此也是简单的启发式方法。它主要检查在第一个换行之前是否有像标签的东西。尽管在常见的情况下,结果可能是正确的,但并不能保证。

Text.StyledText是一种优化的格式,支持一些基本的文本样式标记,采用HTML 3.2的风格:

  <b></b> - bold
  <strong></strong> - bold
  <i></i> - italic
  <br> - new line
  <p> - paragraph
  <u> - underlined text
  <font color="color_name" size="1-7"></font>
  <h1> to <h6> - headers
  <a href=""> - anchor
  <img src="" align="top,middle,bottom" width="" height=""> - inline images
  <ol type="">, <ul type=""> and <li> - ordered and unordered lists
  <pre></pre> - preformatted
  &gt; &lt; &amp;

Text.StyledText解析器很严格,要求标签正确嵌套。

Text.RichText支持更大的HTML 4子集,如支持的HTML子集页面所描述。你应该倾向于使用Text.PlainText或Text.StyledText,因为它们具有更好的性能。

topPadding : real

这些属性保留了内容周围的填充物。这个空间是在contentWidth和contentHeight之外保留的。

truncated : bool

如果文本由于maximumLineCount或elide而被截断,返回true。

此属性不支持富文本。

请参见maximumLineCount和elide。

verticalAlignment : enumeration

设置文本项目宽度和高度内文本的水平和垂直对齐。默认情况下,文本是垂直对齐到顶部的。水平对齐遵循文本的自然对齐,例如,从左到右阅读的文本会向左对齐。

horizontalAlignment的有效值是Text.AlignLeft、Text.AlignRight、Text.AlignHCenter和Text.AlignJustify。垂直对齐的有效值是Text.AlignTop、Text.AlignBottom和Text.AlignVCenter。

请注意,对于单行文本,文本的大小就是文本的面积。在这种常见的情况下,所有的对齐方式都是等同的。如果你想让文本在其父本中居中,那么你需要修改Item::anchors,或者将horizontalAlignment设置为Text.AlignHCenter并将宽度与父本的宽度绑定。

当使用附加属性LayoutMirroring::enabled来镜像应用程序的布局时,文本的水平对齐也将被镜像。然而,属性horizontalAlignment将保持不变。要查询文本的有效水平对齐方式,请使用只读属性 effectiveHorizontalAlignment。

wrapMode : enumeration

设置此属性可以将文本包裹到文本项的宽度。只有在明确设置了宽度的情况下,文本才会被包起来。wrapMode可以是以下之一:

  • Text.NoWrap(默认)--将不进行包装。如果文本中的换行符不足,那么contentWidth将超过设定的宽度。
  • Text.WordWrap - 只对字的边界进行包装。如果一个词太长,contentWidth将超过设定的宽度。
  • Text.WrapAnywhere - 在一行的任何一点上进行包装,即使它发生在一个词的中间。
  • Text.Wrap - 如果可能的话,包装会发生在字的边界;否则会发生在行上的适当位置,甚至在一个字的中间。

3.信号说明

lineLaidOut(object line)

在布局过程中,每铺设一行文本,就会发出这个信号。指定的行对象提供了关于当前正在布局的行的更多细节。

这使我们有机会在布局时定位和调整行的大小。例如,它可以用来创建列或在对象周围布置文本。

指定线条对象的属性是:

  • number (read-only)
  • x
  • y
  • width
  • height

例如,这将把一个文本项目的前5行向右移动100像素:

  onLineLaidOut: {

      if (line.number < 5) {

          line.x = line.x + 100

          line.width = line.width - 100

      }

  }

相应的处理程序是onLineLaidOut。

linkActivated(string link)

当用户点击嵌入在文本中的链接时,这个信号就会被发出来。该链接必须是富文本或HTML格式,链接字符串提供对特定链接的访问。

      Text {

              textFormat: Text.RichText

              text: "See the <a href=\"http://qt-project.org\">Qt Project website</a>."

              onLinkActivated: console.log(link + " link activated")

      }

示例代码将显示文本 "参见Qt项目网站"。

点击高亮显示的链接将向控制台输出http://qt-project.org link activated。

相应的处理程序是onLinkActivated。

linkHovered(string link)

当用户悬停在文本中的一个链接时,这个信号就会发出。该链接必须是富文本或HTML格式,链接字符串提供对特定链接的访问。

相应的处理程序是onLinkHovered。

这个QML信号是在Qt 5.2中引入的。

参见hoveredLink和linkAt()。

4.成员函数介绍

forceLayout()

触发显示文本的重新布局。

linkAt(real x, real y)

返回内容坐标中x、y点的链接字符串,如果该点不存在链接,则返回一个空字符串。


网站公告

今日签到

点亮在社区的每一天
去签到