QML - Tutorial 037. Anpassen von Schaltflächen in QML (Aktualisierungslektion 002)

Custom Button QML, Custom, QML

Auf Wunsch eines Benutzers aktualisiere ich eine der ersten Lektionen entsprechend dem aktuellen Stand von Qt. Die neue Lektion wird nämlich mit Qt Quick Controls 2 geschrieben.

Wir passen nämlich das Erscheinungsbild unserer Anwendung so an, dass die Schaltflächen so aussehen.

Einführung

Die erste Schaltfläche ist rot mit schwarzem Rand und schwarzem Text, und wenn sie angeklickt wird, ändert sie die Hintergrundfarbe in Schwarz mit rotem Rand und Rot. Und die zweite Schaltfläche hat die gleichen Farben, aber in umgekehrter Reihenfolge.

Versionen

• Quart 5.13
• Qt-Schnellsteuerung 2

Projektstruktur

Ich werde nicht auf den Inhalt der Profildatei eingehen, da sie standardmäßig erstellt wird. Aber wir werden alle anderen Dateien studieren.

main.cpp

Ich kann sagen, dass der Inhalt der main.cpp-Dateivorlagen erhebliche Änderungen erfahren hat. Und jetzt sieht die generierte Standarddatei so aus.

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

main.qml

Erstellen und passen Sie jetzt unsere Schaltflächen an.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Custom Button")

    // Create the first button
    Button {
        id: button_1 // Будем
        // Customize layout using anchors
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.horizontalCenter
        anchors.rightMargin: 15
        text: qsTr("Press me 1")

        // To customize the text, you need to set the Text object to contentItem
        contentItem: Text {
            text: button_1.text
            color: button_1.pressed ? "black" : "red"
        }

        // To customize the background, you must override the background property
        // namely, install some object that inherits from Item
        // For example Rectangle
        background: Rectangle {
            // The important point for dynamically setting the color is
            // that we control the pressed property of the button we are interested in
            // and depending on its state, set the color
            color: button_1.pressed ? "red" : "black"           // as background color
            border.color: button_1.pressed ? "black" : "red"    // so the borders
            border.width: 2
            radius: 5
        }
    }

    // Similarly, we customize the second button
    Button {
        id: button_2
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.horizontalCenter
        anchors.leftMargin: 15
        text: qsTr("Press me 2")

        contentItem: Text {
            text: button_2.text
            color: button_2.pressed ? "red" : "black"
        }

        background: Rectangle {
            color: button_2.pressed ? "black" : "red"
            border.color: button_2.pressed ? "red" : "black"
            border.width: 2
            radius: 5
        }
    }
}

Fazit

Wenn Sie den vorherigen Artikel vergleichen, werden Sie feststellen, dass der Unterschied in der Codekomplexität offensichtlich ist. Ich persönlich halte es für einen Segen, dass Sie jetzt die Stile von Objekten für die Anpassung nicht neu definieren müssen, wie es in Qt Quick Controls 1 der Fall war. Es war eine hässliche und nicht flexible API für die Anpassung. Und in einigen Fällen war es notwendig, den privaten Teil des Codes zu reparieren, was ebenfalls sehr schlecht ist. Wenn Sie einen privaten Teil des Codes reparieren müssen, sagt dies zwei Dinge aus:

• oder Fehler, die durch Hinzufügen zum Bibliothekscode behoben werden können, und dies ist normal
• oder schlechte Architektur, was viel schlimmer ist

Es wird auch der erste Artikel sein, der in einem gemeinsam genutzten dedizierten Repository gehostet wird. Ich werde versuchen, weitere Artikel in das Repository auf GitHub hochzuladen, damit alles an einem Ort ist.