Qt Quick Controls unser erster Button

Hallo wir wollen nun einen Button einfügen der z.b unseren Hallo Welt text beim clicken ändert.

Dazu importieren wir in unserem main.qml

import QtQuick.Controls 1.0

Gehen wir dann in unseren QtQD erhalten wir weitere Optionen in unserer QML-Typen auswahl Es gibt diverse controls die wir schon aus der Widget Programmiereung her kennen.

Buttons,Checkboxen Slider…. etc. Wir wählen nun einen Button aus und ziehen ihn auf unser Rectangle.

Diesen Button Können wir Rechts unter Button zusätzlich bearbeiten zb können wir ihn noch mit einem Tooltip versehen oder ein Bild für den Button auswählen.

Starten wir das Programm sehen wir den Button wie gewünsch jedoch wenn wir draufklicken geschieht nichts?

Da wir unseren Hallo Welt Text ändern wollen verpassen wir ihm eine id: damit lässt er sich direkt im qml code ansprechen. Daher ist es wichtig die id’s immer sorgfältig zu wählen damit man später genau weis was sich darunter verbirgt.

Das Label anklicken und oben rechts die ID eintragen:

Wir nennen unseren „Hallo Welt“ Text labeltext.

Wir können auch alternativ im Code in die Geschweiften Klammern von Text die id händisch einfügen:

 Text {
        id: labeltext
        text: qsTr("Hello World")
        opacity: 1
        smooth: true
        anchors.centerIn: parent
    }

So jetzt verbinden wir noch den Button mit der Aktion Text ändern mit einem onClicked: 

der ganze Code sieht dann wie folgt aus:

import QtQuick 2.0
import QtQuick.Controls 1.0

Rectangle {
    width: 360
    height: 360
    color: "#1e864b"
    radius: 0
    transformOrigin: Item.Center
    Text {
        id: labeltext
        text: qsTr("Hello World")
        opacity: 1
        smooth: true
        anchors.centerIn: parent
    }
    MouseArea {
        x: 0
        y: 0
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }

        Button {
            id: button1
            x: 143
            y: 68
            text: "Button"
            opacity: 1
            scale: 1
            rotation: 0
            onClicked:{labeltext.text="Button Clicked"} //hier wird der Text beim clicken geändert
        }
    }
}

Starten wir nun das Programm wird das label beim drücken des Knopfes geändert.
bei erneutem drücken geschieht jedoch nichts mehr wir können die onClicked: eigenschaft mit einem if statement erweitern so z.B  :

 onClicked:{
                        if (labeltext.text=="Button Clicked")
                        {
                            labeltext.text="Hello World"
                        }
                        else
                        {
                            labeltext.text="Button Clicked"
                        }
                      }

Nun ändert sich der Text bei jedem click.

Möchte man den Button direkt mit C++ Code Verknüpfen ist das etwas komplizierter.

Wir wollen zuerst die Spezialitäten von qml beleuchten und zur Verknüpfung mit C++-Code kommen wir später…

Qt Quick Project erstellen

Über Datei->Neu->Anwendungen hier gibt es prinzipiell 4 Möglichkeiten eine Qtquick 2 Anwendung zu erstellen:

• Qt Quick 2 Anwendung  (eingebauten Elemente)
• Qt Quick2 -Anwendung (aus existierender QML-Datei)
• Qt Quick 2 UI
• Qt Quick 2 UI mit Controls

Wir betrachten in diesem Tutorial die Qt Quick Anwendung mit eingebauten Elementen hier kann man qml mit c++ Code leicht mischen und hat somit alle erdenklichen Möglichkeiten.

Zuerst den Namen und Pfad für das neue Project auswählen.

Dann das Verwendete Kit Auswählen in unserem Fall ist nur Desktop MinGW 32Bit verfügbar.

Anschließend kommt noch eine Zusammenfassung und durch klicken auf weiter erhalten wir unser erstes Qtquick Hello World Programm

Betrachten wir die Datei main.cpp

#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtQuick2ApplicationViewer viewer;
    viewer.setMainQmlFile(QStringLiteral("qml/qtquick_uebung/main.qml"));
    viewer.showExpanded();

    return app.exec();
}

Das kennen wir schon soweit von unserem ersten Tutorial nur gibt es hier einen sogenannten QtQuick2ApplicationViewer der die qml Dateien für uns nach dem Compilvorgang anzeigt.Hier wird main.qml geöffnet. Die Main Cpp kann wie gehabt editiert und erweitert werden.

Neu ist jedoch die main.qml die sich im Projectexplorer unter dem Ordner Qml befindet.

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

Wichtig ist immer der import von QtQuick 2.0 damit der Creator die Datein auch richtig interpretieren kann ,dieser import steht immer am Anfang jeder .qml Datei.
mit rectangle wird ein Quadrat angelegt dessen Breite und Höhe angegeben wird.

In diesem Quadrat befindet sich ein Text der mit anchors:centerIn: parent in die Mitte des Quadrates gelegt wird.
Zusätzlich wird eine MouseArea die das gesamte Quadrat(anchors.fill:parent) abdeckt.
wird daurauf geklickt wird eine Aktion hier Qt.quit() ausgeführt.

Starten wird das Programm haben wir schon unser erstes Hello World Ergebnis.  🙂

Die Anwendung schließt sich wenn wir in das Rechteck klicken.

Wenn wir unsere main.qml im Projectexplorer auswählen und den designer öffnen, öffnet sich der QtQuick- Designer (so nenn ich ihn jetzt mal QtQD)

Hier kann man oben links im Navigator die enthaltenen Elemente sehen:

Es gibt Rectangle und darunter einen Text und eine Mouse Area nun können wir zum Beispiel die Eigenschaften des Rectangles ändern indem wir Rechts im Bild auf  Rectangle und dann den Farbeditor aufklappen so können wir z.B das Rechteck beliebig einfärben.

in unserem code erscheint bei den Eigenschaften für Rectangle dann ein Kürzel für color z.B.:

color: "#1e864b"

Nochmal ausführen und voila das Rechteck ist bunt.

Spielen sie ruhig ein wenig mit dem QtQD herum um zusehen was alles machbar ist. Im nächsten Schritt werden wir einige Qt Quick Controls einführen.