Qt Quick Anleitungen

Diese Seite soll eine leicht auffindbare, nützliche Referenz bieten, die die einfachste und beste Vorgehensweise zur Ausführung bestimmter Aufgaben in „ Qt Quick “ aufzeigt. Jede Lösung enthält, sofern zutreffend, QML- und/oder C++-Codeausschnitte, und jeder Ausschnitt wird automatisch von Qt getestet, um sicherzustellen, dass er funktionsfähig bleibt.

Wie mache ich Folgendes:

Eine C++-Funktion aus QML aufrufen, wenn auf eine Schaltfläche geklickt wird

Angenommen, der C++-Typ soll für die QML-Dateien in der Anwendung global verfügbar sein, ist der einfachste Weg, ihn mit `QML_SINGLETON` als QML-Singleton zu definieren. Zum Beispiel in der Header-Datei ` backend.h`:

#include <QObject>
#include <QQmlEngine>

class Backend : public QObject
{
    Q_OBJECT
    QML_ELEMENT
    QML_SINGLETON

public:
    Q_INVOKABLE void doStuff();
};

backend.cpp:

#include "backend.h"

#include <QDebug>

void Backend::doStuff()
{
    qDebug() << "Did stuff!";
}

Diese Funktion können Sie dann von jeder beliebigen QML-Datei aus aufrufen:

import QtQuick.Controls

import MyModule

ApplicationWindow {
    width: 400
    height: 400
    title: qsTr("C++ Button example")

    Button {
        text: qsTr("Click me")
        onClicked: Backend.doStuff()
    }
}

Wenn der C++-Typ nur für eine kleine Anzahl von QML-Dateien verfügbar sein muss, sollten Sie die Verwendung von ` QML_ELEMENT` in Betracht ziehen. Weitere Möglichkeiten, C++-Typen für QML verfügbar zu machen, finden Sie unter „Auswahl der richtigen Integrationsmethode zwischen C++ und QML“.

Dieses Beispiel geht davon aus, dass der Typ „ Backend “ in einem QML-Modul verfügbar ist. Mit CMake erfolgt dies über „qt_add_qml_module“. Ein Beispiel, das dies im Detail veranschaulicht, finden Sie unter „Erstellen einer QML-Anwendung“.

Prüfen, welches Element den aktiven Fokus hat

Schreiben Sie einen Signal-Handler für die Änderung der Eigenschaft „ activeFocusItem “ des Fensters:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 400
    height: 400
    visible: true
    title: qsTr("Active focus debugging example")

    onActiveFocusItemChanged: print("activeFocusItem: " + activeFocusItem)

    Row {
        TextField {
            objectName: "textField1"
        }
        TextField {
            objectName: "textField2"
        }
    }
}

Dadurch wird das Element, das derzeit den aktiven Fokus hat, in der Konsole ausgegeben. Um sicherzustellen, dass die Ausgabe aussagekräftig ist, weisen Sie jedem Element einen aussagekräftigen Wert für „ objectName “ zu.

Erstellen Sie eine Zeitauswahl wie den „TimePickerDialog“ von Android

Wir haben ein Beispiel vorbereitet, das aus einigen QML-Dateien besteht und zeigt, wie dies umgesetzt werden kann. Sie können in Ihrer Anwendung wie folgt verwendet werden:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Material

ApplicationWindow {
    id: window
    width: 600
    height: 600
    visible: true
    title: qsTr("Time Picker Example")

    Material.theme: darkThemeSwitch.checked ? Material.Dark : Material.Light

    // Shows the selected time and opens the dialog.
    TimeComponentLabel {
        id: openDialogLabel
        width: parent.width - 80
        anchors.centerIn: parent
        font.pixelSize: Qt.application.font.pixelSize * 8
        renderTypeQuality: Text.VeryHighRenderTypeQuality
        interactive: !timePickerDialog.opened

        text: Qt.formatTime(new Date(1970, 1, 1, timePickerDialog.hours, timePickerDialog.minutes), "hh:mm")

        onTapped: timePickerDialog.openWithMode(TimePicker.Mode.Hours)
    }

    ColumnLayout {
        // We always want the openDialogLabel to be centered in the window, not us.
        // For that reason, we use anchors rather than putting the root items into a ColumnLayout.
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: openDialogLabel.bottom
        anchors.topMargin: 24
        spacing: 12

        Switch {
            id: is24HourSwitch
            text: qsTr("24 Hour")
            checked: timePickerDialog.is24Hour
        }
        Switch {
            id: darkThemeSwitch
            text: qsTr("Dark")
        }
    }

    TimePickerDialog {
        id: timePickerDialog
        anchors.centerIn: parent
        is24Hour: is24HourSwitch.checked

        onTimeAccepted: print("A time was chosen - do something here!")
    }
}

