Povežite logiko s svojim uporabniškim vmesnikom QML

Povežite zaledje za opravljanje izračunov in oskrbovanje uporabniškega vmesnika s podatki za prikaz

Za vključitev logike v aplikacijo potrebujemo razrede zaledja C++, ki lahko opravljajo pomembne izračune. Pisanje logike v QML-datoteke odsvetujemo, zato poskusite premakniti čim več na zaledje, tako da se QML uporablja izključno za prikaz uporabniškega vmesnika, kar je tisto, v čemer je najboljše.

Za nov razred zaledja ustvarite dve novi datoteki, imenovani »backend.cpp« in »backend.h«. Ne pozabite dodati nove datoteke cpp k izvršilni v »src/CMakeLists.txt« poleg glavnega .cpp.

V novo datoteko glave dodajte naslednjo vsebino (to s pripono ».h«):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

public:
    explicit Backend(QObject *parent = nullptr);
};

Datoteka cpp, ki vsebuje definicije, je trenutno podobno prazna, vsebovati mora nekaj podobnega:

#include "backend.h"

Backend::Backend(QObject *parent)
    : QObject(parent)
{

}

Trenutno uporabniški vmesnik ne ve za vaš razred začelja. Da bi to spremenili, moramo novo vrsto registrirati v »main.cpp«. Zaledje bo ustvarjeno kot singleton, kar pomeni, da bo ustvarjeno samo enkrat in obstaja skozi ves čas od zagona do zaprtja aplikacije.

V »main.cpp« takoj po ustvarjanju »QQmlApplicationEngine« dodajte registracijo vrste, kot sledi:

    Backend backend;
    qmlRegisterSingletonInstance<Backend>("org.kde.example", 1, 0, "Backend", &backend);

Ne pozabite vključiti nove datoteke glave na vrhu »main.cpp«.

Od zdaj naprej bo zaledje QML znano kot »Backend«. Vsebovano je v modulu, imenovanem »org.kde.example«. Ker je modul del aplikacije, vam ni treba skrbeti za različico, samo ostanite pri 1.0 in ga dosledno uporabljajte skozi celotno aplikacijo.

V »main.qml« uvozite novi modul:

import org.kde.example 1.0

Zdaj smo razred, ki drži bodočo logiko, povezali z aplikacijo, a še vedno ne naredi ničesar. Če želite to spremeniti, dodajmo lastnost razredu. Lastnosti so veliko več kot preprosta spremenljivka. Uporabniški vmesnik lahko obvestijo o spremembah, tako da lahko posodobijo prava področja.

Pod makrom »Q_OBJECT« dodajte novo »Q_PROPERTY«.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

To se zdi precej preprosta lastnost, ki jo bomo uporabili za prikaz besedila iz zaledja, kajne? A podrobnejši pogled razkriva, da to lahko že zažene logiko, ko lastnost bere uporabniški vmesnik, in ko jo zapiše. O spremembah bo samodejno obveščala vmesnik in zaledje.

Branje in pisanje temeljita na funkcijah getter in setter, zato dodajte nov zasebni atribut vašemu razredu, kot je ta, in dodajte funkciji getter in setter.

private:
    QString m_introductionText = "Hello World!";

V javni razdelek dodajte

    QString introductionText() const;
    void setIntroductionText(const QString &introductionText);
    Q_SIGNAL void introductionTextChanged();

Prva funkcija je getter, druga seter, tretja pa signal, oddan ob spremembi lastnosti. Signal ne potrebuje nobene implementacije v datoteki cpp, saj ne naredi veliko več od oddajanja, vendar je treba getter in setter izvajati podobno naslednjemu:

QString Backend::introductionText() const
{
    return m_introductionText;
}

void Backend::setIntroductionText(const QString &introductionText)
{
    m_introductionText = introductionText;
    Q_EMIT introductionTextChanged();
}

Kot vidite, bo ob klicu setterja oddan signal oddan, ki bo obvestil uporabniški vmesnik in zaledje o spremembi.

Če želite prikazati besedilo, v »main.qml« dodajte naslov, prikazan pod besedilno lastnostjo elementa »Kirigami.Page«, ki je že v predlogi.

Nastala koda v tem delu datoteke mora biti videti tako:

        ...
        Kirigami.Page {
            title: i18n("develop.kde.org tutorial")

            Kirigami.Heading {
                anchors.centerIn: parent
                text: Backend.introductionText
            }

            actions {
                main: Kirigami.Action {
                    ...

Zdaj prevedite in znova zaženite svoj program.

Čestitamo, naučili ste se:

  • Kako registrirati vrste zaledij v QML
  • Dodati nove elemente v datoteko QML
  • Ustvariti nove podrazrede QObject
  • Kako dodati lastnosti in kaj počnejo
  • Kaj signali so

Če želite vedeti več o integraciji QML in C++, priporočamo branje uradne dokumentacije Qt.