qml Tutorial
Iniziare con qml

Osservazioni

Versioni

Installazione

QML viene fornito con la versione più recente del framework applicativo multipiattaforma Qt . Puoi trovare la versione più recente di Qt nella sezione Download .

Per creare un nuovo progetto QML nell'ID Qt Creator , selezionare "File -> Nuovo ..." e in "Applicazioni" selezionare "Applicazione rapida Qt". Dopo aver cliccato su "seleziona" puoi ora nominare e impostare il percorso per questo progetto. Dopo aver premuto "next" è possibile selezionare i componenti che si desidera utilizzare, in caso di dubbi basta lasciare il valore predefinito e fare clic su "next". I due passaggi successivi ti permetteranno di configurare un kit e il controllo del codice sorgente se lo desideri, altrimenti manterrai le impostazioni predefinite.

Ora hai creato un'applicazione QML semplice e pronta all'uso.

Ciao mondo

Una semplice applicazione che mostra il testo "Hello World" al centro della finestra.

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

Creare un semplice pulsante

Puoi facilmente trasformare ogni componente in un pulsante cliccabile usando il componente MouseArea. Il codice seguente mostra una finestra 360x360 con un pulsante e un testo al centro; premendo il pulsante cambierà il testo:

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

Mostra un'immagine

Questo esempio mostra l'uso più semplice del componente Immagine per visualizzare un'immagine.

La proprietà Image source è un tipo di URL che può essere un file con un percorso assoluto o relativo, un URL internet ( http:// ) o una risorsa Qt ( qrc:/ )

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Evento del mouse

Questo esempio mostra come viene utilizzato l'evento del mouse in 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.")
            }

        }
    }


}