Tutorijal: Qt Quick i Python

Qt for Python Prvo, stvorite projekt mobilne aplikacije. Zatim uredite osnovni 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.

Kreira 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 dijaloga 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 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 zadanome se time stvara virtualno okruženje za projekt unutar direktorija izvornog koda. 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 generira sljedeće datoteke:

• pyproject.toml, koja popisuje datoteke u Python projektu i ostale konfiguracije.
• main.py, koji sadrži neke rutinski kod.
• main.qml, koja uvozi kontrole iz Qt Quick.
• 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 generiranu QML datoteku u objekt engine:

...
engine = QQmlApplicationEngine()
qml_file = Path(__file__).resolve().parent / "main.qml"
engine.load(qml_file)
...

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

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

Dizajnirajte korisničko 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 Design Studio za dizajniranje korisničkih sučelja aplikacije Qt Quick.

Pokrenite aplikaciju

Odaberite (Run) za pokretanje aplikacije.