Anslut logik till ditt QML användargränssnitt

För att integrera logik i programmet behöver vi C++ bakgrundsklasser som kan utföra de viktiga beräkningarna. Att skriva logik i QML-filer avråds från, så försök att flytta så mycket som möjligt till bakgrundskoden, så att QML enbart används för att visa användargränssnittet, vilket är vad det är bäst på.

Skapa två nya filer som heter backend.cpp och backend.h för din nya bakgrundsklass. Glöm inte bort att lägga till den nya cpp-filen för den körbara filen i src/CMakeLists.txt, intill main.cpp.

Lägg till följande innehåll i den nya deklarationsfilen (backend.h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

Filen backend.cpp som innehåller definitionerna är också tom för tillfället. Den ska innehålla något som liknar följande:

#include "backend.h"

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

}

För närvarande känner inte användargränssnittet till din bakgrundsklass. För att ändra det måste vi registrera den nya typen i main.cpp. Bakgrundskoden skapas som en singleton, vilket betyder att den bara skapas en gång och existerar hela tiden från programmet startas till det stängs.

Direkt efter att ha skapat QQmlApplicationEngine, lägg till typregistreringen i main.cpp på följande sätt:

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

Glöm inte att inkludera den nya deklarationsfilen längst upp i main.cpp.

Från och med nu är bakgrundskoden känd för QML som Backend. Den finns i en modul som kallas org.kde.example. Eftersom modulen är en del av programmet, behöver du inte bekymra dig om versionshantering, behåll bara 1.0 och använd det konsekvent i hela programmet.

Importera den nya modulen i main.qml:

import org.kde.example 1.0

Nu har vi anslutit klassen som innehåller den framtida programlogiken, men den gör inte ännu någonting. För att ändra det, låt oss lägga till en egenskap i klassen. Egenskaper är mycket mer än en enkel variabel. De kan informera användargränssnittet om ändringar så att det kan uppdatera riktiga områden.

Direkt under makrot Q_OBJECT, lägg till en ny Q_PROPERTY.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Det verkar som rätt mycket kod för att bara läsa och skriva en del bakgrundskod. Men en närmare titt avslöjar att det redan kan utföra logik när egenskapen läses av användargränssnittet, och även när den skrivs till. I detta fall, informerar den automatiskt både förgrunden och bakgrunden om ändringar.

Läsning och skrivning är baserade på hämtnings- och tilldelningsfunktioner, så lägg till en ny privat egenskap i din klass, och lägg till hämtnings- och tilldelningsfunktioner.

private:
    QString m_introductionText = "Hello World!";

Lägg till följande i den öppna sektionen

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

Den första funktionen är hämtningsfunktionen,den andra är tilldelningsfunktionen, och den tredje en signal som skickas när egenskapen ändras. Signalen behöver ingen implementering i filen backend.cpp, eftersom den inte gör mycket mer än att skickas, men hämtnings- och tilldelningsfunktionen behöver implementeras på liknande sätt som det följande:

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

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

Som du kan se, när tilldelningsfunktionen anropas, skickas signalen, och informerar användargränssnittet och bakgrundskoden om ändringen.

För att visa texten, lägg till en rubrik i main.qml under egenskapen title för elementet Kirigami.Page, som redan finns i mallen.

Den resulterande koden i den delen av filen ska se ut så här:

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

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

    actions: [
        Kirigami.Action {
            // ...
        }
    ]
}

Kompilera och starta nu programmet igen.

Gratulerar, du har lärt dig:

• Hur man registrerar gränssnittstyper i QML
• Att lägga till nya element i QML-filen
• Att skapa nya QObject delklasser
• Hur man lägger till egenskaper och vad de gör
• Vad signaler är

Om du vill veta mer om integreringen mellan QML och C++, rekommenderar vi att läsa den officiella Qt-dokumentationen.