Android. Java vs Qt QML - Tutorial 002. Umgang mit Schaltflächenklicks

Qt, Android, JAVA, button, QML

Nachdem wir uns mit Hello World aus der Welt von Java und Qt QML für Android bekannt gemacht haben, schlage ich vor, eine Anwendung zu schreiben, die zwei Schaltflächen haben wird und wann diese Schaltflächen sind gedrückt, ändern Sie den Text im kleinen Textfeld. Anwendungen sollten gleich aussehen, aber nicht zu 100 Prozent identisch. Dies kann auf Wunsch erreicht werden, ist aber in diesem Beispiel nicht notwendig.

In beiden Fällen wird Material Design verwendet.

Bevor wir uns den Code ansehen, schauen wir uns das Erscheinungsbild beider Anwendungen an.

Anwendung in Java geschrieben

Und nun die Anwendung, die in Qt QML geschrieben ist

Sie können sehen, dass das Ergebnis dasselbe ist, und gleichzeitig können Sie einige visuelle Unterschiede feststellen. Um ehrlich zu sein, gefällt mir die Option Material Design, die in Qt QML verwendet wird, mehr als die, die standardmäßig in Java verwendet wird.

Kommen wir nun zum Studium des Codes unserer beiden Anwendungen.

Java

Ich habe die ToolBar deaktiviert, da im Hello World-Beispiel Informationen dazu gegeben wurden und wir sie in diesem Fall nicht mehr benötigen, um den Code zu vergleichen.

activity_main.xml

Die Layoutdatei unserer Haupttätigkeit. Um beide Schaltflächen am unteren Rand des Bildschirms zu platzieren, war es notwendig, das Layout in horizontaler Ausrichtung zu verwenden, was bemerkenswert ist, in QML werden Sie dies für eine ähnliche Art von Schaltflächenlayout in diesem Beispiel nicht benötigen. Da QML Anker verwendet, die im Prinzip der Funktionsweise von layout_constraint -Eigenschaften ähneln, aber meiner Meinung nach etwas flexibler sind.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.evileg.javabuttons.MainActivity">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Press Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:weightSum="2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <Button
            android:id="@+id/OkButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Ok"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/Cancelbutton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Cancel"
            android:layout_weight="1"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

MainActivity.java

Lassen Sie uns nun damit fortfahren, den Code für die Verarbeitung von Schaltflächenklicks in Java zu schreiben. Tatsächlich läuft alles darauf hinaus, dass wir die ID der Schaltflächen und des Textfelds finden, Schaltflächen-Klick-Listener daran hängen und die Texteinstellungsfunktion zu diesem Textfeld hinzufügen müssen.

package com.evileg.javabuttons;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {

    TextView textView1;
    Button okButton;
    Button cancelButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        // Найдём View элементы
        textView1 = findViewById(R.id.textView1);
        okButton = findViewById(R.id.OkButton);
        cancelButton = findViewById(R.id.Cancelbutton);

        // Создадим обработчик нажатия кнопок OK
        View.OnClickListener onClickListenerOkBtn = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView1.setText("OK Button is pressed");
            }
        };

        // Создадим обработчик нажатия кнопок Cancel
        View.OnClickListener onClickListenerCancelBtn = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView1.setText("Cancel Button is pressed");
            }
        };

        // Установим обработчики кликов на кнопки
        okButton.setOnClickListener(onClickListenerOkBtn);
        cancelButton.setOnClickListener(onClickListenerCancelBtn);
    }
}

Qt-QML

In einem Qt-QML-Projekt ändere ich drei Dateien ... aber seien Sie nicht so erschrocken, die Änderungen werden nicht so global sein wie das Schreiben vollwertiger Klassen und einer Layoutvorlage, wie es in einer Java-Anwendung der Fall war.

QMLButtons.pro

Lassen Sie uns zunächst die Unterstützung für das quickcontrols2-Modul in der Projektdatei aktivieren, wodurch der Material Design-Stil aktiviert wird.

QT += quick quickcontrols2

main.cpp

Zweitens aktivieren wir Material Design selbst. Dazu müssen Sie der Hauptfunktion nur zwei Zeilen hinzufügen.

Zuerst

#include <QQuickStyle>

Zweite

QQuickStyle::setStyle("Material");

Holen Sie sich den folgenden Code

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickStyle>

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

    QGuiApplication app(argc, argv);

    QQuickStyle::setStyle("Material");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

Stellen Sie sicher, dass Sie die Unterstützung für Material Design aktivieren, bevor Sie QQmlApplicationEngine, initialisieren – dies ist C++, und die Reihenfolge des Aufrufs von Methoden und Funktionen ist hier wichtig.

main.qml

Und jetzt schauen wir uns an, wie man das gleiche Anwendungslayout wie in Java bekommt und gleichzeitig Button-Klicks sofort verarbeitet, was in diesem Fall übrigens in einer Zeile geschrieben wird.

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.1

ApplicationWindow {
    visible: true
    width: 360
    height: 520
    title: qsTr("QML Buttons")

    Text {
        id: text_1
        text: qsTr("Press Button")

        anchors {
            top: parent.top
            topMargin: 32
            horizontalCenter: parent.horizontalCenter
        }
    }

    Button {
        anchors {
            left: parent.left
            bottom: parent.bottom
            right: parent.horizontalCenter
            margins: 8
        }

        text: qsTr("Ok")
        // Обработка нажатия кнопки
        onClicked: text_1.text = qsTr("OK Button is Pressed")
    }

    Button {
        anchors {
            right: parent.right
            bottom: parent.bottom
            left: parent.horizontalCenter
            margins: 8
        }

        text: qsTr("Cancel")
        // Обработка нажатия кнопки
        onClicked: text_1.text = qsTr("Cancel Button is Pressed")
    }
}

Ist Ihnen schon aufgefallen, dass der Code in diesem Fall sauberer ist? Ja, und viel weniger. Natürlich werden wir an solche Stellen kommen, an denen Java gewinnen wird, aber speziell in diesem Beispiel sieht der QML-Code bisher etwas einfacher aus.