Upute: aplikacija Qt Quick

Ovaj vodič ilustrira osnovne koncepte Qt Quick. Za više informacija o mogućnostima korisničkog sučelja pogledajte odjeljak Korisnička sučelja.

Ovaj vodič opisuje kako koristiti Qt Creator za implementaciju stanja i prijelaza kada se Qt 6 koristi kao minimalna verzija Qt-a, a CMake kao sustav za izgradnju.

Koristit ćete način uređivanja za izradu aplikacije koja pomiče Qt logotip između tri pravokutnika kada ih odaberete.

Za više primjera pogledajte Primjere i tutorijale zaQt Quick .

Qt Quick Možete koristiti grafički uređivač za razvoj aplikacija za Qt Quick 3D u Qt Design Studio u. Za više informacija pogledajte dokumentaciju zaQt Design Studio.

Kreira projekt

1. Idite na File > New Project > Application (Qt) > Qt Quick Application.

   

2. Odaberite Choose za otvaranje dijaloga Project Location.
3. U prozoru Name unesite naziv aplikacije. Prilikom imenovanja vlastitih projekata imajte na umu da ih kasnije ne možete lako preimenovati.
4. U prozoru Create in unesite putanju do datoteka projekta. Mapu projekta možete kasnije premjestiti bez problema.
5. Odaberite Next za otvaranje dijaloga Define Project Details.

   

6. Odaberite Next za otvaranje dijaloga Kit Selection.
7. Odaberite Qt 6.5 ili novije kitove za platforme za koje želite izraditi aplikaciju. Za izradu aplikacija za mobilne uređaje odaberite i kitove za Android i iOS.

   Napomena: Popis prikazuje kitove koje ste naveli u Postavke > Kits. Za više informacija pogledajte odjeljke Dodavanje kitova i Kitovi.

   Odaberite xml-ph-0000@deepl.internal da biste otvorili dijalog xml-ph-0001@deepl.internal.
8. Odaberite Next za otvaranje dijaloga Project Management.
9. Pregledajte postavke projekta i odaberite Finish (ili Done na macOS-u) za stvaranje projekta.

Qt Creator generira datoteku komponente, Main.qml, i otvara je u načinu Edit.

Deploy aplikacije

Glavni prikaz aplikacije prikazuje Qt logotip unutar pravokutnika u gornjem lijevom kutu prikaza i dva prazna pravokutnika.

Da bi se slika prikazala kada pokrenete aplikaciju, morate je navesti kao resurs u odjeljku RESOURCES datoteke CMakeLists.txt koju je čarobnjak stvorio za vas:

qt_add_qml_module(apptransitions
    URI transitions
    VERSION 1.0
    QML_FILES Main.qml Page.qml
    RESOURCES qt-logo.png
)

Stvorite prilagođenu QML vrstu

Budući da QML tip Window zahtijeva da u podređene komponente dodate stanja, upotrijebite čarobnjak za izradu prilagođenog QML tipa nazvanog Page na koji se pozivate iz Main.qml.

Za izradu prilagođene QML vrste:

1. Idite na File > New File.
2. Odaberite Qt > QML File (Qt Quick 2).
3. Odaberite Choose za otvaranje dijaloga Location.
4. U prozoru File name unesite naziv za prilagođeni QML tip: Page.
5. Odaberite Next za otvaranje dijaloga Project Management.
6. Odaberite Finish za stvaranje Page.qml.

Qt Creator otvara Page.qml u načinu Edit. Ima korijenski element tipa Item. Zamijenite ga elementom tipa Rectangle. Dodijelite elementu ID page, privežite ga za roditeljski element sa svih strana i postavite mu boju na bijelu:

import QtQuick

