QML - Lektion 002. Benutzerdefinierte Schaltfläche in QML Android

qml, qt, qml custom button android, qml button android, qml button, Android, qml custom button, qt qml

Ich werde eine Reihe von Tutorials zu QML Android mit anpassen Schaltflächen oder genauer Styling starten, da dieser Begriff in diesem Fall besser geeignet ist. Wir werden in diesem Tutorial keine Dialogfelder aufrufen, sondern einfach unseren eigenen QML Cutom Button erstellen, der die Farbe ändert, wenn Sie darauf klicken. Und der Übersichtlichkeit halber gibt es zwei solcher Schaltflächen.

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

Struktur des QML Custom Button-Projekts

Das Projekt wird in QtCreator als Qt Quick Application-Projekt mit Quick Controls erstellt. Tatsächlich wird es bereits eine Menüleiste, mehrere Dialoge und ein paar Schaltflächen geben. Also haben wir alles außer zwei Knöpfen weggeworfen und sie angepasst.

Und die Struktur des Projekts sieht in diesem Fall wie folgt aus:

• QMLCutomButton.pro - Uns bekanntes Projektprofil;
• deploy.pri - Datei zum Installieren des Quellcodes auf dem Gerät;
• main.cpp - seit langem bekannte Startdatei für Anwendungen
• qml.qrc - Projektressourcendatei, qml-Dateien werden dort gespeichert
• main.qml - qml-Datei des Hauptanwendungsfensters
• MainForm.ui.qml - und wieder die Ressourcendatei des Designers, verzeiht mir die Hardcore-Jungs. Die Schaltflächen werden darin versteckt. Das Projekt wurde für die Mindestversion Qt 5.5 erstellt.

QMLCustomButton.pro

Da dies die erste Lektion zu diesem Thema ist, werde ich diese Datei auflisten.

TEMPLATE = app

QT += qml quick widgets

SOURCES += main.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Default rules for deployment.
include(deployment.pri)

Bereitstellung.pri

Und auch diese Datei hat einiges zu bieten, obwohl sie standardmäßig erstellt wird.

unix:!android {
    isEmpty(target.path) {
        qnx {
            target.path = /tmp/$${TARGET}/bin
        } else {
            target.path = /opt/$${TARGET}/bin
        }
        export(target.path)
    }
    INSTALLS += target
}

export(INSTALLS)

main.cpp

In dieser Datei müssen Sie eine Engine für QML erstellen und die Quelldatei hinein laden.

#include <QApplication>
#include <QQmlApplicationEngine>

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

    QQmlApplicationEngine engine; // Создаём движок qml
    // И загружаем в него исходники
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

MainForm.ui.qml

QtCreator warnt, dass diese Datei nur im Designer bearbeitet werden kann, dies jedoch nicht ist. Aber wir werden es nicht manuell bearbeiten.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

Item {
    width: 640
    height: 480

    // Указываем кнопкам имя для доступа к ним
    property alias button1: button1
    property alias button2: button2

    // Слой с кнопками
    RowLayout {
        anchors.centerIn: parent

        // Первая кнопка
        Button {
            id: button1
        }

        // вторая кнопка
        Button {
            id: button2
        }
    }
}

main.qml

Schauen wir uns nun an, worum es ging, nämlich um die Logik der Buttons, die ganz am Anfang des Artikels beschrieben wurde. Um die Schaltflächen zu stylen, verwenden Sie die Einstellung style , die den ButtonStyle definiert. Der Körper unseres Custom Button ist ein Rechteck , das als Hintergrund der Schaltfläche fungiert. Um dies zu tun, Rechteck Gibt seine Farbe und seinen Strich mit abgerundeten Ecken an. Und um den Text anzupassen, benötigen Sie Schaltflächenstil, um die Schaltflächenbeschriftung durch Angabe der Textfarbe zu überschreiben.

Beachten Sie auch, dass die Farbe durch einen bedingten Ausdruck angegeben wird, indem das control Objekt überprüft wird, das auf das Widget zeigt, dh die Schaltfläche, die den angegebenen Stil steuert. Und wenn dieser Regler gedrückt wird, dann ist die Farbe eins, sonst ist sie anders.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") // Ну как же без Приветствия Миру

    MainForm {
        // Растягиваем объект главного окна по всему родительскому элементу
        anchors.fill: parent

        // Стилизуем первую кнопку
        button1.style: ButtonStyle {
            // Стилизуем внешний вид кнопки
            background: Rectangle {
                /* Если кнопка нажата, то она будет красного цвета
                 * с черным ободком со скруглёнными краями,
                 * в противном случае она будет черного цвета с красным ободком
                 */
                color: control.pressed ? "red" : "black"
                border.color: control.pressed ? "black" : "red"
                border.width: 2
                radius: 5

            }

            // Стилизуем цвет текста кнопки
            label: Text {
                /* Если кнопка нажата, то цвет будет черным
                 * в противном случае красным
                 */
                text: qsTr("Press Me 1")
                color: control.pressed ? "black" : "red"
            }
        }

        // Стилизуем вторую кнопку
        button2.style: ButtonStyle {
            // Стилизуем внешний вид кнопки
            background: Rectangle {
                /* аналогично, что и для первой кнопки,
                 * но в противоположном порядке
                 */
                color: control.pressed ? "black" : "red"
                border.color: control.pressed ? "red" : "black"
                border.width: 2
                radius: 5
            }
            // Стилизуем цвет кнопки
            label: Text {
                /* аналогично, что и для первой кнопки,
                 * но в противоположном порядке
                 */
                text: qsTr("Press Me 2")
                color: control.pressed ? "red" : "black"
            }
        }
    }
}

Ergebnis

Es hat mich auf jeden Fall gefreut, dass es die Möglichkeit gibt, ohne Emulatoren und Installation auf Android Device das Ergebnis der geleisteten Arbeit zu sehen, und das ist sehr inspirierend. Und plattformübergreifend ist eine gute Nachricht.

Und das Aussehen der resultierenden Schaltflächen ist das gleiche wie in den Screenshots unten für Dextop und vom Smartphone Meizu M1 Note . Sie können sich die Logik der Anwendung auch im Video-Tutorial ansehen, das den Screenshots folgt.

Benutzerdefinierte QML-Schaltfläche auf dem Desktop

Benutzerdefinierte QML-Schaltfläche für Android

QML Custom Button auf Android linke Taste gedrückt

QML Custom Button auf Android rechte Taste gedrückt

Video-Tutorial