Nachdem wir die benutzerdefinierten Schaltflächen im vorherigen Tutorial erstellt haben, ist es an der Zeit, einen benutzerdefinierten Dialog zu erstellen, der für Android nativer aussieht. -Geräte und sehen im Design vielleicht sogar wie ein IOS -Gerät aus. In jedem Fall können Sie die Implementierung der Anleitungen dieser Geräte gründlicher angehen.
Um einen Dialog zu erstellen, wird das Dialog Objekt aus der QtQuick.Dialog Bibliothek verwendet. Und die Nuance bei der Arbeit mit Custom Dialog unter Android ist, dass Standard Buttons, die beim Entwickeln unter Desktop angemessen aussehen, unter Android ruckartig aussehen und sogar schwer anzupassen sind für einen unerfahrenen Entwickler. Es ist einfacher, eigene Schaltflächen mit Ihrem eigenen Styling zu implementieren.
Entwicklung von benutzerdefinierten Dialogen
Wir werden einen maßgeschneiderten Dialog basierend auf dem Projekt aus der vorherigen Lektion weiter entwickeln. Dort haben wir zwei Custom Buttons erstellt, die wir farblich leicht anpassen werden, damit sie im Verhältnis zum Dialog lakonisch wirken. Außerdem werden wir mit der Stiltechnik die Schaltflächen des Dialogfelds gestalten, in denen sich zwei Schaltflächen befinden: "OK" und "Abbrechen". Diese Schaltflächen schließen den Dialog .
Die Schaltflächen des Dialogfelds müssen an den unteren Rand des Dialogfelds genagelt werden und der Rest wird unter der Nachricht "Hallo, World!!!" , platziert und wir werden die Schaltflächen auch mit einem grauen trennen Zeile voneinander und verwenden Sie dieselbe Zeile, um diese Schaltflächen von der Nachricht zu trennen. Es wird ein bisschen wie ein IOS Dialog aussehen. Das Rechteck Rectangle fungiert als Linie, die gleiche Technik wird bei der Entwicklung für Android in Java angewendet, nur XML Layout wird anstelle von QML verwendet.
Um den normalen benutzerdefinierten Inhalt des Dialogfelds zu erstellen, müssen Sie den Parameter contentItem auf das Objekt setzen, das den Inhalt ersetzt. Das bequemste Objekt ist Rechteck , und wir werden alle anderen Objekte darin platzieren. Natürlich wird es dort keine Standardtasten geben, die Sie also vergessen können, aber das ist in der Realität kein großer Verlust.
main.qml
Alle Arbeiten werden nur in der Datei main.qml ausgeführt, daher liste ich nur diese auf. Die restlichen Informationen finden Sie im vorherigen Artikel .
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()
}
}
}
}
}
}
Ergebnis
Als Ergebnis erhalten Sie einen benutzerdefinierten Dialog , der auf Ihrem Android Gerät bereits anständig aussieht. Unter Desktop sieht es natürlich schrecklich aus, zumindest in diesem Tutorial, aber das ist bereits eine Frage der richtigen Skalierung und Anpassung der Größe von Elementen, die einem separaten Artikel gewidmet sind.
Das Ergebnis des Dialogs auf meinem Smartphone und Desktop seht ihr aber in den Screenshots und im Video-Tutorial.
QML Custom Dialog Desktop
QML Custom Dialog Android
QML Custom Dialog Android, OK-Taste gedrückt
Немного не понял
Заполнение Row происходит слава направо?
Сначала устанавливаем ButtonCancel потом Вертикальный разделитель и следом ButtonOk
Ну да. Вас смущает последовательность? Можете и наоборот заполнить.
Это из разряда какой вариант юзабилити может быть удобнее. Начитался всяких гайдлайнов от Google да Apple, вот так и написал. А так дело вашего вкуса.