Besuchen Sie uns auf der Embedded World 2026 | 10–12.03, Nürnberg, Deutschland. Mehr erfahren .

Qt & QML Development
2023-09-19
7 Minuten Lesezeit

QML vs Qt Widgets – Detaillierter Vergleich

Łukasz Kosiński
Łukasz Kosiński Chief Executive Officer

In der weiten Welt des Qt-Frameworks stehen Entwickler oft vor der Entscheidung: Sollten sie sich mit dem Qt Widgets-Modul beschäftigen und GUIs mit C++ und etwas CSS erstellen? Oder sollten sie sich in das Gebiet des Qt Quick-Moduls mit der QML-Sprache wagen?

Wenn Sie darüber nachdenken, sind Sie hier genau richtig. Dieser Blogbeitrag, der direkt aus einem aufschlussreichen Video-Tutorial stammt, wird die Nuancen, Stärken und geeigneten Szenarien für jede Methode aufschlüsseln. Und für die visuellen Lerner da draußen: Keine Sorge, dieser Beitrag entspricht einem Video-Tutorial, also wenn Sie lieber schauen als lesen, tun Sie dies ruhig.

Ein kurzer Hinweis, bevor wir tiefer eintauchen: Während QML und Qt Quick oft synonym verwendet werden, sind sie nicht genau dasselbe. Aber ehrlich gesagt wird der Unterschied in den meisten Kontexten übergangen.

Warum die Wahl zwischen Qt Quick und Qt Widgets eine schwierige Entscheidung ist

Im Kern dieses Dilemmas steht die Entwicklung des Qt-Frameworks selbst. Qt Widgets entstanden zuerst und wurden für eine andere Ära mit unterschiedlichen Bedürfnissen entwickelt. Wie alles in der Technologie kamen mit der Zeit neue Anforderungen auf, und mit ihnen kam Qt Quick.

Um dieser technischen Diskussion eine persönliche Note zu verleihen, vergleiche ich die Wahl zwischen Qt Widgets und Qt Quick oft mit der Wahl eines Lagers in meinem Lieblings-Computerspiel – Gothic. Genauso wie jedes Lager in Gothic seine eigenen einzigartigen Merkmale und Reize hat, haben auch Qt Widgets und Qt Quick im Bereich der GUI-Entwicklung ihre eigenen Eigenschaften.

Einführung in Qt Widgets

Qt Widgets sind im Wesentlichen so alt wie das Qt-Framework selbst. Als GUI-Framework ins Leben gerufen, war das Hauptziel von Qt die Entwicklung von GUI-Anwendungen für Desktop-Plattformen. Ursprünglich für Linux entwickelt, wurde es später auf andere beliebte Desktop-Plattformen wie Windows und macOS ausgeweitet.

Wenn Sie sich für diese Option entscheiden, werden Sie höchstwahrscheinlich C++ oder Python -Bindings verwenden, um Ihr Ziel zu erreichen. Dies kann ein großer Vorteil sein, besonders wenn Sie bereits in einer dieser Sprachen versiert sind.

Wenn Sie sich in das Qt Widgets-Modul vertiefen, stoßen Sie auf eine Reihe von Steuerelementen, die als „Widgets“ bezeichnet werden. Dabei handelt es sich um C++-Klassen mit vertrauten Namen wie QPushButton, QComboBox, QRadioButton, QProgressBar, QSlider und vielen anderen.

Eine typische Qt Widgets-Anwendung besteht aus C++ (oder Python)-Klassen, die mit .ui-Dateien ergänzt werden. Neugierig darauf? Lassen Sie uns ein wenig tiefer eintauchen. Diese .ui-Dateien werden vom User Interface Compiler (UIC) geparst und auf dieser Grundlage wird neuer C++-Code im Hintergrund generiert. Schauen Sie sich das Video an, um das Ganze ein wenig mehr im Qt Creator zu sehen.

.ui-Dateien sind nichts anderes als XML-Dokumente, die entweder mit einem einfachen Texteditor oder vorzugsweise mit dem Designer-Tool bearbeitet werden können. Es bietet die Bequemlichkeit des Drag-and-Drop für Widgets, sodass Sie sie nach Belieben anordnen können.