Zeitauswahldialog mit kreisförmiger Auswahl im hellen Design

„TimePickerDialog“ im hellen Design.

Zeitauswahl-Dialogfeld mit kreisförmiger Auswahl im dunklen Design

TimePickerDialog im dunklen Design.

Verwendung einer C++-Enumeration in JavaScript

Um eine C++-Enumeration für JavaScript verfügbar zu machen (d. h. „ QJSEngine “, nicht „ QQmlEngine “ oder „ QQmlApplicationEngine “), verwenden Sie „ newQMetaObject()“ und „ registerModule()“:

    QJSEngine engine;
    engine.installExtensions(QJSEngine::AllExtensions);

    QJSValue metaObjects = engine.newObject();
    const QJSValue backendJsMetaObject = engine.newQMetaObject(&Backend::staticMetaObject);
    metaObjects.setProperty("Backend", backendJsMetaObject);
    // Repeat the two lines above for other types as needed.
    engine.registerModule("MyApp", metaObjects);

    Backend backend(&engine);
    const bool loaded = backend.load();

Die Enumeration kann dann von JavaScript aus verwendet werden:

export function backendStatusUpdate(backendStatus) {
    if (backendStatus === Backend.Error) {
        console.warn("Error!")
        return
    }

    console.log("Backend loaded successfully")
}

Bei der Verwendung von „ QQmlEngine “ oder „ QQmlApplicationEngine “ gibt es einfachere Möglichkeiten; weitere Informationen finden Sie unter „Auswahl der richtigen Integrationsmethode zwischen C++ und QML “.

backend.h:

#include <QObject>
#include <QJSEngine>

class Backend : public QObject
{
    Q_OBJECT

public:
    Backend(QJSEngine *engine);

    enum Status {
        Unknown,
        Error,
        Loading,
        Loaded
    };

    Q_ENUM(Status)

    bool load();

private:
    QJSEngine *mEngine = nullptr;
};

backend.cpp:

#include "backend.h"

Backend::Backend(QJSEngine*engine) :
    mEngine(engine)
{
}

bool Backend::load()
{
    // Hier Ladevorgang durchführen...

    const QJSValue module = mEngine->importModule(":/script.mjs");
    if (module.isError()) {
        qWarning() << "Error loading script.mjs:" << module.toString();
       return false;
    }

    const QJSValue function = module.property("backendStatusUpdate");
    if (!function.isCallable()) {
        qWarning() << "backendStatusUpdate script function is not callable!";
       return false;
    }

    const QJSValue functionResult = function.call(QJSValueList() << Loaded);
    if (functionResult.isError()) {
        qWarning() << "backendStatusUpdate script function had errors:" << functionResult.toString();
       return false;
    }

    return true;
}

Weitere Informationen finden Sie unter QObject Integration.

Ein Gauge erstellen

Wir haben ein Beispiel vorbereitet, das aus einigen C++- und QML-Dateien besteht und veranschaulicht, wie dies funktioniert. Sie können in Ihrer Anwendung wie folgt verwendet werden:

import QtQuick.Controls

import GaugeHowTo

ApplicationWindow {
    width: 400
    height: 400
    title: qsTr("Gauge example")

    Gauge {
        minimumValue: 0
        value: 75
        maximumValue: 100
    }
}

Vertikale Anzeige mit einem Wert von 75 auf einer Skala von 0 bis 100

Der letzte Schliff

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.