Upute: primjena Qt Quick

Ovaj vodič ilustrira osnovne koncepte Qt Quick. Pomoću modula Qt Quick možete izrađivati fluidne animirane korisničke sučelje u QML-u i povezati ih s pozadinskim C++ bibliotekama.

Modul Qt Quick pruža sve osnovne tipove potrebne za izradu korisničkih sučelja pomoću QML-a. Pruža vizualno platno i uključuje tipove za izradu i animaciju vizualnih komponenti, primanje korisničkih unosa i tako dalje. Za više informacija o mogućnostima korisničkog sučelja pogledajte odjeljak Korisnička sučelja.

Ovaj vodič opisuje primjernu aplikaciju koju generira čarobnjak za New Project. Ona uvozi QML tipove iz Qt Quick, Qt Quick Controls, i Qt Quick Layouts modula. Također stvara glavnu C++ izvornu datoteku za izgradnju i pokretanje aplikacije pomoću sustava za konfiguraciju izgradnje CMake.

Koristit ćete način uređivanja za pregled QML-a, C++ koda i CMake konfiguracije izgradnje projekta. Zatim ćete pokrenuti aplikaciju na Android ili iOS uređaju.

Qt Quick aplikacija stvorena pomoću novog čarobnjaka za projekte" src="images/qtquick-tutorial.webp" title="Qt Quick aplikacija stvorena pomoću novog čarobnjaka za projekte"/>

Za više primjera pogledajte Qt Quick primjere i tutorijale.

Postavite razvojno okruženje

Da biste izgradili aplikaciju za mobilni uređaj i pokrenuli je na njemu, morate postaviti razvojno okruženje za platformu uređaja i konfigurirati vezu između Qt Creator i mobilnog uređaja.

Za razvoj za Android uređaje morate instalirati Qt za Android i postaviti razvojno okruženje, prema uputama u odjeljku Developing for Android.

Za razvoj za iOS uređaje morate instalirati Qt za iOS. Također trebate instalirati Xcode i koristiti ga za konfiguriranje uređaja. Za to vam je potreban Appleov developer račun i certifikat iOS Developer Programa koji dobivate od Applea. Za više informacija pogledajte Razvoj za iOS.

Stvorite projekt

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

   

2. Odaberite Choose kako biste otvorili dijaloški okvir Project Location.
3. U prozoru Name unesite naziv za aplikaciju. 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 dijaloškog okvira Kit Selection.
7. Odaberite 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 Preferences > Kits. Za više informacija pogledajte Dodavanje kitova i Upravljanje kitovima.

8. Odaberite Next za otvaranje dijaloškog okvira 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.

Pregledajte aplikaciju

Glavni prikaz aplikacije prikazuje dva pravokutnika s pozadinskom bojom, tekstom i gumbom. Odabirom gumba aplikacija se prebacuje između svijetlog i tamnog načina rada.

• Za pretpregled aplikacije odaberite na gornjoj alatnoj traci.
• Za pokretanje aplikacije na radnoj površini odaberite .

Pregledajte QML kôd

Otvorite Main.qml da biste pregledali generirani QML kod.

QML uvozi

Datoteka sadrži izjave o uvozu za Qt module koji sadrže QML tipove korištene u aplikaciji:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basics

Glavni prozor

Datoteka sadrži instancu QML tipa ApplicationWindow, koja stvara glavni prozor. Svojstva prozora postavljaju početnu i minimalnu veličinu, kao i naslov prozora. Također određuju da je prozor vidljiv na zaslonu.

