qml Handledning
Komma igång med qml

Anmärkningar

versioner

Installation

QML kommer med en nyare version av applikationsramen för plattformar Qt . Du hittar den senaste versionen av Qt i avsnittet Nedladdningar .

För att skapa ett nytt QML-projekt i Qt Creator IDE väljer du "File -> New ..." och under "Applications" väljer du "Qt Quick-Application". Efter att ha klickat på "välj" kan du nu namnge och ställa in sökvägen för detta projekt. Efter att ha tryckt på "nästa" kan du välja vilka komponenter du vill använda, om du är osäker lämnar du bara standard och klickar på "nästa". De två nästa stegen låter dig konfigurera en Kit och Source Control om du vill, annars behåller standardinställningarna.

Du har nu skapat en enkel och redo att använda QML-applikation.

Hej världen

En enkel applikation som visar texten "Hello World" i mitten av fönstret.

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

Skapa en enkel knapp

Du kan enkelt transformera varje komponent i en klickbar knapp med MouseArea-komponenten. Koden nedan visar ett 360x360-fönster med en knapp och en text i mitten; genom att trycka på knappen ändras texten:

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

Visa en bild

Detta exempel visar den enklaste användningen av bildkomponenten för att visa en bild.

Bild source egendom är en url typ som kan vara antingen en fil med en absolut eller relativ sökväg, en Internet-URL ( http:// ) eller en Qt resurs ( qrc:/ )

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Mushändelse

Detta exempel visar hur mushändelse används i 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.")
            }

        }
    }


}