Tutorijal: Mobilna aplikacija

Qt Quick Ovaj vodič opisuje kako koristiti Qt Creator za razvoj aplikacija za Android i iOS uređaje, pri čemu se Qt 6 koristi kao minimalna verzija Qt-a, a CMake kao sustav za izgradnju.

Razvijat ćete Qt Quick aplikaciju koja ubrzava SVG (Skalabilna vektorska grafika) sliku na temelju promjenjivih vrijednosti akcelerometra.

Postavite razvojno okruženje

Qt Creator 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-a 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 Xcode i koristiti ga za konfiguriranje uređaja. Za to vam je potreban Appleov programerski račun i certifikat programa iOS Developer Program 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 dijalog 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 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 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 Izradi za platformu ( Finish ) (ili Izradi za Mac ( Done ) na macOS-u) za izradu projekta.

Dodajte slike kao resurse

Glavni prikaz aplikacije prikazuje SVG sliku mjehurića koja se kreće po zaslonu kada nagnete uređaj.

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(appaccelbubble
    URI accelbubble
    VERSION 1.0
    QML_FILES Main.qml
    RESOURCES Bluebubble.svg
)

Stvorite glavni prikaz Accelbubble

Stvorite glavni prikaz u datoteci main.qml dodavanjem komponente Image s izvorom Bluebubble.svg:

    Image {
        id: bubble
        source: "Bluebubble.svg"
        smooth: true

Umjesto toga možete koristiti bilo koju drugu sliku ili komponentu.

Dodajte prilagođena svojstva za pozicioniranje slike u odnosu na širinu i visinu glavnog prozora:

        property real centerX: mainWindow.width / 2
        property real centerY: mainWindow.height / 2
        property real bubbleCenter: bubble.width / 2
        x: centerX - bubbleCenter
        y: centerY - bubbleCenter

Dodajte kod za pomicanje mjehurića na temelju vrijednosti senzora akcelerometra. Prvo dodajte sljedeću izjavu o uvozu:

import QtSensors

Dodajte komponentu Accelerometer s potrebnim svojstvima:

    Accelerometer {
        id: accel
        dataRate: 100
        active:true

Dodajte sljedeće JavaScript funkcije koje izračunavaju položaj mjehurića na osi x i y na temelju trenutnih vrijednosti akcelerometra:

    function calcPitch(x,y,z) {
        return -Math.atan2(y, Math.hypot(x, z)) * mainWindow.radians_to_degrees;
    }
    function calcRoll(x,y,z) {
        return -Math.atan2(x, Math.hypot(y, z)) * mainWindow.radians_to_degrees;
    }

Dodajte sljedeći JavaScript kod za signal onReadingChanged komponente Accelerometra kako bi se mjehurić pomaknuo kada se vrijednosti Accelerometra promijene:

        onReadingChanged: {
            var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
            var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * .1)

            if (isNaN(newX) || isNaN(newY))
                return;

            if (newX < 0)
                newX = 0

            if (newX > mainWindow.width - bubble.width)
                newX = mainWindow.width - bubble.width

            if (newY < 18)
                newY = 18

            if (newY > mainWindow.height - bubble.height)
                newY = mainWindow.height - bubble.height

                bubble.x = newX
                bubble.y = newY
        }

Morate osigurati da se položaj mjehurića uvijek nalazi unutar granica zaslona. Ako akcelerometar vrati ne-broj (NaN), vrijednost se zanemaruje i položaj mjehurića se ne ažurira.

Dodajte SmoothedAnimation ponašanje na svojstva x i y mjehurića kako bi se njegovo kretanje činilo glađim.

        Behavior on y {
            SmoothedAnimation {
                easing.type: Easing.Linear
                duration: 100
            }
        }
        Behavior on x {
            SmoothedAnimation {
                easing.type: Easing.Linear
                duration: 100
            }
        }

Zaključajte orijentaciju uređaja

Zaslon uređaja se prema zadanim postavkama rotira kada se orijentacija uređaja promijeni između portreta i pejzaža. Za ovaj primjer bilo bi bolje da je orijentacija zaslona fiksna.

Da biste zaključali orijentaciju na portret ili pejzaž na Androidu, navedite je u AndroidManifest.xml koji možete generirati u Qt Creator. Za više informacija pogledajte Uređivanje manifestnih datoteka.

Da biste generirali i koristili manifestnu datoteku, morate navesti direktorij izvora paketa za Android, QT_ANDROID_PACKAGE_SOURCE_DIR, u datoteci CMakeLists.txt:

set_property(TARGET appaccelbubble APPEND PROPERTY
    QT_ANDROID_PACKAGE_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/android
)

Za kompatibilnost s verzijama CMakea starijima od 3.19, dodajte ručni korak finalizacije u funkciju qt_add_executable:

qt_add_executable(appaccelbubble
    main.cpp
    MANUAL_FINALIZATION
)

Zatim dodajte funkciju qt_finalize_executable:

qt_finalize_executable(appaccelbubble)

Na iOS-u možete zaključati orijentaciju uređaja u datoteci Info.plist koju navodite u datoteci CMakeLists.txt kao vrijednost varijable MACOSX_BUNDLE_INFO_PLIST:

set_target_properties(appaccelbubble PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE_INFO_PLIST "${CMAKE_CURRENT_SOURCE_DIR}/Info.plist"
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

Dodajte ovisnosti

Morate sustavu za izgradnju reći koje Qt module vaša aplikacija treba tako da u datoteku projekta navedete ovisnosti. Odaberite Projects kako biste ažurirali CMake konfiguraciju sljedećim informacijama o Qt modulima: Sensors, Svg, Xml.

Datoteka CMakeLists.txt trebala bi sadržavati sljedeće unose koji CMake-u govore da pronađe Qt instalaciju i uvozi module Qt Sensors, Qt SVG i Qt XML potrebne aplikaciji:

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Sensors Svg Xml)

Također trebate dodati Qt module na popis odredišnih biblioteka za povezivanje. Datoteka target_link_libraries govori CMakeu da izvršna datoteka accelbubble koristi module Qt Sensors, Qt SVG i Qt XML pozivajući se na odredišta uvezana pozivom find_package() iznad. Time se dodaju potrebni argumenti linkeru i osigurava da odgovarajući direktoriji za uključivanje i definicije kompajlera budu proslijeđeni C++ kompajleru.

target_link_libraries(appaccelbubble
    PRIVATE Qt6::Quick Qt6::Sensors Qt6::Svg Qt6::Xml)

Nakon dodavanja ovisnosti, idite na Build i odaberite Run CMake kako biste primijenili promjene konfiguracije.

Za više informacija o datoteci CMakeLists.txt pogledajte priručnik Getting started with CMake.

Pokrenite aplikaciju

Sada možete raspoređivati aplikaciju na uređaj:

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.

   Ako koristite uređaj s Androidom v4.2.2, trebao bi vas upitati da potvrdite vezu kako biste omogućili USB otklanjanje pogrešaka s računala. Kako biste izbjegli takve upite svaki put kad povežete uređaj, odaberite Always allow from this computer, a zatim OK.

3. Za pokretanje aplikacije na uređaju odaberite Ctrl+R.

Datoteke:

• accelbubble/Bluebubble.svg
• accelbubble/CMakeLists.txt
• accelbubble/main.qml