QML - Урок 003. Custom Dialog in QML Android

custom dialog, dialog android, qml custom dialog, qml custom dialog example, qml dialog android, qt, qt android, qt qml dialog

После того, как Мы сделали кастомизированные кнопки в предыдущем уроке , настало время сделать Custom Dialog , который будет выглядеть более нативно для Android устройства, а может даже и смахивать по дизайну на IOS устройство. Во всяком случае Вы сможете более основательно подойди к реализации гайдов этих устройств.

Для создания диалога будет использоваться объект Dialog из библиотеки QtQuick.Dialog . А нюанс при работе с Custom Dialog под Android заключается в том, что Стандартные Кнопки, которые адекватно выглядят при разработке под Desktop, под Android выглядят вырвиглазно, да и ещё их проблематично кастомизировать для начинающего разработчика. Проще реализовать собственные кнопки с собственной стилизацией.

Разработка Custom Dialog

Разработку кастомизированного диалога продолжим на основе проекта из предыдущего урока. Там у нас были созданы две Custom Button , которые мы немного подправим по цветовой гамме, чтобы они лаконично выглядели по отношению к Диалогу. А также, используя прием по их стилизации, стилизуем кнопки диалогового окна, в которому будут присутствовать две кнопки: "OK" и "Cancel". Эти кнопки будут закрывать диалог.

Кнопки диалогового окна нужно будет прибить к нижней части диалога, а остальную часть отдадим под сообщение "Hello, World!!!", а также разделим кнопки серой линией друг с другом, и такой же линией отделим эти кнопки от сообщения. Будет похоже немного на IOS диалог. В качестве линии будет выступать прямоугольник Rectangle, такой же приём применяется и при разработке под Android на Java , только вместо QML используется XML вёрстка.

Для того, чтобы сделать нормальное кастомизированное содержимое диалогового окна, необходимо задать его параметру contentItem тот объект, который заменит содержимое. Наиболее удобным объектом является Rectangle , а уже в нём будем размещать все остальные объекты. Естественно никаких стандартных кнопок там уже и в помине не будет, так что можете о них забыть, но это не большая потеря на самом деле.

main.qml

