Tutorijal: Qt Quick i Python

Prvo stvorite projekt aplikacije za Qt for Python. Zatim uredite pripremni kôd kako biste razvili malu aplikaciju koja koristi Qt Quick za prikaz teksta Hello World na nekoliko jezika.

Za više primjera izrade Qt for Python aplikacija pogledajte Qt for Python primjere i tutorijale.

Stvorite prazan projekt

Za stvaranje Qt for Python aplikacije koja ima glavnu QML datoteku:

1. Idite na File > New Project.
2. Odaberite Application (Qt for Python) > Qt Quick Application - Empty > Choose za otvaranje dijaloškog okvira za Project Location.

   

3. U prozoru Name unesite naziv projekta. Na primjer, hello_world_quick.
4. U Create in unesite putanju do datoteka projekta. Na primjer, C:\Examples.
5. Odaberite Next (na Windowsu i Linuxu) ili Continue (na macOS-u) kako biste otvorili dijalog Define Project Details.

   

6. U dijaloškom okviru PySide version odaberite verziju PySidea za generirani kod.
7. Odaberite Next ili Continue za otvaranje dijaloga Kit Selection.

   

8. Odaberite Python pakete za izgradnju, implementaciju i pokretanje projekta. Po zadanom se time u direktoriju izvora stvara virtualno okruženje za projekt. Za korištenje globalnog interpretatora odaberite konfiguraciju izgradnje istog naziva kao Python paketa u prozoru Details.
9. Pregledajte postavke projekta i odaberite Finish (na Windowsu i Linuxu) ili Done (na macOS-u) za stvaranje projekta.

Čarobnjak stvara poddirektorij nazvan po projektu za QML modul istog naziva i generira sljedeće datoteke:

• pyproject.toml, koji popisuje datoteke u Python projektu i ostale konfiguracije.
• main.py, koji sadrži neke standardne (boilerplate) kodne sekvence.
• <ProjectName>/Main.qml, koji uvozi kontrole iz Qt Quick.
• <ProjectName>/qmldir, koji deklarira QML modul.
• requirements.txt, koja pohranjuje verziju generiranog koda za PySide. Ovu datoteku možete koristiti za instalaciju potrebne verzije PySidea pomoću pipa.

Instalirajte PySide6 za projekt

U načinu rada Edit odaberite Install za postavljanje PySide6 za projekt.

Dodajte uvoze za Qt Quick

Čarobnjak dodaje sljedeće uvoze u izvornu datoteku main.py za pristup QGuiApplication i QQmlApplicationEngine:

import sys
from pathlib import Path

from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

Dodajte glavnu funkciju

Čarobnjak također dodaje glavnu funkciju, u kojoj stvara instancu QGuiApplication i prosljeđuje sistemske argumente objektu QGuiApplication:

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    ...

Učitajte QML datoteku

Sljedeći redovi u glavnoj klasi stvaraju instancu QQmlApplicationEngine i učitavaju generirani QML modul u objekt motora:

...
engine = QQmlApplicationEngine()
engine.addImportPath(Path(__file__).parent)
engine.loadFromModule("ProjectName", "Main")
...

Na kraju, čarobnjak dodaje kôd koji provjerava je li datoteka uspješno učitana. Ako učitavanje datoteke ne uspije, aplikacija izlazi s kôdom pogreške. Ako učitavanje uspije, čarobnjak poziva metodu app.exec() kako bi ušao u Qt glavnu petlju i započeo izvršavanje Qt kôda:

...
if not engine.rootObjects():
    sys.exit(-1)
sys.exit(app.exec())
...

Dizajnirajte korisnički sučelje

Otvorite datoteku Main.qml u načinu uređivanja Edit kako biste dizajnirali sučelje za Qt Quick.

Dodajte uvoze

Dodajte uvoze za Qt Quick Controls i Layouts:

import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts

Dodajte svojstva i funkcije

Čarobnjak dodaje glavni prozor:

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

Dodajte svojstvo i funkciju za nasumični odabir jezika prikazanog teksta:

    ...
    readonly property list<string> texts: ["Hallo Welt", "Hei maailma",
                                       "Hola Mundo", "Привет мир"]

function setText() {
    var i = Math.round(Math.random() * 3)
    text.text = texts[i]
}

Dodaj Qt Quick Controls

Dodajte QML tipove Text i Button unutar tipa ColumnLayout za dizajniranje korisničkog sučelja:

    ColumnLayout {
    anchors.fill:  parent

    Text {
        id: text
        text: "Hello World"
        Layout.alignment: Qt.AlignHCenter
    }
    Button {
        text: "Click me"
        Layout.alignment: Qt.AlignHCenter
        onClicked:  setText()
    }
}

Također možete koristiti Qt Quick Designer ili Qt Design Studio za dizajniranje korisničkih sučelja u Qt Quick.

Pokrenite aplikaciju

Odaberite (Run) za pokretanje aplikacije.