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.

Dodajte naslednjo vsebino v novo datoteko glave (backend.h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

Datotekabackend.cpp, ki vsebuje definicije, je trenutno podobno prazna, vsebovati bi morala nekaj podobnega:

#include "backend.h"

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

}

Trenutno uporabniški vmesnik ne ve za vaš razred zaledja. 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.

Takoj po stvaritvi QQmlApplicationEngine, dodajte type registration v main.cpp 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čice, 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.

Prav pod makrojem Q_OBJECT, dodajte novega Q_PROPERTY.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

To se morda zdi veliko kode, samo za to da preberete in napišete nekaj kode iz zaledja. Vendar natančnejši pogled razkriva, da branje lastnosti iz uporabniškega vmesnika že lahko zažene nekaj logike - in enako, kadar je zapisujemo. V tem primeru bo samodejno obvestilo začelje in zaledje o spremembah.

Branje in pisanje temeljita na funkcijah getter in setter. Nadaljujte in 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

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

Prva funkcija je getter, druga seter, tretja pa je signal, oddan ob spremembi lastnosti. Signal ne potrebuje nobene implementacije v datoteki backend.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.

Za prikaz besedila dodajte glavo v main.qml pod lastnostjo title v elementu Kirigami.Page že vsebovanem 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: [
        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 so signali

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