ApplicationWindow {
    id: window
    width: 640
    height: 480
    minimumWidth: 200
    minimumHeight: 250
    visible: true
    title: qsTr("Hello World")

    property bool lightMode: Application.styleHints.colorScheme === Qt.Light
    property color reallyDark: "#1f1f1f"
    property color dark: "#262626"
    property color reallyLight: "#e7e7e7"
    property color light: "#e0e0e0"

Prilagođena svojstva postavljaju boje aplikacije u svijetlom i tamnom načinu rada.

Raspored

Prozor sadrži instancu QML tipa GridLayout iz modula Qt Quick Layouts, koja pozicionira dvije instance tipa Rectangle u mrežu. Svojstva mreže postavljaju širinu stupca i razmak između redaka i stupaca, kao i povezuju veličinu mreže s veličinom prozora.

GridLayout {
    id: grid
    columns: width < 400 ? 1 : 2
    rowSpacing: 0
    columnSpacing: 0
    anchors.fill: parent

Ako širina stupca u pokrenutoj aplikaciji postane manja od 400 piksela, pravokutnici se postavljaju u jedan stupac.

Osnovni QML tipovi

Svaka instanca tipa Rectangle ima svojstva koja određuju ID tipa i boju. Boja pravokutnika vezana je za boju prozora u trenutnom načinu rada. Svojstva rasporeda (Layout) prilagođavaju pravokutnik ćeliji mreže.

Rectangle {
    id: rectangle1
    color: window.lightMode ? window.reallyLight : window.reallyDark
    Layout.fillHeight: true
    Layout.fillWidth: true

Oba pravokutnika sadrže ColumnLayout, koji pozicionira instance tipova Label i Button iz modula Qt Quick Controls.

ColumnLayout {
    anchors.fill: parent
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

Svojstva rasporeda poravnavaju stupac u gornjem središtu pravokutnika i postavljaju gornju i donju marginu rasporeda za pozicioniranje teksta i gumba.

Promijenite svojstva

Kada pregledate aplikaciju, možete promijeniti vrijednosti svojstava u kodu i odmah vidjeti promjene.

Eksperimentirajte mijenjajući boje, margini i poravnanje.

Qt Quick Controls

Modul Qt Quick Controls pruža skup kontrolnih elemenata za izradu cjelovitih korisničkih sučelja u Qt Quick u. Aplikacija sadrži instance kontrola Label i Button.

Oznaka

Svojstva Label -a postavljaju tekst naslova, kao i njegovu boju i veličinu u pikselsima. Također, oni centriraju tekst oznake vodoravno i okomito unutar širine i visine elementa, kao i prilagođavaju veličinu fonta kako bi se tekst uklopio u oznaku kada se promijeni širina stupca.

Svojstva Layout čine da se oznaka prilagodi ćeliji mreže s marginama od 16 piksela.

Label {
    id: text1
    color: window.lightMode ? window.dark : window.light
    font.pixelSize: 120
    fontSizeMode: Text.Fit
    text: qsTr("Hello World")
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.margins: 16
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

Gumb

Svojstvo Button text postavlja ikonu gumba i tekst ovisno o načinu rada prozora.

Svojstva rasporeda poravnavaju gumb u donjem središtu pravokutnika i postavljaju donju marginu rasporeda za pozicioniranje gumba.

Button {
    id: button1
    text: window.lightMode ? qsTr("\u263D  Dark mode")
                           : qsTr("\u263C  Light mode")

        Layout.bottomMargin: 16
        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
    ...
}

Svojstva Text povezuju tekst gumba, kao i njegovu boju i font s načinom rada prozora.

...
contentItem: Text {
    text: button1.text
    color: window.lightMode ? window.light : window.dark
    font: button1.font
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

Element background sadrži instancu tipa Rectangle. Svojstva pravokutnika zaobljuju kutove gumba i postavljaju boju pozadine gumba prema načinu rada prozora.

    ...
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 36
        radius: 8
        color: window.lightMode ? window.dark : window.light
    }
    ...
}

Promijenite stil

Primjer aplikacije koristi osnovno oblikovanje za Qt Quick Controls. To je jednostavan i lagan sveobuhvatan stil koji nudi maksimalne performanse.

Postoji nekoliko drugih stilova koje možete odabrati ovisno o ciljanoj platformi, kao što su iOS, macOS ili Material za Android. Kako biste eksperimentirali s različitim stilovima, dodajte naziv stila u import QtQuick.Controls. Na primjer: import QtQuick.Controls.Material.

Od Qt-a 6.12 možete uvesti QtQuick.Controls.Native, koji uvozi zadani stil za ciljanu platformu.

Za više informacija o dostupnim stilovima pogledajte Styling Qt Quick Controls.

Signali i rukovatelji signalima

Rukovatelj signalom onClicked tipa Button reagira na klikove gumba. U primjernoj aplikaciji odabir gumba prebacuje svijetli i tamni način rada.

            Button {
                id: button1
                text: window.lightMode ? qsTr("\u263D  Dark mode")
                                       : qsTr("\u263C  Light mode")
                Layout.bottomMargin: 16
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

                contentItem: Text {
                    text: button1.text
                    color: window.lightMode ? window.light : window.dark
                    font: button1.font
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                background: Rectangle {
                    implicitWidth: 120
                    implicitHeight: 36
                    radius: 8
                    color: window.lightMode ? window.dark : window.light
                }

                onClicked: window.lightMode = !window.lightMode
            }
        }
    }
}

Pregledajte izvorni C++ kod

Otvorite datoteku main.cpp da biste pregledali generirani C++ kod. Ona deklarira aplikaciju app i aplikacijski mehanizam engine. Mehanizam učitava glavnu QML datoteku kada pokrenete aplikaciju.

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.loadFromModule("HelloWorld", "Main");

    return QGuiApplication::exec();
}

Pregledajte CMake konfiguracijsku datoteku

Čarobnjak generira konfiguracijsku datoteku CMakeLists.txt za izgradnju aplikacije.

Odjeljak RESOURCES navodi izvornu datoteke za aplikaciju. Ako dodate izvornu datoteke u projekt, Qt Creator ih automatski dodaje u odjeljak.

Za više informacija pogledajte Izrada s CMakeom.

Pokrenite aplikaciju na uređaju

Sada možete raspoređiti aplikaciju na uređaj i pokrenuti je tamo:

1. Omogućite USB otklanjanje pogrešaka na Android uređaju ili način programera na iOS uređaju.
2. Povežite uređaj s razvojnim računalom.
3. Idite na Projects i aktivirajte odgovarajući komplet za projekt.
4. Idite na Preferences > Kits > Kits i odaberite uređaj s popisa u Run device i Device.
5. Da biste pokrenuli aplikaciju na uređaju, odaberite Ctrl+R.