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

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

ЕВ

Добрый день. Не могу найти ссылки на скачивание проекта.

Добрый день. Её здесь нет.

ЕВ

Будьте добры, выложите проект-пример. QT быстро эволюционирует, сейчас уже 5.13 версия. В вашем проекте версия 5.5 и много отличий. Очень тормозится изучение.

Стараюсь ничего не обещать в этом направлении, ибо много основной работы и тем более, как вы и сказали - Qt очень быстро эволюционирует, но постараюсь обновить эту статью на выходных для Qt Quick 2

Как и обещал, вы можете посмотреть новую статью QML - Урок 037. Кастомизация кнопок в QML (Обновление урока 002) . Там же найдёте ссылку на Git репозиторий. Не забудьте поставить звёздочку репозиторию )))

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Как стать автором?

Внесите вклад в развитие сообщества EVILEG.

Узнайте, как стать автором сайта.

Изучить
Donate

Добрый день, Дорогие Пользователи !!!

Я Евгений Легоцкой, разработчик EVILEG. И это мой хобби-проект, который помогает учиться программированию другим программистам и разработчикам

Если сайт помог вам, и вы хотите также поддержать развитие сайта, то вы можете сделать пожертвование следующими способами

PayPalYandex.Money
Timeweb

Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.

В течение многих лет Timeweb доказывает свою стабильность.

Для проектов на Django рекомендую VDS хостинг

Посмотреть Хостинг Timeweb
g
29 мая 2020 г. 14:32
glushchenkoin

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:40баллов,
  • Очки рейтинга-8
АС
26 мая 2020 г. 11:29
Артём Сун-Дун-Чан

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:50баллов,
  • Очки рейтинга-4
МН
25 мая 2020 г. 11:33
Митя Нагибин

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:50баллов,
  • Очки рейтинга-4
Последние комментарии
29 мая 2020 г. 13:00
Евгений Легоцкой

Django - Урок 023. Like Dislike система с помощью GenericForeignKey

Думал так, но похоже что нет. {{ post.votes.likes.user.username }} Это же QuerySet будет, а не отдельный единственный объект {% for vote in post.votes %} {{ vote.user.username …
29 мая 2020 г. 11:43
Владислав Меленчук

Django - Урок 023. Like Dislike система с помощью GenericForeignKey

А как получить имя пользователя, который поставил лайк? Думал так, но похоже что нет. {{ post.votes.likes.user.username }}
29 мая 2020 г. 6:30
Евгений Легоцкой

Qt/C++ - Урок 039. Как закрасить строку в QSqlTableModel по значению в столбце

У меня работает. Исправлял в проекте, который приложен к статье. А что происходит в вашем коде, с учётом места вызова этого кода, я знать не могу ;) Дебажьте и добавляйте условия, кото…
МА
29 мая 2020 г. 6:27
Михаил А

Qt/C++ - Урок 039. Как закрасить строку в QSqlTableModel по значению в столбце

QModelIndexList rowIndexes = ui->tableView->selectionModel()->selectedRows(); model->removeRows(rowIndexes.first().row(), rowIndexes.size()); model-&…
Сейчас обсуждают на форуме
31 мая 2020 г. 6:57
Алексей Внуков

Минимальный размер Item

считайте по размеру включенных элементов, чтоб все помещалась. например у вас всего 2 кнопки, тогда минимальный размер итема будет ширина 1-й кнопки + ширина 2-й кнопки + отступы, и точно также …
f
31 мая 2020 г. 2:24
fryn3

Можно ли сделать в QML таблицу как в Excel?

Можно ли сделать в QML таблицу как в Excel или как сделано в QTableView? Что бы можно было выделять диапазон ячеек, переключатся по таб, изменять размеры строк и столбцов. В QT 5.14 по…
S
РС
30 мая 2020 г. 11:49
Руслан Склюев

QML Как при нажатии на кнопку изменить название окна?

У меня три файла: 1. QML - это Loader и Window 2. QML вход в программу - страница Loader (там есть Switch) 3. QML - MainMenu. Мне нужно в (1), чтобы если на (2) Switch.enable, то …
ДК
29 мая 2020 г. 13:27
Джон Кофи

QMap<> какой ключ лучше

это ясно. Вопрос в том, как быстро мапа будет отрабатывать, если ключом будет QModelIndex. Какой параметр индекса возьмет за ключ. И вот насколько это будет медленнее или быстрее, чем QString пр…
О нас
Услуги
© EVILEG 2015-2020
Рекомендует хостинг TIMEWEB