本页内容

向用户界面添加文本

您可以使用多种不同的文本组件,向用户界面添加只读或可编辑的文本,例如标题或标签,以及带有占位符文本的文本输入字段。Text 组件用于添加格式化文本,Text Edit 组件用于添加多行文本编辑框,而Text Input 组件则用于添加单行可编辑文本字段。

您可以选择要使用的字体,并为每个文本字符串指定丰富的属性,例如以点或像素为单位的字号、样式名称、强调效果、对齐方式和间距。

如需了解更多信息,请观看以下视频:

若要创建带背景的标签,请使用“Components ”中提供的Label 组件 > Qt Quick Controls中提供的Text Field 组件。该模块还包含用于创建 和Text Area 控件的组件。它们与基本组件的不同之处在于,这些组件应用了统一的样式,并且您可以为其指定占位符文本。

使用富文本

您可以在TextText Input 组件中使用富文本。要打开富文本编辑器,请在Properties >Character >Text 中选择““编辑”按钮 ”(Edit )按钮。

在富文本编辑器中,您可以:

  • 强调文本。
  • 创建超链接。
  • 对齐文本。
  • 创建项目符号列表和编号列表。
  • 指定文本颜色。
  • 选择文本字体。
  • 设置字体大小。
  • 创建表格。

在编辑器中以富文本格式显示的文本

标记待翻译的字符串

为了协助翻译人员,请标记需要翻译的字符串。在Properties >Character >Text 中,选择tr

“tr”按钮位于“角色”部分

默认情况下,文本字符串被包含在qsTr() 调用中。

标记为待翻译的文本

若使用文本 ID 代替纯文本,请将默认调用改为qsTrId() 。选择Edit >Preferences > Qt Quick > Qt Quick Designer,然后在“Internationalization ”组中选择“qsTrId() ”单选按钮。有关详细信息,请参阅“基于文本 ID 的翻译”

若要在编辑文本时保留上下文,或通过为文本属性设置绑定来更改上下文,请选择“qsTranslate() ”单选按钮,将默认调用更改为“qsTranslate() ”。

有关详细信息,请参阅《编写待翻译源代码》。

字符属性

您可以在Properties 中的Character 部分设置字体属性。对于在Text 字段中输入的每条字符串,您可以在Font 字段中选择要使用的字体,并指定文本的大小、强调效果、对齐方式和间距。请在Size 字段中以点或像素为单位指定字体大小。

字符属性

若要在“Font ”字段的可用字体列表中显示自定义字体,您需要先将其添加到“Assets”中

  1. 选择“Assets ” > ““+”按钮 ”。
  2. 选择字体文件,然后点击“Open ”。
  3. 在“Add Resources ”对话框中,选择文件的保存位置。
  4. 点击“OK ”。

在“Weight ”字段中,您可以从“超轻”到“超粗”的预定义值列表中选择字体粗细。您还可以使用“Emphasis ”组中的按钮,将文本格式设置为粗体、斜体、下划线或删除线。

如果您在“Style name ”字段中设置了样式名称,系统将根据该样式名称匹配字体,而非“Weight ”和“Emphasis ”字段中设置的值。

Word spacing ”字段的数值会改变单词之间的默认间距,而“Letter spacing ”字段的数值则会改变单词中字母之间的间距。正值会相应地增加间距(以像素为单位),负值则会减少间距。

Line height ”字段的数值用于设置文本的行高。在“Text Extras ”部分的“Line height mode ”字段中,选择“FixedHeight ”可按像素设置行高,或选择“ProportionalHeight ”(默认)以按行比例(作为倍数)设置行高。例如,设置为2即可实现双倍行距。

文本对齐

您可以对文本组件进行水平和垂直对齐。默认情况下,文本垂直对齐于顶部。水平对齐遵循文本的自然对齐方式。默认情况下,英语等从左到右的文本会左对齐于文本区域的左侧,而阿拉伯语等从右到左的文本则右对齐于文本区域的右侧。

您可以将文本对齐到左侧、右侧、顶部或底部,并可进行水平或垂直居中对齐。您还可以对水平文本进行两端对齐。

对于单行文本,文本的大小即为文本的区域。在此常见情况下,所有对齐方式均等效。若要在父元素中居中显示文本,请使用锚定功能,或将文本组件的宽度绑定到父元素的宽度。有关详细信息,请参阅“设置绑定”

文本和样式颜色

您可以设置文本本身的颜色以及文本样式所使用的辅助颜色。