Вся работа будет производиться только в файле main.qml, поэтому привожу только его. Остальную информацию можете посмотреть в предыдущей статьей .

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") // Ну как же без Приветствия Миру
    color: "white"

    MainForm {
        // Растягиваем объект главного окна по всему родительскому элементу
        anchors.fill: parent

        // Стилизуем первую кнопку
        button1.style: ButtonStyle {
            // Стилизуем внешний вид кнопки
            background: Rectangle {
                /* Если кнопка нажата, то она будет красного цвета
                 * с черным ободком со скруглёнными краями,
                 * в противном случае она будет черного цвета с красным ободком
                 */
                color: control.pressed ? "#d7d7d7" : "#f7f7f7"
                border.color: "#d7d7d7"
                border.width: 2
                radius: 5
            }

            // Стилизуем цвет текста кнопки
            label: Text {
                /* Если кнопка нажата, то цвет будет черным
                 * в противном случае красным
                 */
                text: qsTr("Press Me 1")
                color: "black"
            }
        }

        // Стилизуем вторую кнопку
        button2.style: ButtonStyle {
            // Стилизуем внешний вид кнопки
            background: Rectangle {
                /* аналогично, что и для первой кнопки,
                 * но в противоположном порядке
                 */
                color: control.pressed ? "#d7d7d7" : "#f7f7f7"
                border.color: "#d7d7d7"
                border.width: 2
                radius: 5
            }
            // Стилизуем цвет кнопки
            label: Text {
                /* аналогично, что и для первой кнопки,
                 * но в противоположном порядке
                 */
                text: qsTr("Press Me 2")
                color: "black"
            }
        }

        // Запускаем диалог по нажатию любой из кнопок в главном окне
        button1.onClicked: dialogAndroid.open();
        button2.onClicked: dialogAndroid.open();

        // Создаём объект диалогового окна
        Dialog {
            id: dialogAndroid
            /* Когда деплоите под Android-устройства,
             * обязательно закоментируйте эти две строки,
             * иначе словите глюки в работе устройства
             */
            width: 600  // Задаём ширину диалога, работает на десктопе, но на Android не сработает
            height: 500 // Задаём высоту диалога, работает на декстопе, но на Android не сработает

            // Создаём содержимое диалогового окна
            contentItem: Rectangle {
                width: 600          // Устанавливаем ширину, необходимо для Android-устройства
                height: 500         // Устанавливаем высоту, необходимо для Android-устройства
                color: "#f7f7f7"    // Задаём цвет

                // Область для сообщения диалогового окна
                Rectangle {
                    /* Прибиваем область к левой, правой и верхней частям диалога,
                     * а также снизу к разделителю, который отделяет область от кнопок
                     */
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: dividerHorizontal.top
                    color: "#f7f7f7"  // Задаём цвет области

                    // Задаём сообщение диалогового окна
                    Label {
                        id: textLabel
                        text: qsTr("Hello, World!!!")
                        color: "#34aadc"
                        anchors.centerIn: parent // Помещаем сообщение в центре области для сообщения
                    }
                }

                // Создаём горизонтальный разделитель с помощью Rectangle
                Rectangle {
                    id: dividerHorizontal
                    color: "#d7d7d7"
                    height: 2 // Устанавливаем ширину в два пикселя
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: row.top
                }

                /* Создаём подложку для кнопок в виде объекта Строки
                 * В данном объекте для объектов детей не работают некоторые параметры
                 * anchors, кроме параметров anchors.top и anchors.bottom
                 */
                Row {
                    id: row
                    height: 100 // Задаём высоту
                    // А также прибиваем строку к низу диалогового окна
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right

                    Button {
                        id: dialogButtonCancel
                        // Растягиваем кнопку по высоте строки
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        // Задаём ширину кнопки на половину строки минус 1 пиксель
                        width: parent.width / 2 - 1

                        // Стилизуем кнопку
                        style: ButtonStyle {
                            background: Rectangle {
                                color: control.pressed ? "#d7d7d7" : "#f7f7f7"
                                border.width: 0
                            }

                            label: Text {
                                text: qsTr("Cancel")
                                color: "#34aadc"
                                // Устанавливаем текст в центр кнопки
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                            }
                        }
                        // По нажатию кнопки закрываем диалог
                        onClicked: dialogAndroid.close()
                    }

                    // Создаём разделитель между кнопками шириной в 2 пикселя
                    Rectangle {
                        id: dividerVertical
                        width: 2
                        // Растягиваем разделитель по высоте объекта строки
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        color: "#d7d7d7" // Задаём цвет разделителя
                    }

                    Button {
                        id: dialogButtonOk
                        // Растягиваем кнопку по высоте строки
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        // Задаём ширину кнопки на половину строки минус 1 пиксель
                        width: parent.width / 2 - 1

                        // Стилизуем кнопку
                        style: ButtonStyle {
                            background: Rectangle {
                                color: control.pressed ? "#d7d7d7" : "#f7f7f7"
                                border.width: 0
                            }

                            label: Text {
                                text: qsTr("Ok")
                                color: "#34aadc"
                                // Устанавливаем текст в центр кнопки
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                            }
                        }
                        // По нажатию кнопки закрываем диалог
                        onClicked: dialogAndroid.close()
                    }
                }
            }
        }
    }
}

Итог

В результате у Вас получится Custom Dialog , который уже будет прилично выглядеть на Вашем Android устройстве. Конечно, под декстопом он будет выглядеть ужасно, по крайней мере в этом уроке, но это уже вопрос правильного масштабирования и настроек размеров элементов, которые являются вопросом отдельной статьи.

А вот результат работы диалога на моём смартфоне и десктопе Вы можете увидеть на скриншотах и в видеоуроке.

