Anslut logik till ditt QML användargränssnitt

Anslut bakgrundskod för att göra beräkningar och tillhandahålla användargränssnittet med data att visa

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 (den med filändelsen .h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

Cpp-filen 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.

Lägg till typregistreringen i main.cpp, direkt efter QQmlApplicationEngine har skapats, enligt följande:

    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.

Lägg till en ny Q_PROPERTYdirekt under makrot Q_OBJECT.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Det verkar rätt mycket för en enkel egenskap vi använder för att visa någon text från bakgrundskoden, inte sant? Men en närmare titt avslöjar att det redan kan utföra logik när egenskapen läses av användargränssnittet, och när den skrivs. Det informerar 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

    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 cpp-filen, 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 som visar den under textegenskapen 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 {
                main: 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.