对于“Text Edit ”和“Text Input ”组件,您还可以在“Selected text color ”和“Selection color ”字段中设置选中文本的颜色,以及选中区域背后的文本高亮颜色。

对于Text FieldText Area 控件,您还可以在 和 字段中设置占位符文本的颜色。

有关选择颜色的更多信息,请参阅“选择颜色”。您只能为文本组件设置纯色。

高级文本属性

文本组件的高度和宽度会根据您设置的属性值自动确定,以适应您在“Text ”字段中指定的字符串长度以及字体大小等因素。您可以在“Text Extras ”部分中指定其他属性来格式化文本。

“文本扩展”部分

Size mode ”字段的值用于指定显示文本的字体大小如何确定。选择“FixedSize ”可使用“Character ”部分中“Size ”字段指定的大小(以像素或点为单位)。

选择“HorizontalFit ”或“VerticalFit ”,将使用不超过指定大小且能适应组件宽度或高度的最大字体大小。选择“Fit ”,将使用不超过指定大小且能完全容纳于组件宽度和高度内的最大字体大小。适配文本的字体大小下限由“Min size ”字段指定,上限由“Size ”字段指定。

文本换行与省略

在“Wrap mode ”字段中,您可以将文本折行以适应文本组件的宽度。只有当您为文本组件显式设置了宽度时,文本才会折行。默认情况下,文本不会折行。选择“WordWrap ”可将折行限制在单词边界处。 选择“WrapAnywhere ”(按单词分段),允许在行中的任意位置换行,即使该位置位于单词中间。选择“Wrap ”(按单词分段,若可能则在行中适当位置换行),系统将尽可能在单词分界处换行,否则会在行中的适当位置换行,即使该位置位于单词中间。

您可以结合使用Elide 属性与Wrap 选项,将单行纯文本调整为固定宽度。选择ElideRight ,并设置Max line count 或文本组件高度(在H 字段中)。如果同时设置了这两项,则以最大行数为准,除非行数超出允许的高度范围。

如果文本是长度不一的字符串,且您将Elide 属性值设置为ElideNone 以外的其他值,则将使用第一个能完全适配的字符串;否则,最后一个字符串将被截断。

多长度字符串按从长到短的顺序排列,并以 Unicode字符串终止符 U009C 分隔。

格式化文本

文本可以是纯文本或富文本格式,具体取决于您在Format 字段中设置的值。如果您选择AutoText ,且文本的第一行包含HTML标签,则该文本将被视为富文本。富文本支持“支持的HTML子集”中所述的HTML 4子集。请注意,纯文本的性能优于富文本。

渲染文本

在“Render type ”字段中,您可以覆盖文本组件的默认渲染类型。如果您希望文本在目标平台上呈现原生外观,且不需要文本变换等高级功能,请选择“NativeRendering ”。将旋转或缩放与原生渲染结合使用会导致效果不佳,有时甚至会出现像素化现象。

如果选择“NativeRendering ”,您可以在“Font Extras ”部分的“Hinting ”字段中设置提示偏好:

  • PreferDefaultHinting 使用目标平台的默认提示级别。
  • PreferNoHinting 在可能的情况下,渲染文本时不对字形轮廓进行提示处理。
  • PreferVerticalHinting 在可能的情况下,渲染文本时不进行水平方向的提示处理,但会将字形沿垂直方向对齐到像素网格上。
  • PreferFullHinting 在渲染文本时,同时应用水平和垂直方向的提示处理。

注意:此 属性仅描述一种偏好设置,因为并非所有 Qt 支持的平台都支持完整的提示级别范围。

高级字体属性

您可以在Font Extras 部分中为字体指定其他属性。

“字体附加功能”部分

在“Capitalization ”字段中,选择“MixedCase ”可实现常规文本渲染,即不进行大小写转换。您还可以将文本设置为全大写、全小写,或使用小写大写字母。选择“Capitalize ”选项可将每个单词的首字母渲染为大写字母。

您可以在“Style ”字段中将字体样式设置为“Outline ”、“Raised ”或“Sunken ”。在“Style color ”字段中选择的颜色将用作带轮廓文本的轮廓色,以及凸起或凹陷文本的阴影色。

若要在使用所选字体绘制文本时应用字距调整,请选择“Auto kerning ”。

有时,字体会对一组字符应用复杂的规则,以确保其正确显示。 在某些书写系统(如婆罗米文)中,这是确保文本可读性的必要条件;但在其他系统(如拉丁文)中,这仅是一种美观功能。为提高性能,此类功能默认处于禁用状态。如果需要启用,请选择“Prefer shaping ”。

文本输入

