Primeros pasos con QML

Creación de un documento QML

Un documento QML define una jerarquía de objetos con un diseño altamente legible y estructurado. Cada documento QML consta de dos partes: una sección de importaciones y una sección de declaración de objetos. Los tipos y funcionalidades más comunes de las interfaces de usuario se proporcionan en la importación QtQuick.

Importar y utilizar el módulo QtQuick

Para utilizar el módulo Qt Quick un documento QML debe importarlo. La sintaxis de importación es la siguiente:

import QtQuick

Los tipos y la funcionalidad que Qt Quick pueden utilizarse en el documento QML.

Definición de una jerarquía de objetos

La declaración de objetos en un documento QML define lo que se mostrará en la escena visual. Qt Quick Proporciona los bloques de construcción básicos para todas las interfaces de usuario, como los objetos para mostrar imágenes y texto y para manejar la entrada del usuario.

Una declaración de objeto simple puede ser una ventana de color con texto centrado en ella:

Window {
    width: 640
    height: 480
    visible: true
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

Esto define una jerarquía de objetos con un objeto raíz Window que tiene un objeto hijo Text. La propiedad parent del objeto Text se añade automáticamente a la propiedad Window, y de forma similar, el objeto Text se añade a la propiedad children del objeto Window, por QML.

Puesta en común

Los tipos Window y Text utilizados en el ejemplo anterior los proporciona la importación QtQuick. Juntando la importación y la declaración de objeto, obtenemos un documento QML completo:

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

Si guardamos ese documento como "HolaMundo.qml", podremos cargarlo y visualizarlo.

Creación y ejecución de proyectos QML

Para visualizar la escena gráfica definida por el documento QML, se puede cargar con Qt Creator. Para crear un nuevo proyecto QML en Qt Creator:

1. Seleccione File > New Project > Qt Quick Application desde Qt Creator.
2. Introduzca un nombre para el proyecto y seleccione una ubicación para guardarlo.
3. Seleccione la versión de Qt adecuada y, opcionalmente, configure los ajustes de control de versiones para el proyecto.
4. Revise el resumen de la configuración de su proyecto y continúe para completar la construcción del proyecto.

Cuando termine, Qt Creator generará los archivos necesarios y abrirá el proyecto para su desarrollo. Pulsando el botón verde Ejecutar se ejecuta la aplicación. Debería ver el texto Hello, World! en el centro de un rectángulo rojo.

Para más información sobre la creación y ejecución de proyectos en Qt Creator, visite las siguientes páginas:

• Qt Creator: Crear aplicaciones Qt Quick
• Qt Creator: Tutorial: Crear y ejecutar

Creación de aplicaciones QML con controles

Mientras que Qt Quick proporciona elementos gráficos básicos, Qt Quick Controls proporciona tipos QML listos para usar dentro de una aplicación.

Insertar el tipo ApplicationWindow es un buen punto de partida para crear aplicaciones. La interfaz de usuario de una aplicación tiene esta disposición básica:

Dentro de cada área, se pueden añadir y conectar diferentes controles para formar una aplicación. Por ejemplo, el siguiente fragmento es una aplicación básica que demuestra el uso del espacio disponible:

//import related modules
import QtQuick
import QtQuick.Controls

//window containing the application
ApplicationWindow {
    width: 640
    height: 480
    visible: true
    //title of the application
    title: qsTr("Hello World")

    //menu containing two menu items
    header: MenuBar {
        Menu {
            title: qsTr("&File")
            Action {
                text: qsTr("&Open...")
                onTriggered: console.log("Open action triggered")
            }
            MenuSeparator { }
            Action {
                text: qsTr("&Exit")
                onTriggered: Qt.quit()
            }
        }
    }

    //Content Area

    //a button in the middle of the content area
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

La aplicación tiene dos elementos de menú y un botón en el centro. Al hacer clic en el elemento de menú Exit se cierra la aplicación.

También hay diferentes métodos de navegación y diferentes controles como botones y deslizadores. Los siguientes ejemplos están disponibles en Qt Creator y muestran diferentes controles y diseños.

• Diseños básicos
• Qt Quick Controls - Galería de imágenes

Siéntete libre de copiar y pegar los fragmentos en esta sencilla aplicación Hello World para ver cómo funciona QML.

Manejo de la entrada del usuario

Una de las grandes ventajas de utilizar QML para definir una interfaz de usuario es que permite al diseñador de la interfaz de usuario definir cómo debe reaccionar la aplicación ante los eventos con sencillas expresiones de JavaScript. En QML, nos referimos a estos eventos como señales y estas señales son manejadas por manejadores de señales.

Por ejemplo, considere el siguiente ejemplo:

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: isRed ? "red" : "blue"
    visible: true

    property bool isRed: true  // Track the color state

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    TapHandler {
        onTapped: root.isRed = !root.isRed  // Toggle state
    }
}

Este ejemplo puede guardarse como "ClickableHelloWorld.qml" y ejecutarse con qml, la herramientaQML Runtime . Cada vez que el usuario haga clic en cualquier parte de la ventana, el rectángulo cambiará de rojo a azul. Si vuelve a hacer clic, volverá a ser rojo.

La entrada de usuario del teclado puede ser manejada de manera similar con una simple expresión:

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true

    Text {
        id: myText
        anchors.centerIn: parent
        text: toggle ? "Hello, World!" : "Goodbye, World!"
        focus: true
        property bool toggle: true
        Keys.onReturnPressed: (event)=>{
            myText.toggle = !myText.toggle;
            event.accepted = true;
        }
    }
}

