Evgenii Legotckoi
Қаз. 13, 2015, 9:37 Т.Қ.

QML - Урок 003. QML Android жүйесіндегі теңшелетін диалог

Мазмұны
  1. 1. Разработка Custom Dialog
  2. 2. main.qml
  3. 3. Итог
  4. 4. Видеоурок

После того, как Мы сделали кастомизированные кнопки в предыдущем уроке , настало время сделать 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, поэтому привожу только его. Остальную информацию можете посмотреть в предыдущей статьей . 

  1. import QtQuick 2.5
  2. import QtQuick.Controls 1.4
  3. import QtQuick.Controls.Styles 1.4
  4. import QtQuick.Dialogs 1.2
  5. import QtQuick.Layouts 1.1
  6.  
  7. ApplicationWindow {
  8.     visible: true
  9.     width: 640
  10.     height: 480
  11.     title: qsTr("Hello World") // Ну как же без Приветствия Миру
  12.     color: "white"
  13.  
  14.     MainForm {
  15.         // Растягиваем объект главного окна по всему родительскому элементу
  16.         anchors.fill: parent
  17.  
  18.         // Стилизуем первую кнопку
  19.         button1.style: ButtonStyle {
  20.             // Стилизуем внешний вид кнопки
  21.             background: Rectangle {
  22.                 /* Если кнопка нажата, то она будет красного цвета
  23.                  * с черным ободком со скруглёнными краями,
  24.                  * в противном случае она будет черного цвета с красным ободком
  25.                  */
  26.                 color: control.pressed ? "#d7d7d7" : "#f7f7f7"
  27.                 border.color: "#d7d7d7"
  28.                 border.width: 2
  29.                 radius: 5
  30.             }
  31.  
  32.             // Стилизуем цвет текста кнопки
  33.             label: Text {
  34.                 /* Если кнопка нажата, то цвет будет черным
  35.                  * в противном случае красным
  36.                  */
  37.                 text: qsTr("Press Me 1")
  38.                 color: "black"
  39.             }
  40.         }
  41.  
  42.         // Стилизуем вторую кнопку
  43.         button2.style: ButtonStyle {
  44.             // Стилизуем внешний вид кнопки
  45.             background: Rectangle {
  46.                 /* аналогично, что и для первой кнопки,
  47.                  * но в противоположном порядке
  48.                  */
  49.                 color: control.pressed ? "#d7d7d7" : "#f7f7f7"
  50.                 border.color: "#d7d7d7"
  51.                 border.width: 2
  52.                 radius: 5
  53.             }
  54.             // Стилизуем цвет кнопки
  55.             label: Text {
  56.                 /* аналогично, что и для первой кнопки,
  57.                  * но в противоположном порядке
  58.                  */
  59.                 text: qsTr("Press Me 2")
  60.                 color: "black"
  61.             }
  62.         }
  63.  
  64.         // Запускаем диалог по нажатию любой из кнопок в главном окне
  65.         button1.onClicked: dialogAndroid.open();
  66.         button2.onClicked: dialogAndroid.open();
  67.  
  68.         // Создаём объект диалогового окна
  69.         Dialog {
  70.             id: dialogAndroid
  71.             /* Когда деплоите под Android-устройства,
  72.              * обязательно закоментируйте эти две строки,
  73.              * иначе словите глюки в работе устройства
  74.              */
  75.             width: 600  // Задаём ширину диалога, работает на десктопе, но на Android не сработает
  76.             height: 500 // Задаём высоту диалога, работает на декстопе, но на Android не сработает
  77.  
  78.             // Создаём содержимое диалогового окна
  79.             contentItem: Rectangle {
  80.                 width: 600          // Устанавливаем ширину, необходимо для Android-устройства
  81.                 height: 500         // Устанавливаем высоту, необходимо для Android-устройства
  82.                 color: "#f7f7f7"    // Задаём цвет
  83.  
  84.                 // Область для сообщения диалогового окна
  85.                 Rectangle {
  86.                     /* Прибиваем область к левой, правой и верхней частям диалога,
  87.                      * а также снизу к разделителю, который отделяет область от кнопок
  88.                      */
  89.                     anchors.left: parent.left
  90.                     anchors.right: parent.right
  91.                     anchors.top: parent.top
  92.                     anchors.bottom: dividerHorizontal.top
  93.                     color: "#f7f7f7"  // Задаём цвет области
  94.  
  95.                     // Задаём сообщение диалогового окна
  96.                     Label {
  97.                         id: textLabel
  98.                         text: qsTr("Hello, World!!!")
  99.                         color: "#34aadc"
  100.                         anchors.centerIn: parent // Помещаем сообщение в центре области для сообщения
  101.                     }
  102.                 }
  103.  
  104.                 // Создаём горизонтальный разделитель с помощью Rectangle
  105.                 Rectangle {
  106.                     id: dividerHorizontal
  107.                     color: "#d7d7d7"
  108.                     height: 2 // Устанавливаем ширину в два пикселя
  109.                     anchors.left: parent.left
  110.                     anchors.right: parent.right
  111.                     anchors.bottom: row.top
  112.                 }
  113.  
  114.                 /* Создаём подложку для кнопок в виде объекта Строки
  115.                  * В данном объекте для объектов детей не работают некоторые параметры
  116.                  * anchors, кроме параметров anchors.top и anchors.bottom
  117.                  */
  118.                 Row {
  119.                     id: row
  120.                     height: 100 // Задаём высоту
  121.                     // А также прибиваем строку к низу диалогового окна
  122.                     anchors.bottom: parent.bottom
  123.                     anchors.left: parent.left
  124.                     anchors.right: parent.right
  125.  
  126.                     Button {
  127.                         id: dialogButtonCancel
  128.                         // Растягиваем кнопку по высоте строки
  129.                         anchors.top: parent.top
  130.                         anchors.bottom: parent.bottom
  131.                         // Задаём ширину кнопки на половину строки минус 1 пиксель
  132.                         width: parent.width / 2 - 1
  133.  
  134.                         // Стилизуем кнопку
  135.                         style: ButtonStyle {
  136.                             background: Rectangle {
  137.                                 color: control.pressed ? "#d7d7d7" : "#f7f7f7"
  138.                                 border.width: 0
  139.                             }
  140.  
  141.                             label: Text {
  142.                                 text: qsTr("Cancel")
  143.                                 color: "#34aadc"
  144.                                 // Устанавливаем текст в центр кнопки
  145.                                 verticalAlignment: Text.AlignVCenter
  146.                                 horizontalAlignment: Text.AlignHCenter
  147.                             }
  148.                         }
  149.                         // По нажатию кнопки закрываем диалог
  150.                         onClicked: dialogAndroid.close()
  151.                     }
  152.  
  153.                     // Создаём разделитель между кнопками шириной в 2 пикселя
  154.                     Rectangle {
  155.                         id: dividerVertical
  156.                         width: 2
  157.                         // Растягиваем разделитель по высоте объекта строки
  158.                         anchors.top: parent.top
  159.                         anchors.bottom: parent.bottom
  160.                         color: "#d7d7d7" // Задаём цвет разделителя
  161.                     }
  162.  
  163.                     Button {
  164.                         id: dialogButtonOk
  165.                         // Растягиваем кнопку по высоте строки
  166.                         anchors.top: parent.top
  167.                         anchors.bottom: parent.bottom
  168.                         // Задаём ширину кнопки на половину строки минус 1 пиксель
  169.                         width: parent.width / 2 - 1
  170.  
  171.                         // Стилизуем кнопку
  172.                         style: ButtonStyle {
  173.                             background: Rectangle {
  174.                                 color: control.pressed ? "#d7d7d7" : "#f7f7f7"
  175.                                 border.width: 0
  176.                             }
  177.  
  178.                             label: Text {
  179.                                 text: qsTr("Ok")
  180.                                 color: "#34aadc"
  181.                                 // Устанавливаем текст в центр кнопки
  182.                                 verticalAlignment: Text.AlignVCenter
  183.                                 horizontalAlignment: Text.AlignHCenter
  184.                             }
  185.                         }
  186.                         // По нажатию кнопки закрываем диалог
  187.                         onClicked: dialogAndroid.close()
  188.                     }
  189.                 }
  190.             }
  191.         }
  192.     }
  193. }

Итог

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

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

QML Custom Dialog Desctop

QML Custom Dialog Android

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

Видеоурок

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

Осы тақырып бойынша ұсынылатын мақалалар

Мақала бойынша сұралады0сұрақтар(лар)

2
138

Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!

3.8K
2
0
3
0
M
  • Қаз. 4, 2017, 3:17 Т.Қ.

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

0
0
0
Evgenii Legotckoi
  • Қаз. 4, 2017, 4:42 Т.Қ.

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

0
0
0

Пікірлер

Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
Кіріңіз немесе Тіркеліңіз
Actions
Мақала жазуСұрақ қоюТест тапсырыңызКодты бөлісу