QML Custom Dialog Desctop
QML Custom Dialog Android
QML Custom Dialog Android, нажата кнопка OK

Видеоурок

Виртуальный хостинг со скидкой 10 процентов
Виртуальный хостинг со скидкой 10 процентов
EVILEG предлагает надёжный хостинг со скидкой 10% на виртуальный хостинг и 5% на VPS
Поддержать автора Donate
M
  • #
  • 4 октября 2017 г. 9:17

Немного не понял
Заполнение Row происходит слава направо?
Сначала устанавливаем ButtonCancel потом Вертикальный разделитель и следом ButtonOk

Ну да. Вас смущает последовательность? Можете и наоборот заполнить.
Это из разряда какой вариант юзабилити может быть удобнее. Начитался всяких гайдлайнов от Google да Apple, вот так и написал. А так дело вашего вкуса.

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
SZ
24 июня 2019 г. 17:49
Serg Zhi

C++ - Тест 003. Условия и циклы

  • Результат:78баллов,
  • Очки рейтинга2
АС
24 июня 2019 г. 8:03
Александр Спиридонов

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

  • Результат:53баллов,
  • Очки рейтинга-4
БА
23 июня 2019 г. 13:52
Борис Артамонов

C++ - Тест 003. Условия и циклы

  • Результат:35баллов,
  • Очки рейтинга-10
Последние комментарии
24 июня 2019 г. 10:23
Евгений Легоцкой

Хорошо, ну будут проблемы помимо того, что касается статей, то не стесняйтесь задавать вопросы на форуме.
МБ
24 июня 2019 г. 10:21
Михаил Булатов

Извиняюсь, все работает(из-за невнимательности).
24 июня 2019 г. 9:52
Евгений Легоцкой

Придётся делать ещё сигнал в дочернем qml и пробрасывать через коннекты и обработчики. А вообще нужно смотреть конкретный код и что вы пытаетесь сделать. Так что лучше будет, если вы зад...
21 июня 2019 г. 8:31
Ruslan Polupan

Вот моя строка по которой все отлично сработало %cqtdeployer% -bin c:/CentralMposKeys/CentalMposKeys.exe -qmake c:/Qt/5.12.2/mingw73_64/bin/qmake.exe
21 июня 2019 г. 8:24
Андрей Янкович

Возможно кому то пригодится сqtdeployer для windows работает точно так же как и для Linux разница лишь в команде запуска Linux: cqtdeployer Windows: %cqtdeployer...
Сейчас обсуждают на форуме
24 июня 2019 г. 14:36
Михаиллл

Нашел проект подключения к вебсокету.Но по моему адресу не могу подключиться.Нужно ли для этого использовать библиотеки?Вы не знаете адрес вебсокета, на котором можно проверить с...
24 июня 2019 г. 14:07
Евгений Легоцкой

Я пока даже не знаю, а какой код самого подключения? использовали ожидание на подключение? Так делали? socket->connectToServer("market");if (socket->waitForConnected(1000)) ...
24 июня 2019 г. 13:19
IscanderChe

// widget.cpp#include "widget.h"#include <QTableView>#include <QVBoxLayout>#include "checkboxdelegate.h"#include "comboboxdelegate.h"#include "mytableview.h"#include <QSqlD...
24 июня 2019 г. 11:16
BlinCT

Хорошо, с этим понятно. Вот есть такой набор каких то кнопок. Цифры отображают в каком порядке должен менятся фокус.1. Как правильнее сделать отображение активного обьекта...
e
24 июня 2019 г. 10:58
evgenm27

Спасибо за ответ, буду пробовать
Ищу работу?
10,000.00 руб. - 15,000.00 руб.
Нужен помощник для создания API.
Moscow, Moscow, Russia
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

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

EVILEG
О нас
Услуги
Присоединяйтесь к нам
© EVILEG 2015-2019
Рекомендует хостинг TIMEWEB