Ahora, cada vez que pulses la tecla Intro, el texto alternará entre "Hola, Mundo" y "Adiós, Mundo".

Propiedades

Los objetos y sus propiedades constituyen la base de una interfaz gráfica definida en un documento QML. El lenguaje QML permite vincular las propiedades entre sí de diversas maneras, lo que permite crear interfaces de usuario muy dinámicas.

En el siguiente ejemplo, la geometría de cada objeto hijo Rectangle está vinculada a la del objeto padre Window. Si la geometría del objeto padre Window cambiara, la geometría de cada objeto hijo Rectangle se actualizaría automáticamente debido a las propiedades vinculadas.

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true


    Rectangle {
        width: root.width / 2
        height: root.height
        color: "blue"
    }

    Rectangle {
        width: root.width / 2
        height: root.height
        x: root.width / 2
        color: "green"
    }
}

Animaciones

Las propiedades también pueden actualizarse dinámicamente mediante animaciones. La importación de QtQuick proporciona varios tipos de animación que pueden utilizarse para animar los cambios en el valor de una propiedad. En el siguiente ejemplo, se anima una propiedad que se muestra en un área de Text:

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true

    property int animatedValue

    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation {
            to: 150
            duration: 1000
        }
        PropertyAnimation {
            to: 0
            duration: 1000
        }
    }

    Text {
        anchors.centerIn: parent
        text: root.animatedValue
    }
}

El valor mostrado variará de 0 a 150 periódicamente.

Definición de tipos QML personalizados para su reutilización

Uno de los conceptos más importantes de QML es la reutilización de tipos. Una aplicación probablemente tendrá múltiples tipos visuales que son todos similares (por ejemplo, múltiples botones pulsadores), y QML permite definir este tipo de cosas como tipos personalizados reutilizables, para minimizar la duplicación de código y maximizar la legibilidad.

Por ejemplo, imagine que el desarrollador define un nuevo tipo MessageLabel en el archivo MessageLabel.qml:

// MessageLabel.qml
import QtQuick

Rectangle {
    height: 50
    property string message: "debug message"
    property var msgType: ["debug", "warning" , "critical"]
    color: "black"

    Column {
        anchors.fill: parent
        padding: 5.0
        spacing: 2
        Text {
            text: msgType.toString().toUpperCase() + ":"
            font.bold: msgType == "critical"
            font.family: "Terminal Regular"
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            ColorAnimation on color {
                running: msgType == "critical"
                from: "red"
                to: "black"
                duration: 1000
                loops: msgType == "critical" ? Animation.Infinite : 1
            }
        }
        Text {
            text: message
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            font.family: "Terminal Regular"
        }
    }

}

Ese tipo puede ahora reutilizarse varias veces en la aplicación, como se indica a continuación:

// application.qml import QtQuick Window { id: root width: 180 height: 180 visible: true Column { anchors.fill: parent padding: 1.5 topPadding: 10.0 bottomPadding: 10.0 spacing: 5 MessageLabel{ width: root.width - 2 msgType: "debug" } MessageLabel { width: root.width - 2 message: "This is a warning!" msgType: "warning" } MessageLabel { width: root.width - 2 message: "A critical warning!" msgType: "critical" } } }

De este modo, los tipos modulares de interfaz de usuario se ensamblan y reutilizan dentro de una aplicación.

Consulte Atributos de objetos QML para obtener más información sobre cómo desarrollar sus propios componentes reutilizables.

Qué hacer a partir de ahora

Ahora que ha visto QML en acción, está preparado para dar el siguiente paso. La siguiente página le guiará en su viaje con QML.

• Aplicaciones QML
• Qt Quick Ejemplos y tutoriales