Qt Quick Exemples - Texte

Texte est une collection de petits exemples QML relatifs au texte. Chaque exemple est un petit fichier QML, qui contient ou met en valeur un type ou une caractéristique particulière. Vous pouvez exécuter et observer le comportement de chaque exemple.

Bonjour

Hello montre comment modifier et animer l'espacement des lettres d'un type Text. Il utilise une animation séquentielle pour animer d'abord la propriété font.letterSpacing de 0 à 50 sur trois secondes, puis pour 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

Fonts montre différentes façons d'utiliser les polices avec le type Text. Simplement par leur nom, en utilisant directement la propriété font.family :

            font.family: "Times"

ou en utilisant un 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: "http://www.princexml.com/fonts/steffmann/Starburst.ttf"
    }

Polices disponibles

Polices disponibles montre comment utiliser l'objet global Qt et une vue en 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()

Dans le délégué, la famille de polices est définie à l'aide de modelData :

                font.family: parent.modelData

Banner

Banner est un exemple simple qui montre comment créer une bannière à l'aide d'une rangée de types de texte et d'un NumberAnimation.

Balise Img

La baliseImg montre différentes façons d'afficher des images dans des objets texte à l'aide de la balise <img>.

Mise en page du texte

La mise en pagede texte montre comment créer une mise en page plus complexe pour un élément de texte. Cet exemple présente le texte sur deux colonnes en utilisant le 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