Qt Quick Ejemplos - Texto

Texto es una colección de pequeños ejemplos QML relacionados con el texto. Cada ejemplo es un pequeño archivo QML, que normalmente contiene o enfatiza un tipo o característica particular. Puedes ejecutar y observar el comportamiento de cada ejemplo.

Hola

Hola muestra cómo cambiar y animar el espaciado entre letras de un tipo Text. Utiliza una animación secuencial para animar primero la propiedad font.letterSpacing de 0 a 50 a lo largo de tres segundos y luego mover el texto a una posición aleatoria en la pantalla:

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

Fuentes

Fonts muestra diferentes formas de utilizar fuentes con el tipo Text. Simplemente por el nombre, usando la propiedad font.family directamente:

            font.family: "Times"

o usando un FontLoader y especificando un archivo de fuentes local:

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

o finalmente usando un FontLoader y especificando un archivo de fuentes remoto:

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

Fuentes disponibles

Fuentes disponibles muestra cómo utilizar el objeto global Qt y una vista de lista para mostrar todas las fuentes disponibles en el sistema. El tipo ListView utiliza la lista de fuentes disponibles como modelo:

        model: Qt.fontFamilies()

Dentro del delegado, la familia de fuentes se establece con el modelData:

                font.family: parent.modelData

Banner

Banner es un ejemplo sencillo que muestra cómo crear un banner utilizando una fila de tipos de texto y una etiqueta NumberAnimation.

Etiqueta Img

La etiquetaImg muestra diferentes formas de mostrar imágenes en objetos de texto utilizando la etiqueta <img>.

Disposición del texto

Text Layout muestra cómo crear un diseño más complejo para un elemento de texto. Este ejemplo dispone el texto en dos columnas utilizando el manejador onLineLaidOut que permite posicionar y redimensionar cada línea:

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

Proyecto de ejemplo @ code.qt.io