Primeros pasos con qml

Hola Mundo #

Una sencilla aplicación que muestra el texto “Hello World” en el centro de la ventana.

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

Instalación #

QML viene con una versión más reciente del marco de aplicación multiplataforma Qt. Puede encontrar la versión más reciente de Qt en la sección de descargas.

Para crear un nuevo proyecto QML en Qt Creator IDE, seleccione “Archivo -> Nuevo…” y en “Aplicaciones” seleccione “Qt Quick-Application”. Después de hacer clic en “seleccionar”, ahora puede nombrar y establecer la ruta para este proyecto. Después de presionar “siguiente”, puede seleccionar qué componentes desea usar, si no está seguro, deje el valor predeterminado y haga clic en “siguiente”. Los dos pasos siguientes le permitirán configurar un kit y un control de fuente si lo desea; de lo contrario, mantenga la configuración predeterminada.

Ahora ha creado una aplicación QML simple y lista para usar.

Creando un botón simple #

Puede transformar fácilmente cada componente en un botón en el que se puede hacer clic con el componente MouseArea. El siguiente código muestra una ventana de 360x360 con un botón y un texto en el centro; al pulsar el botón cambiará el texto:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button

        width: 100
        height: 30
        color: "red"
        radius: 5     // Let's round the rectangle's corner a bit, so it resembles more a button
        anchors.centerIn: parent

        Text {
            id: buttonText
            text: qsTr("Button")
            color: "white"
            anchors.centerIn: parent
        }

        MouseArea {
            // We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
            anchors.fill: parent

            // Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
            // Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
            onClicked: {
                buttonText.text = qsTr("Clicked");
                buttonText.color = "black";
            }
        }
    }
}

Mostrar una imagen #

Este ejemplo muestra el uso más simple del componente Imagen para mostrar una imagen.

La propiedad fuente de la imagen es un tipo de URL que puede ser un archivo con una ruta absoluta o relativa, una URL de Internet (http://) o un recurso Qt ( qrc:/)

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Evento de ratón #

Este ejemplo muestra cómo se usa el evento del mouse en QML.

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        anchors.fill: parent
        width: 120; height: 240
        color: "#4B7A4A"

        MouseArea {
            anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
            acceptedButtons:  Qt.AllButtons
            onClicked: {
                // print to console mouse location
                console.log("Mouse Clicked.")
                console.log("Mouse Location: <",mouseX,",",mouseY,">")

                //change Rectangle color
                if ( mouse.button === Qt.RightButton )
                    parent.color = 'blue'
                if ( mouse.button === Qt.LeftButton )
                    parent.color = 'red'
                if ( mouse.button === Qt.MiddleButton )
                    parent.color = 'yellow'
            }
            onReleased: {
                // print to console
                console.log("Mouse Released.")
            }
            onDoubleClicked: {
                // print to console
                console.log("Mouse Double Clicked.")
            }

        }
    }


}