Rectangle {
    id: page
    anchors.fill: parent
    color: "#ffffff"

Kada počnete upisivati naziv QML tipa, Qt Creator predlaže dostupne tipove i svojstva za dovršavanje koda.

Odaberite ikonu žarulje pokraj naziva tipa kako biste otvorili alatnu traku koju možete koristiti za određivanje svojstava pravokutnika, kao što su boja, prozirnost i gradijenti.

Zatim dodajte tip Image s qt-logo.png kao izvorom. Možete koristiti i bilo koju drugu sliku ili komponentu. Postavite sliku u gornji lijevi kut pravokutnika:

    Image {
        id: icon
        x: 20
        y: 20
        source: "qt-logo.png"
    }

Koristite alatnu traku za slike za postavljanje svojstava slike, kao što su izvorna datoteka i način popunjavanja.

Sada stvorite pravokutnike između kojih će se slika pomicati. Njihova veličina treba odgovarati veličini slike i trebaju biti prozirni kako bi slika bila vidljiva. Postavite boju okvira na svijetlosivu kako biste vidjeli pravokutnike:

    Rectangle {
        id: topLeftRect
        width: 55
        height: 41
        color: "#00ffffff"
        border.color: "#808080"

Privežite pravokutnike za njihov roditelj kako biste ih pozicionirali u njegov gornji lijevi i donji lijevi kut, kao i u vertikalni centar njegove desne ivice. Sljedeći isječak koda privezuje pravokutnik za gornji lijevi kut njegovog roditelja:

        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 20
        anchors.topMargin: 20

Dodajte tip MouseArea kako biste omogućili korisnicima klik na pravokutnik:

        MouseArea {
            id: mouseArea
            anchors.fill: parent

Da biste provjerili svoj kod, usporedite ga s primjerom datoteke Page.qml.

Zatim omogućite da se slika pomiče između pravokutnika kada korisnici kliknu na njih dodavanjem stanja i povezivanjem klikova miša s promjenama stanja.

Povežite klikove miša s promjenama stanja

Kako biste omogućili pomicanje slike između pravokutnika kada ih korisnici odaberu, dodajte stanja komponenti Page u kojima mijenjate vrijednosti svojstava x i y ikone kako bi odgovarale vrijednostima srednjeg desnog i gornjeg lijevog pravokutnika. Kako biste osigurali da slika ostane unutar pravokutnika kada se prikaz skalira na različitim veličinama zaslona, povežite vrijednosti svojstava x i y ikone s vrijednostima pravokutnika:

    ...
    states: [
        State {
            name: "State1"
        },
        State {
            name: "State2"

            PropertyChanges {
                target: icon
                x: middleRightRect.x
                y: middleRightRect.y
            }
        },
        State {
            name: "State3"

            PropertyChanges {
                target: icon
                x: bottomLeftRect.x
                y: bottomLeftRect.y
            }
        }
    ]

Zatim povežite signale onClicked na područjima miša s promjenama stanja:

            Connections {
                target: mouseArea
                function onClicked()
                {
                    page.state = "State1"
                }

Budući da razvijate s Qt 6, veze morate navesti kao funkcije.

Dodajte stranicu u glavni prikaz

Otvorite Main.qml za uređivanje i dodajte instancu prilagođene komponente Page:

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Transitions")

    Page {
        id: page
        anchors.fill: parent
    }
}

Odaberite Ctrl+R za pokretanje aplikacije, a zatim odaberite pravokutnike kako biste premjestili Qt logotip iz jednog pravokutnika u drugi.

Animirajte prijelaze

Stvorite prijelaze za primjenu animacije na sliku. Na primjer, slika se odbija kada se pomakne na middleRightRect i polako prelazi u bottomLeftRect.

Navedite prijelaze za prebacivanje iz svakog stanja u druga dva stanja:

    transitions: [
        Transition {
            id: toState1
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "y"
                        duration: 200
                    }
                }

                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "x"
                        duration: 200
                    }
                }
            }
            to: "State1"
            from: "State2,State3"
        },

Promijenite tip krivulje ublažavanja za prijelaze na stanje State2 s linearnog na Easing.OutBounce kako biste stvorili efekt odskoka:

        Transition {
            id: toState2
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "y"
                        easing.type: Easing.OutBounce
                        duration: 1006
                    }
                }

                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "x"
                        easing.type: Easing.OutBounce
                        duration: 1006
                    }
                }
            }
            to: "State2"
            from: "State1,State3"
        },

Zatim promijenite tip krivulje ublažavanja za prijelaze u stanje State2 s linearnog na eksponencijalni ( Easing.InOutQuad ) kako biste stvorili efekt odskoka:

        Transition {
            id: toState3
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "y"
                        easing.type: Easing.InOutQuad
                        duration: 2000
                    }
                }

                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: icon
                        property: "x"
                        easing.type: Easing.InOutQuad
                        duration: 2000
                    }
                }
            }
            to: "State3"
            from: "State1,State2"
        }
    ]
}

Pritisnite Ctrl+R za pokretanje aplikacije, a zatim odaberite pravokutnike kako biste vidjeli animirane prijelaze.

Datoteke:

• transitions/CMakeLists.txt
• transitions/Page.qml
• transitions/main.qml

Slike:

• transitions/qt-logo.png