qml Samouczek
Rozpoczęcie pracy z qml

Uwagi

Wersje

Instalacja

QML zawiera nowszą wersję międzyplatformowej struktury aplikacji Qt . Najnowszą wersję Qt można znaleźć w sekcji Pliki do pobrania .

Aby utworzyć nowy projekt QML w środowisku IDE Qt Creator , wybierz „Plik -> Nowy ...”, aw obszarze „Aplikacje” wybierz „Szybka aplikacja Qt”. Po kliknięciu „wybierz” możesz teraz nazwać i ustawić ścieżkę dla tego projektu. Po naciśnięciu przycisku „Dalej” możesz wybrać komponenty, których chcesz użyć, jeśli nie jesteś pewien, po prostu pozostaw domyślny i kliknij „Dalej”. Dwa następne kroki pozwolą ci skonfigurować Kit i kontrolę źródła, jeśli chcesz, w przeciwnym razie zachowaj ustawienia domyślne.

Utworzyłeś teraz prostą i gotową do użycia aplikację QML.

Witaj świecie

Prosta aplikacja wyświetlająca tekst „Hello World” na środku okna.

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

Tworzenie prostego przycisku

Możesz łatwo przekształcić każdy składnik w klikalny przycisk za pomocą składnika MouseArea. Poniższy kod wyświetla okno 360x360 z przyciskiem i tekstem na środku; naciśnięcie przycisku zmieni tekst:

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

Wyświetl zdjęcie

Ten przykład pokazuje najprostsze użycie komponentu Image do wyświetlenia obrazu.

Właściwość source obrazu to typ adresu URL, który może być plikiem ze ścieżką bezwzględną lub względną, internetowym adresem URL ( http:// ) lub zasobem Qt ( qrc:/ )

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Wydarzenie myszy

Ten przykład pokazuje, jak zdarzenie myszy jest używane w 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.")
            }

        }
    }


}