Tutorial QML 1 - Tipos de valores

Este primer programa es un ejemplo muy simple de "Hola mundo" que introduce algunos conceptos básicos de QML. La imagen de abajo es una captura de pantalla de este programa.

Aquí está el código QML para la aplicación:

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }
}

Tutorial

Importar

En primer lugar, tenemos que importar los tipos que necesitamos para este ejemplo. La mayoría de los archivos QML importarán los tipos QML incorporados (como Rectangle, Image, ...) que vienen con Qt, usando:

import QtQuick

Tipo Rectángulo

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

Declaramos un objeto raíz de tipo Rectangle. Es uno de los bloques básicos que puedes usar para crear una aplicación en QML. Le damos un id para poder referirnos a él más adelante. En este caso, lo llamamos "página". También establecemos las propiedades width, height y color. El tipo Rectangle contiene muchas otras propiedades (como x y y), pero éstas se dejan en sus valores por defecto.

Tipo de texto

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

Añadimos un tipo Text como hijo del tipo raíz Rectángulo que muestra el texto "¡Hola mundo!".

La propiedad y se utiliza para posicionar el texto verticalmente a 30 píxeles de la parte superior de su padre.

La propiedad anchors.horizontalCenter se refiere al centro horizontal de un tipo. En este caso, especificamos que nuestro tipo de texto debe estar centrado horizontalmente en el elemento de página (véase Maquetación basada en anclajes).

Las propiedades font.pointSize y font.bold están relacionadas con las fuentes y utilizan la notación de puntos.

Visualización del ejemplo

Para ver lo que ha creado, ejecute la herramienta qml (ubicada en el directorio bin ) con su nombre de archivo como primer argumento. Por ejemplo, para ejecutar el ejemplo Tutorial 1 desde la ubicación de instalación, escriba:

qml tutorials/helloworld/tutorial1.qml