QML Examples - Text

This is a collection of QML examples relating to text

This is a collection of small QML examples relating to text. Each example is a small QML file, usually containing or emphasizing a particular element or feature. You can run and observe the behavior of each example.

'Hello' shows how to change and animate the letter spacing of a Text element. It uses a sequential animation to first animate the font.letterSpacing property from 0 to 50 over 3 seconds and then move the text to a random position on screen:

'Fonts' shows different ways of using fonts with the Text element. Simply by name, using the font.family property directly:

or using a FontLoader element:

or using a FontLoader and specifying a local font file:

or finally using a FontLoader and specifying a remote font file:

'Available Fonts' shows how to use the QML global Qt object and a list view to display all the fonts available on the system. The ListView element uses the list of fonts available as its model:

Inside the delegate, the font family is set with the modelData:

'Banner' is a simple example showing how to create a banner using a row of text elements and a NumberAnimation.

'Img tag' shows different ways of displaying images in a text elements using the <img> tag.

'Text Layout' shows how to create a more complex layout for a text element. This example lays out the text in two columns using the onLineLaidOut handler that allows you to position and resize each line:

Files:

• text/styledtext-layout.qml
• text/text.qml
• text/fonts/availableFonts.qml
• text/fonts/banner.qml
• text/fonts/fonts.qml
• text/fonts/hello.qml
• text/imgtag/TextWithImage.qml
• text/imgtag/imgtag.qml
• text/textselection/textselection.qml
• text/main.cpp
• text/text.pro
• text/text.qmlproject
• text/text.qrc