Qml中的Text控件

环境

Ubuntu 16.04 + Qt 5.7.1

Qml的Text控件

如qt助手中描述的，Text可以显示纯文本和富文本。 例如，可以定义如下具有特定字体和大小的红色文本：

  Text {
      text: "Hello World!"
      font.family: "Helvetica"
      font.pointSize: 24
      color: "red"
  }

• 1
• 2
• 3
• 4
• 5
• 6

富文本使用HTML样式的标记定义：

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

• 1
• 2
• 3

如果未明确设置高度和宽度，则Text将尝试确定需要多少空间并相应地进行设置。 除非设置wrapMode，否则它将始终偏向于宽度而不是高度（所有文本将放在一行中）。
可以使用elide属性将一行纯文本适合设置的宽度。
请注意，受支持的HTML子集是有限的。 另外，如果文本包含可加载远程图像的HTML img标签，则将重新加载文本。
文本提供只读文本。

wrapMode属性

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

elide属性

• elide：设置此属性以消除适合于Text项目宽度的文本部分。仅当设置了显式宽度时，文本才会消失。此属性不能与富文本一起使用。
  • Text.ElideNone（默认）：不缩略；
  • Text.ElideLeft：文本左端缩略；
  • Text.ElideMiddle：文本中间缩略；
  • Text.ElideRight：文本右端缩略；

lineHeight(行距)属性：

设置文本的行高。该值可以是像素，也可以是倍数，具体取决于lineHeightMode。默认值为1.0的倍数。线高必须为正值。

lineHeightMode:此属性确定如何指定行高。

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

测试效果

利用代码测试了一下大概的效果，如下图：

1. 不指定wrapMode和elide属性，则使用默认属性Text.NoWrap、Text.ElideNone；
2. 仅指定elide属性为Text.ElideLeft时，可以发现文本左端被缩略为”…“；
3. 仅指定elide属性为Text.ElideRight时，可以发现文本右端被缩略为“…”；
4. 仅指定elide属性为Text.ElideMiddle时，可以发现文本中间被缩略为“…”；
5. 同1；
6. 同1；
7. 仅指定wrapMode为Text.Wrap时，发现文本发生了换行；此时换行的位置为一个完整的单词旁；
8. 仅指定wrapMode为Text.WordWrap时，发现文本发生了换行；此时换行的位置恰巧为一个完整的单词旁；
9. 仅指定wrapMode为Text.WrapAnywhere时，发现文本发生了换行；但发现换行位置的单词被截断了；
10. 默认lineHeightMode为Text.ProportionalHeight(下同)，且不指定行距；
11. 指定行距为0.5；
12. 指定行距为1.5；

(442条消息) Qml中的Text控件_Giant NG的博客-CSDN博客_qml文本换行