您可以使用Text EditText Input 组件来添加文本输入框,供用户输入文本。

Text Input 组件显示一行可编辑的纯文本,而Text Edit 组件则显示一段可编辑的、经过格式化的文本。这两个组件均用于接收文本输入。

文本输入框属性

输入密码

您可以为Text Input 组件设置相关属性,使其适合用于输入密码。

在“Input mask ”字段中,您可以创建一个包含掩码字符、元字符及其间分隔符的输入掩码。在创建或清空时,文本编辑框或输入框将填充输入掩码字符串的副本,其中元字符已被移除,掩码字符已被空格字符替换。 例如,在用于输入 IP 地址的输入字段中,您可以使用以下掩码(以下划线作为空字符):000.000.000.000;_ 。有关创建输入掩码的更多信息,请参阅QLineEdit::inputMask 的文档。

在“Echo mode ”字段中,选择“Password ”以显示与平台相关的密码掩码字符,而不是用户实际输入的字符。选择“PasswordEchoOnEdit ”以显示用户输入时的原始字符。掩码字符将显示在“Password character ”字段中。

输入文本

您可以指定用户如何在文本编辑或输入字段中输入文本。

在“Maximum length ”字段中,设置用户可输入的最大字符数。

Auto scroll ”的值决定了当文本长度超过字段宽度时,文本编辑框或输入字段是否会滚动。

如果选中了“Overwrite mode ”,新文本将按字符逐个覆盖现有文本。否则,新文本将插入到光标位置,从而挤占现有文本。默认情况下,新文本不会覆盖现有文本。

若要防止用户修改文本,请选择“Read only ”。

选择文本

在“Selection mode ”字段中,您可以指定使用指针设备选择文本时,是选择单个字符还是整个单词。

选择“Select by mouse ”可让用户通过鼠标以特定于平台的方式选择文本。对于某些平台,这种交互方式可能并不合适,因为它可能会与Flickable 组件中文本的行为方式发生冲突,例如。

对于Text Edit 组件,您可以选择Select by keyboard ,以允许用户即使在编辑字段为只读状态时,也能使用键盘选择文本。如果将此属性设置为false ,则即使用户可以编辑文本,也无法使用键盘选择文本。

焦点

Focus on press 的值决定了文本编辑框或输入框是否会在鼠标点击时获得活动焦点。

默认情况下,当文本编辑框或输入框获得活动焦点时,光标会显示出来,因此其他属性可以与光标当前是否显示相关联。由于Cursor visible 属性的值会自动设置和取消,您自行设置的任何值都可能会被覆盖。

如果选中了“Persistent selection ”,当活动焦点移至另一个组件时,文本编辑框或输入框将保持其选中状态。

制表符和边距

您可以为“Text Edit ”组件中的文本块指定额外的格式化属性。

文本编辑属性

在“Tab stop distance ”字段中,以设备单位为单位设置制表位之间的默认间距。

在“Text margin ”字段中,以像素为单位设置文本周围的边距。

内边距

Padding ”部分中各属性的值用于指定内容周围的内边距。除非您显式设置,否则各个内边距属性将采用“Global ”字段的值。

填充部分

注意:如果 显式设置了文本编辑框或输入框的宽度或高度,请确保其尺寸足够大,以容纳内边距值。如果文本没有足够的垂直或水平空间进行渲染,则会出现内容被截断的情况。

占位符文本

对于Text FieldText Area 控件,您可以指定在用户输入文本之前在字段中显示的文本。在“Placeholder text ”字段中指定文本,并在“Placeholder color ”字段中指定其颜色。

占位符文本设置

选择“Hover ”可使文本字段支持悬停事件。

文本组件概述

下表列出了可用于在用户界面中添加文本的组件。“位置”列包含在Components 中查找该组件的选项卡名称。“MCU支持”列标明了哪些组件在MCU上受支持。

图标名称位置MCU支持用途
Label 组件LabelQt Quick 控制一个继承了样式和字体的文本标签。
“文本”组件Text默认组件 - 基础格式化的只读文本。
“文本区域”组件Text AreaQt Quick 控件多行可编辑的格式化文本。
“文本编辑”组件Text Edit默认组件 - 基本一行可编辑且经过格式化的文本,可进行验证。
“文本字段”组件Text FieldQt Quick 控件一行可编辑的纯文本。
“文本输入”组件Text Input默认组件 - 基本一行可编辑的纯文本,支持验证。

另请参阅 《操作指南:使用 UI 组件》、《Qt Quick UI 设计》以及《设计Qt Quick UI》。

Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.