Das Stylen der Widgets erfolgt mithilfe des Qt Style Sheet (QSS) -Konzepts, das praktisch identisch mit dem standardmäßigen CSS-UI-Element-Styling ist, das Sie aus der Web-Frontend-Entwicklung kennen.

Manchmal müssen Sie ein QWidget oder eine abgeleitete Klasse erweitern, um Komponenten anzupassen. Das bedeutet, dass Sie QPainter oder einen anderen Zeichnungsmechanismus verwenden müssen, um ein weniger standardmäßiges Aussehen zu implementieren.

Ein hervorragendes Attribut von Widgets ist ihre Anpassungsfähigkeit an das native Aussehen des Betriebssystems und die Desktop-Systemfunktionen. Daher sehen die UI-Komponenten von Desktop-Anwendungen, die mit Qt Widget und seinen Freunden codiert wurden, nativ aus .

iOS native look

Mit Qt Widgets können Sie Ihre eigenen, benutzerdefinierten Widgets rendern, die OpenGL oder andere native Rendering-Technologien verwenden. Widgets verwenden jedoch eher einen direkten Rendering-Ansatz, und das ist gut, weil ich in einem Qt Widgets Desktop-Projekt eine Situation hatte, in der die Software von blinden Menschen genutzt wurde, die Screen Reader-Software für Windows verwendeten. Und weil Widgets den direkten Rendering-Ansatz und die Windows-API nutzen, konnte diese Software Fenster, Schaltflächen und all solche Dinge erkennen, ohne dass etwas in der Software geändert werden musste.

Im Allgemeinen sind Qt Widgets ausgereift und viele kleine Dinge, die einfach nützlich sind und die man nicht selbst codieren muss, kommen einfach direkt aus der Box . Zum Beispiel unterstützen Widgets-Anwendungen die Tastaturnavigation hervorragend.

Vorteile und Nachteile des Qt Widgets-Ansatzes

Wenn Sie sich für Qt Widgets interessieren, werfen Sie einen Blick auf die Tabelle unten. Sie listet die guten und weniger guten Punkte bei der Verwendung dieser Methode auf. Sie hilft Ihnen dabei, zu entscheiden, ob Qt Widgets die richtige Wahl für Sie ist. Später werden wir uns auf konkrete Fälle konzentrieren, in denen der Ansatz mit der Qt Widget-Klasse der richtige Weg ist.

Pros

Cons

Great for C++ and Python programmers

Cumbersome customization

Native look and feel on desktops

Difficult to style and animate

Direct rendering

Feel old

Out of the box features

Problematic for people with no C++ or Python background

High performant

Einführung in Qt Quick (QML)

Ähnlich wie sein Pendant, Qt Widgets, bietet auch Qt Quick eine Möglichkeit, Benutzeroberflächen innerhalb des Qt-Frameworks zu erstellen. Es feierte offiziell seinen Debüt etwa im Jahr 2012. Obwohl es im Vergleich zu Qt Widgets ein neueres Gesicht ist, lassen Sie sich nicht täuschen. Es ist lange genug etabliert, um seine Stabilität und reife Haltung zu beweisen, trotz einiger kleiner Hürden hier und da.

QML (die Programmiersprache, die üblicherweise für Qt Quick-Projekte verwendet wird) sieht sehr viel wie einfaches JSON aus. Es verwendet JavaScript für das Scripting, daher ist es ziemlich einfach zu erlernen.

import QtQuick

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

Sie können immer noch typische Qt-Elemente in QML verwenden, wie Signale oder Slots . Aber es ist am besten, QML für das Aussehen Ihrer App zu verwenden und C++ oder Python für deren Funktionsweise.

Qt Quick glänzt besonders in der Kompatibilität mit eingebetteten Geräten und mobilen Plattformen wie Android oder iOS. Wenn Sie sich in die Welt der Mikrocontroller begeben, bietet Qt für MCU eine leichtgewichtige Version von Qt Quick. Dadurch wird Qt Quick zur bevorzugten Wahl für Entwickler, die auf mobile oder eingebettete Bereiche abzielen.

Und es gibt noch mehr. Qt Quick Controls ermöglicht es Ihnen, das native Aussehen und die Desktop-Systemfunktionen genau wie bei Qt Widgets zu emulieren, aber das gilt auch für Smartphone-Apps. Material-Design-Thema? Damit sind Sie bestens ausgestattet.

UI Qt Quick

