Qt Quick Exemples - Texte

« Texte » est une collection de petits exemples QML relatifs au texte. Chaque exemple est un petit fichier QML, contenant ou mettant généralement en avant un type ou une fonctionnalité particulière. Vous pouvez exécuter chaque exemple et observer son comportement.

Bonjour

L'exemple « Bonjour » montre comment modifier et animer l'espacement des lettres d'un type « Text ». Il utilise une animation séquentielle pour d'abord animer la propriété `font.letterSpacing` de ` 0 ` à ` 50 ` sur une durée de trois secondes, puis déplacer le texte vers une position aléatoire à l'écran :

            SequentialAnimation on font.letterSpacing {
                loops: Animation.Infinite
                NumberAnimation {
                    from: 0
                    to: 50
                    easing.type: Easing.InQuad
                    duration: 3000
                }
                ScriptAction {
                    script: {
                        container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
                        container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
                    }
                }
            }

Polices

« Polices » présente différentes façons d’utiliser des polices avec le type ` Text `. Soit simplement par nom, en utilisant directement la propriété `font.family` :

            font.family: "Times"

ou en utilisant un objet ` FontLoader ` et en spécifiant un fichier de police local :

    FontLoader {
        id: localFont
        source: "content/fonts/tarzeau_ocr_a.ttf"
    }

ou enfin en utilisant un « FontLoader » et en spécifiant un fichier de police distant :

    FontLoader {
        id: webFont
        source: "https://www.princexml.com/fonts/steffmann/Starburst.ttf"
    }

Polices disponibles

La section «Polices disponibles » montre comment utiliser l’objet global « Qt » et une vue de liste pour afficher toutes les polices disponibles sur le système. Le type « ListView » utilise la liste des polices disponibles comme modèle :

        model: Qt.fontFamilies()

À l’intérieur du délégué, la famille de polices est définie via modelData :

                font.family: parent.modelData

Bannière

« Bannière » est un exemple simple montrant comment créer une bannière à l’aide d’une ligne de types de texte et d’un objet NumberAnimation.

Balise Img

La balise Img présente différentes façons d’afficher des images dans des objets texte à l’aide de la balise <img>.

Mise en page du texte

Mise en page du texte montre comment créer une mise en page plus complexe pour un élément de texte. Cet exemple organise le texte en deux colonnes à l'aide du gestionnaire onLineLaidOut, qui permet de positionner et de redimensionner chaque ligne :

        onLineLaidOut: (line) => {
            line.width = width / 2  - main.margin

            if (line.y + line.height >= height) {
                line.y -= height - main.margin
                line.x = width / 2 + main.margin
            }

            if (line.isLast) {
                lastLineMarker.x = line.x + line.implicitWidth
                lastLineMarker.y = line.y + (line.height - lastLineMarker.height) / 2
            }
        }

Exemple de projet @ code.qt.io