Connectar la lògica amb la vostra interfície d'usuari en QML

Connectant un dorsal per a fer càlculs i proporcionar dades per a mostrar a la vostra interfície d’usuari

Per integrar la lògica dins de l’aplicació, necessitem que les classes del dorsal estiguin en C++ perquè puguin fer els càlculs importants. Es desaconsella escriure la lògica en els fitxers QML, així que intenteu moure tant com sigui possible cap al dorsal, de manera que el QML s’empri exclusivament per a mostrar la interfície d’usuari, el qual és el que millor fa.

Per a la vostra classe nova de dorsal, creeu dos fitxers anomenats backend.cpp i backend.h. No oblideu afegir el nou fitxer cpp a l’executable en el src/CMakeLists.txt, al costat del main.cpp.

Afegiu el següent contingut al nou fitxer de capçalera nou (el que té l’extensió .h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

El fitxer cpp que conté les definicions en aquest moment està igualment buit, hauria de contenir quelcom com el següent:

#include "backend.h"

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

}

Actualment, la interfície d’usuari no coneix la vostra classe de dorsal. Per a canviar això, necessitem registrar el tipus nou en el main.cpp. El dorsal es crearà com un producte únic, el qual vol dir que només es crearà un cop i estarà durant tot el temps, des que s’inicia l’aplicació fins que es tanca.

En el main.cpp, just després de crear el QQmlApplicationEngine, afegiu el registre de tipus de la manera següent:

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

No oblideu incloure el fitxer nou de capçalera a la part superior del main.cpp.

A partir d’ara, el QML coneixerà el dorsal com a Backend. Està contingut en un mòdul anomenat org.kde.example. Atès que el mòdul forma part de l’aplicació, no us haureu de preocupar pel control de versions, només cal que us quedeu amb 1.0 i utilitzeu-lo constantment en tota l’aplicació.

En el main.qml, s’importa el mòdul nou:

import org.kde.example 1.0

Ara hem connectat la classe que conté la lògica futura amb l’aplicació, però encara no fa res. Per a canviar això, afegirem una propietat a la classe. Les propietats són molt més que una simple variable. Poden informar a la interfície d’usuari sobre els canvis perquè pugui actualitzar les àrees correctes.

Just a sota de la macro Q_OBJECT, afegiu una Q_PROPERTY nova.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Això sembla molt per a una propietat senzilla que utilitzarem per a mostrar el text del dorsal. Oi? Però una mirada més atenta revela que això ja pot executar la lògica quan la propietat és llegida per la interfície d’usuari i quan s’ha escrit. Informarà automàticament al frontal i al dorsal dels canvis.

La lectura i escriptura es basen en les funcions capturador i establidor, de manera que afegiu un atribut privat nou a la vostra classe, com aquest, i afegiu les funcions capturador i establidor.

private:
    QString m_introductionText = "Hello World!";

A la secció pública, afegiu

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

La primera funció és el capturador, la segona l’establidor i la tercera un senyal que s’emet quan es canvia la propietat. El senyal no necessita cap implementació en el fitxer cpp, ja que no fa gaire més que ser emès, però el capturador i l’establidor s’han d’implementar de manera similar a la següent:

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

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

Com podeu veure, quan es crida al configurador, s’emetrà el senyal i informarà la interfície d’usuari i al dorsal del canvi.

Per a mostrar el text, en el main.qml afegiu una capçalera que el mostri just sota la propietat de text de l’element Kirigami.Page que ja està contingut a la plantilla.

El codi resultant en aquesta part del fitxer hauria de ser així:

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

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

            actions {
                main: Kirigami.Action {
                    ...

Ara compileu i torneu a iniciar el vostre programa.

Felicitacions, heu après:

  • Com registrar els tipus de dorsal en QML
  • Afegir elements nous al fitxer en QML
  • Crear subclasses noves de QObject
  • Com afegir propietats i què fan
  • Quins són els senyals

Si voleu saber més sobre la integració entre QML i C++, us recomanem llegir la documentació oficial de les Qt.