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

Android, qml, qml button, qml button android, qml custom button, qml custom button android, qt, 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 нажата правая кнопка

Видеоурок

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
Поддержать автора Donate

А как кастомайзить Button если использовать QtQuick.Controls 2.0 ? В этом случае пишет Cannot assign to non-existent property "style"

Нашел
http://doc.qt.io/Qt-5/qtquickcontrols2-customize.html#customizing-button

U

Делаю вроде правильно, а ничего не получается. Что упустил? После button1. в выпадающем списке нет style. Да, и откуда в уроке взялся файл .pri и зачем он нужен?

Добрый день. Этот урок для Qt Quick Control версии 1, Вы используете вторую версию. Здесь style уже нет, кастомизацию можно делать уже или черещ соответствующие property или через contentItem , или через делегаты, в зависимости от типа кастомизируемого объекта. Нужно отталкиваться от документации на конкретный объект

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Ищу работу?
14,000.00 руб. - 40,000.00 руб.
Разработчик Qt
Annino, Moscow Oblast, Russia
5,000.00 руб. - 15,000.00 руб.
Дизайнер
Moskovskiy, Moscow, Russia
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

Для зарегистрированных пользователей на сайте присутствует минимальное количество рекламы

А
22 августа 2019 г. 23:24
Александр73

Qt - Тест 001. Сигналы и слоты

  • Результат:47баллов,
  • Очки рейтинга-6
21 августа 2019 г. 10:23
Андрей Ермошин

C++ - Тест 002. Константы

  • Результат:58баллов,
  • Очки рейтинга-2
21 августа 2019 г. 10:15
Андрей Ермошин

C++ - Тест 001. Первая программа и типы данных

  • Результат:86баллов,
  • Очки рейтинга6
Последние комментарии
19 августа 2019 г. 7:41
Андрей Янкович

это проблема дистрибутива, попробуйте установить через пакетный менеджер snap Суть проблемы: libQt5Core которая лежит в дистрибутиве требует версию glibc >= 2.25 у вас видимо …
b
18 августа 2019 г. 6:09
bbb116

cqtdeployer /home/aleks/CQtDeployer/bin/cqtdeployer: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.25' not found (required by /home/aleks/CQtDeployer/lib/libQt5Core.so.5) linux mint …
D
17 августа 2019 г. 9:04
Damir

github ChekableTView Правой групповая смена значения при перетаскивании левой как обычно.
Сейчас обсуждают на форуме
24 августа 2019 г. 7:21
Евгений Легоцкой

Не помню, давно уже с QML не работал, по-моему, обычно пишет в консоль, что не находит файл. В любом случае какую-то ошибку в консоль выкидывает. Но если честно, если у вас проект будет ак…
БГ
24 августа 2019 г. 4:27
Брюс Глифф

Спасибо, вначале в документации было не понятно что к чему, теперь разобрался
I
21 августа 2019 г. 8:36
Intruder

Александр, мне не нужно перебирать. Вы говорите правильно, сначала я написал избыточный код просто не подумав. Задача такая, мне нужно просто переложить из QMap в атрибуты xml тега все, что там …
21 августа 2019 г. 4:46
IscanderChe

Спасибо! Получилось.
21 августа 2019 г. 3:16
nayk1982

Если Вы разрабатываете какую-то универсальную утилиту, которая вообще не привязана к логике, тогда как вариант: 1. Получить список таблиц через QSqlDatabase::tables 2. Для каждой табли…
EVILEG
О нас
Услуги
© EVILEG 2015-2019
Рекомендует хостинг TIMEWEB