QML - Урок 002. Custom Button in QML Android

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

Начну серию уроков по QML Android с кастомизации кнопки, или правильнее сказать со стилизации , поскольку в данном случае такой термин подходит больше. Мы не будем вызывать диалоговые окна в данном уроке, а просто сделаем свой QML Cutom Button , который будет менять цвет при нажатии на него. А для наглядности таких кнопок будет две.

Первая кнопка будет красного цвета с черным ободком и чёрным текстом, а при нажатии она будет менять цвет фона на черный с красным ободком и красным цветом. А вторая кнопка будет иметь те же цвета, но в противоположной последовательности.

Структура проекта QML Custom Button

Проект создаётся в QtCreator как проект приложения Qt Quick с элементами Quick Controls. Фактически там уже будет менюбар, несколько диалогов и пара кнопок. Так вот, выкидываем всё, кроме двух кнопок и поехали их кастомизировать.

А структура проекта в данном случае получится следующая:

• QMLCutomButton.pro - Знакомый нам профайл проекта;
• deployment.pri - файл для установки исходного кода на устройство;
• main.cpp - давно знакомый стартовый файл приложения
• qml.qrc - файл ресурсов проекта, там и складируются qml файлы
• main.qml - файл qml главного окна приложения
• MainForm.ui.qml - и опять ресурсный файл дизайнера, да простят меня хардкорщики. В нём и будут прятаться кнопки. Проект создавался под минимальную версию Qt 5.5.

QMLCustomButton.pro

Поскольку это первый урок по данной теме, то приведу листинг данного файла.

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)

deployment.pri

А также и этот файл до кучу, хоть он и создаётся по умолчанию.

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

В данном файле необходимо создать движок для QML и загрузить исходный файл в него.

#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 предупреждает, что данный файл можно редактировать только в дизайнере, но на самом деле это не так. Но мы не будем редактировать его вручную.

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

А теперь посмотрим на то, ради чего всё затевалось, а именно логика работы кнопок, которая была описана в самом начале статьи. Для стилизации кнопок используется настройка style , в которой определяется ButtonStyle . Тело нашего Custom Button - это прямоугольник Rectangle , выступающий в роли background кнопки. Для этого Rectangle Задаётся его цвет и обводка с закруглением углов. А чтобы кастомизировать текст, необходимо Button Style переопределить label кнопки, указав цвет текста.

Заметьте также, что указание цвета производится через условное выражение посредством проверки объекта control , который указывает на виджет, то есть кнопку, которая контролирует данный стиль. И если этот control нажат, то цвет один, в противном случае другой.

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"
            }
        }
    }
}

Итог

Однозначно, меня порадовало то, что имеется возможность без всяких эмуляторов и установки на Android Device посмотреть результат проделанной работы, а это очень вдохновляет. Да и кроссплатформенность не может не радовать.

А внешний вид получившихся кнопок будет такой как на ниже представленных скриншотах для Декстопа и со смартфона Meizu M1 Note . Также посмотреть на логику работы приложения можно в видеоуроке, который идёт после скриншотов.

QML Custom Button на декстопе

QML Custom Button на Android

QML Custom Button на Android нажата левая кнопка

QML Custom Button на Android нажата правая кнопка

Видеоурок