Qt Quick-Unterstützung für die Erstellung schöner Benutzeroberflächen ist ebenfalls ein Punkt, der nicht unbeachtet bleiben sollte. Das Nachbilden von charmanten Grafikdesigns und coolen Animationsübergängen mit Widgets kann eine entmutigende Aufgabe sein. Wenn Ihre Ziele eine Benutzeroberfläche umfassen, die mit grafischen Feinheiten oder animierten Wundern vollgepackt ist, ist QML Ihre erste Wahl. Besonders wenn Touchscreen-Geräte Ihr Ziel sind, bietet QML unbestreitbar eine flüssigere Erfahrung.

In Bezug auf das Rendering nutzt Qt Quick native Rendering-Methoden wie OpenGL, Metal und Vulkan. Obwohl dies seine Vorteile mit sich bringt, ist es nicht ohne bestimmte Einschränkungen.

Vor- und Nachteile des Qt Quick-Ansatzes

Schauen wir uns nun die möglichen Vorteile und Herausforderungen an, die bei der Entwicklung von Qt Quick-Projekten auftreten können.

Pros

Cons

Great for advanced, rich and animated GUI

(Easy styling and customization)

Sometimes has unexpected issues

Great for embedded and mobile platforms

Doesn’t have so many features out of the box

Great for touch screens

Easy-to-learn fundamentals

High performant

Beste Anwendungsfälle für das Qt-Widgets-Modul

Du fragst dich, wann du dieses Modul wählen solltest? Hier spielt es seine Stärken aus:

  • Wenn du einfache Desktop-Anwendungen erstellst, die ausschließlich für Desktops gedacht sind.

  • Beim Entwickeln spezialisierter Desktop-Tools wie CAD-Programme, Admin-Tools, Grafikdesign-Anwendungen usw.

  • Wenn du sehr gute Kenntnisse in C++ oder Python hast und diese direkt im UI nutzen möchtest.

Beste Anwendungsfälle für das Qt-Quick-Modul

Du entscheidest dich für Qt Quick? Dann ist es in diesen Fällen die beste Wahl:

  • Bei der Arbeit mit Mikrocontrollern, z. B. mit Qt for MCU.

  • Für Projekte, die auf Embedded- oder Mobilgeräte abzielen.

  • Wenn dein Fokus auf Touchscreen-Geräten liegt.

  • Wenn du eine moderne, elegante und visuell ansprechende Benutzeroberfläche mit schönen Animationen möchtest.

  • Wenn du echte Cross-Plattform-Ziele verfolgst, also sowohl Desktop- als auch Mobile-Plattformen abdecken willst.

Zusammenfassung zur Auswahl des richtigen Moduls für die Entwicklung von Benutzeroberflächen für Qt-Anwendungen

Ich gehöre eher zum Qt Quick-Lager und als Gründer eines Qt QML C++-Beratungsunternehmens kann ich sagen, dass immer mehr Projekte auf diesen Ansatz umsteigen. Ich würde sagen, dass die überwältigende Mehrheit der neuen Qt-Projekte auf Qt Quick basiert.

Dennoch schätze ich Qt Widgets sehr. Sie sind ausgereift und einfach großartig. Während meiner Karriere gab es Zeiten, in denen ich mit Qt Quick enttäuscht war und auf einen standardisierten Ansatz zurückgreifen musste.

Benötigen Sie Unterstützung bei Ihrer Entscheidung oder Hilfe bei Ihrem Projekt? Entdecken Sie, was wir mit unserem Qt-Entwicklung für Sie tun können.

Kontaktieren Sie uns

Wir beantworten jede Anfrage und finden die optimale Strategie für den Erfolg Ihres Projekts.

Füllen Sie das Formular aus, und wir melden uns in Kürze bei Ihnen.

Lukas Kosiński

Lukas Kosiński

Chief Executive Officer

Der Administrator der personenbezogenen Daten ist Somco Software sp. z o.o., ul. Gen. Ottokara Brzoza-Brzeziny 13, 05-220 Zielonka, KRS: 855688. Die personenbezogenen Daten werden verarbeitet, um die im Kontaktformular gestellte Anfrage zu beantworten. Weitere Informationen, einschließlich einer Beschreibung der Rechte der betroffenen Personen, finden Sie in der Datenschutzerklärung .