Evgenii Legotckoi
Evgenii Legotckoi12 жовтня 2015 р. 21:15

QML - Урок 002. Спеціальна кнопка в 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 хостинг.

Вам це подобається? Поділіться в соціальних мережах!

alex_lip
  • 17 листопада 2017 р. 16:37

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

alex_lip
  • 17 листопада 2017 р. 17:04

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

U
  • 04 травня 2019 р. 09:14
  • (відредаговано)

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

Evgenii Legotckoi
  • 06 травня 2019 р. 12:39

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

ЕВ
  • 08 листопада 2019 р. 18:18

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

Evgenii Legotckoi
  • 08 листопада 2019 р. 18:20

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

ЕВ
  • 08 листопада 2019 р. 18:34

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

Evgenii Legotckoi
  • 08 листопада 2019 р. 18:37

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

Evgenii Legotckoi
  • 09 листопада 2019 р. 13:50
  • (відредаговано)

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

ac
  • 27 грудня 2020 р. 15:09

А есть ли первый урок в серии QML ?

Коментарі

Only authorized users can post comments.
Please, Log in or Sign up
1
  • 12333
  • 18 липня 2024 р. 15:34

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

  • Результат:63бали,
  • Рейтинг балів-1
1
  • 12333
  • 18 липня 2024 р. 15:25

C++ - Тест 005. Структуры и Классы

  • Результат:50бали,
  • Рейтинг балів-4
AM

C++ - Тест 005. Структуры и Классы

  • Результат:33бали,
  • Рейтинг балів-10
Останні коментарі
d
dblas505 липня 2024 р. 21:02
QML - Урок 016. База даних SQLite та робота з нею в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
k
kmssr09 лютого 2024 р. 05:43
Qt Linux - Урок 001. Автозапуск програми Qt під Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Анатолий Кононенко05 лютого 2024 р. 12:50
Qt WinAPI - Урок 007. Робота з ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVA25 грудня 2023 р. 21:30
Boost - статичне зв&#39;язування в проекті CMake під Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJo25 грудня 2023 р. 19:38
Boost - статичне зв&#39;язування в проекті CMake під Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
Тепер обговоріть на форумі
F
Fynjy22 липня 2024 р. 14:15
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …
BlinCT
BlinCT25 червня 2024 р. 11:00
Нарисовать кривую в qml Всем привет. Имеется Лист листов с тосками, точки получаны интерполяцией Лагранжа. Вопрос, как этими точками нарисовать кривую? ChartView отпадает сразу, в qt6.7 появился новый элемент…
Evgenii Legotckoi
Evgenii Legotckoi25 червня 2024 р. 01:11
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
BlinCT
BlinCT05 травня 2024 р. 15:46
Написать свой GraphsView Всем привет. В Qt есть давольно старый обьект дял работы с графиками ChartsView и есть в 6.7 новый но очень сырой и со слабым функционалом GraphsView. По этой причине я хочу написать х…
Evgenii Legotckoi
Evgenii Legotckoi03 травня 2024 р. 00:07
Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Добрый день. По моему мнению - да, но то, что будет касаться вызовов к функционалу Андроида, может создать огромные трудности.

Слідкуйте за нами в соціальних мережах