You can use several different text components to add read-only or editable text to a UI, such as titles or labels and text input fields with placeholder text. The Text component adds formatted text, the TextEdit component adds a multiline line edit, and the TextInput component adds a single editable line field.
You can select the font to use and specify extensive properties for each text string, such as size in points or pixels, style name, emphasis, alignment, and spacing.
For more information, watch the following video:
To create a label with a background, use the Label component from the Qt Quick Controls module.
In the rich text editor, you can:
- Emphasize text
- Create hyperlinks
- Align text
- Create bulleted and numbered lists
- Specify text color
- Select text font
- Set font size
- Create tables
For each string that you enter in the Text field, you can select the font to use in the Font field and specify the size, emphasis, aligment, and spacing of the text. Specify the font size in either points or pixels in the Size field.
To display custom fonts in the list of available fonts in the Font field, you need to first add them to Library:
- Select Library > Assets > .
- Select the font file, and then select Open.
- Select the location where the file will be saved in the Add Resources dialog.
- Select OK.
You can use the buttons in the Font style group to emphasize text by making it bold, italic, underlined, or strikethrough.
Alternatively, select a font variant to use in the Style name field, such as Regular or Bold.
The value of the Word field in the Spacing group changes the default spacing between individual words, whereas the value of the Letter field changes the spacing between individual letters in a word. A positive value increases the spacing by a corresponding amount of pixels, while a negative value decreases it.
The value of the Line height field sets the line height for the text. In the Line height mode field, select FixedHeight to set the line height in pixels or ProportionalHeight (default) to set the spacing proportionally to the line (as a multiplier). For example, set to 2 for double spacing.
You can align text components horizontally and vertically. By default, text is vertically aligned to the top. Horizontal alignment follows the natural alignment of the text. By default, left-to-right text like English is aligned to the left side of the text area, whereas right-to-left text like Arabic is aligned to the right side of the text area.
You can align text to the left, right, top, or bottom, and center it horizontally or vertically. You can justify horizontal text.
For a single line of text, the size of the text is the area of the text. In this common case, all alignments are equivalent. To center a text in its parent, use anchoring or bind the width of the text component to that of the parent. For more information, see Setting Bindings.
You can set the color of the text itself and a secondary color used by text styles.
The color that you pick in the Style color field is used as the outline color for outlined text, and as the shadow color for raised or sunken text. You set the font style in the Style field of the Font section.
For the Text Edit and Text Input components, you can also set the color of selected text and the text highlight color that is used behind selections in the Selected text color and Selection color fields.
For more information about selecting colors, see Picking Colors. You can only set solid colors for text components.
The height and width of a text component are determined automatically depending on the values of the properties you set, to accommodate the length of the string that you specify in the Text field and the font size, for example.
The value of the Font size mode field specifies how the font size of the displayed text is determined. Select FixedSize to use the size specified in the Size field in pixels or points. Select HorizontalFit or VerticalFit to use the largest size up to the size specified that fits the width or height of the component. Select Fit to use the largest size up to the size specified that fits within the width and height of the component. The font size of fitted text has a minimum bound specified by the Minimum size field and maximum bound specified by the Size field.
In the Wrap mode field, you can wrap the text to the text component's width. The text will only wrap if you set an explicit width for the text component. By default, text is not wrapped. Select WordWrap to restrict wrapping to word boundaries only. Select WrapAnywhere to enable wrapping at any point on a line, even if it occurs in the middle of a word. Select Wrap to wrap at a word boundary, if possible, or at the appropriate point on the line, even in the middle of a word.
You can use the Elide property with the Wrap option to fit a single line of plain text to a set width. Select ElideRight, and set the Maximum line count or the text component height (in the H field). If you set both, the maximum line count will apply unless the lines do not fit in the height allowed.
If the text is a multi-length string, and you set the Elide property value to something else than ElideNone, the first string that fits will be used, otherwise the last will be elided.
Multi-length strings are ordered from longest to shortest, separated by the Unicode String Terminator character
In the Font weight field, you can select the font weight from list predefined values that range between extra-light and extra-bold.
In the Font capitalization field, select MixedCase for normal text rendering where no capitalization changes are applied. You can also set the text in all upper or lower case, or use small caps. The Capitalize option renders the first character of each word as an uppercase character.
Text can be either in plain text or rich text format, depending on the value you set in the Format field. If you select AutoText and the the first line of text contains an HTML tag, the text is treated as rich text. Rich text supports a subset of HTML 4 described on the Supported HTML Subset. Note that plain text offers better performance than rich text.
In the Render type field, you can override the default rendering type for a text component. Select NativeRendering if you prefer text to look native on the target platform and do not require advanced features such as transformation of the text. Using rotation or scaling in combination with native rendering leads to poor and sometimes pixelated results.
You can use the Text Edit and Text Input components to add text fields where users can enter text.
The Text Input component displays a single line of editable plain text, whereas the Text Edit component displays a block of editable, formatted text. Both components are used to accept text input.
In the Mouse selection mode field, you can specify whether individual characters or whole words are selected when selecting text.
In the Input mask field, you can create an input mask that contains mask and meta characters and separators between them. When created or cleared, the text edit or input is filled with a copy of the input mask string, where the meta characters have been removed, and the mask characters have been replaced with the blank character. For example, in an input field for an IP address, you could use the following mask (with the underscore as the blank character):
000.000.000.000;_. For more information about creating input masks, see the documentation for QLineEdit::inputMask.
In the Echo mode field, select Password to display platform-dependent password mask characters instead of the actual characters that users enter. Select PasswordEchoOnEdit to display characters as users enter them. The mask character is displayed in the Pass. char field.
In the Maximum length field, set the maximum number of characters that users can enter.
The value of the Auto scroll check box determines whether the text edit or input should scroll when the text is longer than the width of the input field.
If the Overwrite mode check box is selected, existing text is overwritten, character-for-character by new text. Otherwise, new text is inserted at the cursor position, displacing existing text. By default, new text does not overwrite existing text.
To prevent users from changing the text, select the Read only check box.
The value of the Set active focus on press check box determines whether the text edit or input should gain active focus on a mouse press.
By default, the cursor becomes visible when the text edit or input gains active focus, so that other properties can be bound to whether the cursor is currently shown. Because the value of the Cursor visible property gets set and unset automatically, any value you set yourself may be overwritten.
If the Persistent selection check box is selected, a text edit or input keeps its selection when active focus moves to another component.
To use a pointer device for selecting text, select the Select by mouse check box.
The values of the properties in the Padding section specify the padding around the content. The individual padding properties adopt the value of the Padding field, unless you set them explicitly.
Note: If you explicitly set the width or height of a text edit or input, ensure that it is large enough to accommodate the padding values. If the text does not have enough vertical or horizontal space in which to be rendered, it will appear clipped.
The following table lists the components that you can use to add text to UIs. The Location column contains the tab name where you can find the component in Library > Components. The MCU column indicates which components are supported on MCUs.
|Label||Qt Quick Controls||A text label with inherited styling and font.|
|Text||Default Components - Basic||Formatted read-only text.|
|Text Area||Qt Quick Controls||Multiple lines of editable formatted text.|
|Text Edit||Default Components - Basic||A single line of editable formatted text that can be validated.|
|Text Field||Qt Quick Controls||A single line of editable plain text.|
|Text Input||Default Components - Basic||A single line of editable plain text that can be validated.|
© 2021 The Qt Company Ltd. 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.