qmlEmpezando con qml


Observaciones

QML es un acrónimo que significa Q t M eta-object L angles. Es un lenguaje de programación declarativo que forma parte del marco Qt. El objetivo principal de QML es la creación rápida y sencilla de interfaces de usuario para sistemas de escritorio, móviles e integrados. QML permite una integración perfecta de JavaScript , ya sea directamente en el código QML o mediante la inclusión de archivos JavaScript.

Versiones

Versión Qt Versión QtQuick Fecha de lanzamiento
4.7 1.0 2010-09-21
4.8 1.1 2011-12-15
5.0 2.0 2012-12-19
5.1 2.1 2013-06-03
5.2 2.2 2013-12-12
5.3 2.3 2014-05-20
5.4 2.4 2014-12-10
5.5 2.5 2015-07-01
5.6 2.6 2016-03-15
5.7 2.7 2016-06-16
5.8 2.7 2017-01-23

Creando un simple botón

Puede transformar fácilmente cada componente en un botón pulsable usando el componente MouseArea. El siguiente código muestra una ventana de 360x360 con un botón y un texto en el centro; presionando 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 de imagen para mostrar una imagen.

La propiedad source 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"
    }
}
 

Hola Mundo

Una aplicación sencilla que muestra el texto "Hola mundo" 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 framework de aplicaciones 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 el IDE de Qt Creator , seleccione "Archivo -> Nuevo ..." y en "Aplicaciones" seleccione "Aplicación rápida de Qt". Después de hacer clic en "seleccionar", ahora puede nombrar y establecer la ruta para este proyecto. Después de pulsar "siguiente", puede seleccionar qué componentes desea utilizar, si no está seguro, simplemente 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.

Evento del 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.")
            }

        }
    }


}