Qt Quick Beispiele – Text

„Text“ ist eine Sammlung kleiner QML-Beispiele zum Thema Text. Jedes Beispiel ist eine kleine QML-Datei, die in der Regel einen bestimmten Typ oder eine bestimmte Funktion enthält oder hervorhebt. Sie können jedes Beispiel ausführen und das Verhalten beobachten.

Hallo

„Hallo“ zeigt, wie man den Buchstabenabstand eines „ Text “-Typs ändern und animieren kann. Dabei wird eine sequenzielle Animation verwendet, um zunächst die Eigenschaft „font.letterSpacing“ über drei Sekunden hinweg von „ 0 “ auf „ 50 “ zu animieren und anschließend den Text an eine zufällige Position auf dem Bildschirm zu verschieben:

            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)
                    }
                }
            }

Schriftarten

„Schriftarten“ zeigt verschiedene Möglichkeiten zur Verwendung von Schriftarten mit dem Typ „ Text “. Einfach über den Namen, indem die Eigenschaft „font.family“ direkt verwendet wird:

            font.family: "Times"

oder durch Verwendung eines „ FontLoader “ und Angabe einer lokalen Schriftartdatei:

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

oder schließlich mithilfe eines „ FontLoader “ und durch Angabe einer entfernten Schriftartdatei:

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

Verfügbare Schriftarten

„Verfügbare Schriftarten“ zeigt, wie man das globale Objekt „ Qt “ und eine Listenansicht nutzt, um alle auf dem System verfügbaren Schriftarten anzuzeigen. Der Typ „ ListView “ verwendet die Liste der verfügbaren Schriftarten als Modell:

        model: Qt.fontFamilies()

Innerhalb des Delegaten wird die Schriftfamilie über „modelData“ festgelegt:

                font.family: parent.modelData

Banner

„Banner“ ist ein einfaches Beispiel, das zeigt, wie man mithilfe einer Reihe von Texttypen und einem „ NumberAnimation “ ein Banner erstellt.

Img-Tag

„Img-Tag“ zeigt verschiedene Möglichkeiten, Bilder in Textobjekten mithilfe des „ <img> “-Tags anzuzeigen.

Textlayout

„Textlayout“ zeigt, wie man ein komplexeres Layout für ein Textelement erstellt. In diesem Beispiel wird der Text mithilfe des onLineLaidOut-Handlers zweispaltig angeordnet, wodurch Sie jede Zeile positionieren und in der Größe anpassen können:

        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
            }
        }

Beispielprojekt @ code.qt.io