QML - Lektion 006. Benutzerdefinierter Kalender in Qt QML oder Qt QML Android

Qt, Android, Calendar, QML, CalendarStyle

In dieser Lektion möchte ich darüber sprechen, wie Sie das Erscheinungsbild des Objekts Calendar in Qt Qml anpassen können. Korrigieren Sie beispielsweise Farben, Schriftarten und passen Sie sie auch schön in das Dialogfeld zur Auswahl eines Datums ein. Lassen Sie uns daher entscheiden, wie unsere Anwendung funktionieren und wie sie aussehen soll:

1. Das Hauptfenster der Anwendung enthält eine Standardschaltfläche, die das Datum anzeigt (obwohl Sie es auch [anpassen] können, wenn Sie möchten (https://evileg.com/ru/post/64/));
2. Durch Klicken auf die Schaltfläche öffnet sich ein Dialogfenster mit dem Kalender und zwei Schaltflächen ("Ok" und "Abbrechen"). Der Kalender wird auf das Datum eingestellt, das auf der Schaltfläche angegeben wurde;
3. Wenn Sie auf die Schaltfläche "Abbrechen" klicken, passiert nichts, und das Dialogfeld wird einfach geschlossen.
4. Durch Klicken auf die Schaltfläche „Ok“ wird das Dialogfeld geschlossen und die Schaltfläche des Hauptfensters zeigt das Datum an, das im Kalender ausgewählt wurde.

Ich glaube, Sie haben bereits bemerkt, dass das Anpassen der Anwendungsschnittstelle in Qt QML sowohl für Desktop -Versionen als auch für Android dasselbe ist. Andernfalls würde die Entwicklung unter Qt nicht funktionieren als plattformübergreifend angesehen. Daher werde ich nicht zu sehr auf den Unterschied zwischen der Einstellung der Dialogfeldanzeige für die Desktop -Version und die Android -Version eingehen. Ich habe diesen Punkt im Tutorial zum Erstellen eines benutzerdefinierten Dialogfelds erklärt.

Projektstruktur für benutzerdefinierten Kalender

Zur Demonstration des Beispiels wurde ein neues Projekt mit folgender Struktur angelegt:

• QmlCalendarCustom.pro - Projektprofil;
• main.cpp - Hauptquellcodedatei;
• main.qml - Haupt-QML-Schnittstellendatei;
• left_arrow.png - linker Pfeil nicht gedrückt;
• left_arrow_disable.png - linker Pfeil gedrückt;
• right_arrow.png - Rechtspfeil nicht gedrückt;
• right_arrow_disable.png - Rechtspfeil gedrückt.

Pfeile

Ich verwende die folgenden Bilder, um das Scrollen der Monate im Kalender anzupassen.

main.cpp

Diese Datei wird standardmäßig erstellt, aber ich werde ihren Programmcode angeben, damit es keine Verwirrung gibt.

#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml

Aber wir werden die ganze Schande in dieser Datei erstellen. Darin erstellen wir einen benutzerdefinierten Kalender , der das Datum auf der Schaltfläche festlegt.

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

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    /* Создадим переменную для хранения даты, чтобы не заморачиваться
     * с конвертацией типов
     * */
    property var tempDate: new Date();

    Button {
        id: button
        // Устанавливаем текущую дату при запуске приложения на кнопку
        text: Qt.formatDate(tempDate, "dd.MM.yyyy");
        anchors.centerIn: parent // Центруем кнопку в окне

        // По клику на кнопку запускаем диалоговое окно черз кастомную функцию
        onClicked: dialogCalendar.show(tempDate)

    }

    Dialog {
        id: dialogCalendar
        // Задаём размеры диалогового окна
        width: 250
        height: 300

        // Создаем контент диалогового окна
        contentItem: Rectangle {
            id: dialogRect
            color: "#f7f7f7"

            // Первым идёт кастомный календарь
            Calendar {
                id: calendar
                // Размещаем его в верхней части диалога и растягиваем по ширине
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: row.top

                // Стилизуем Календарь
                style: CalendarStyle {

                    // Стилизуем navigationBar
                    navigationBar: Rectangle {
                        /* Он будет состоять из прямоугольника,
                         * в котором будет располагаться две кнопки и label
                         * */
                        height: 48
                        color: "#f7f7f7"

                        /* Горизонтальный разделитель,
                         * который отделяет navigationBar от поля с  числами
                         * */
                        Rectangle {
                            color: "#d7d7d7"
                            height: 1
                            width: parent.width
                            anchors.bottom: parent.bottom
                        }

                        // Кнопка промотки месяцев назад
                        Button {
                            id: previousMonth
                            width: parent.height - 8
                            height: width
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: parent.left
                            anchors.leftMargin: 8

                            /* По клику по кнопке вызываем функцию
                             * календаря, которая отматывает месяц назад
                             * */
                            onClicked: control.showPreviousMonth()

                            // Стилизуем кнопку
                            style: ButtonStyle {
                                background: Rectangle {
                                    // Окрашиваем фон кнопки
                                    color: "#f7f7f7"
                                    /* И помещаем изображение, у которго будет
                                     * два источника файлов в зависимости от того
                                     * нажата кнопка или нет
                                     */
                                    Image {
                                        source: control.pressed ? "left_arrow_disable.png" : "left_arrow.png"
                                        width: parent.height - 8
                                        height: width
                                    }
                                }
                            }
                        }

                        // Помещаем стилизованный label
                        Label {
                            id: dateText
                            /* Забираем данные из title календаря,
                             * который в данном случае не будет виден
                             * и будет заменён данным label
                             */
                            text: styleData.title
                            color:  "#34aadc"
                            elide: Text.ElideRight
                            horizontalAlignment: Text.AlignHCenter
                            font.pixelSize: 16
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: previousMonth.right
                            anchors.leftMargin: 2
                            anchors.right: nextMonth.left
                            anchors.rightMargin: 2
                        }

                        // Кнопка промотки месяцев вперёд
                        Button {
                            id: nextMonth
                            width: parent.height - 8
                            height: width
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.right: parent.right

                            /* По клику по кнопке вызываем функцию
                             * календаря, которая отматывает месяц назад
                             * */
                            onClicked: control.showNextMonth()

                             // Стилизуем кнопку
                            style: ButtonStyle {
                                // Окрашиваем фон кнопки
                                background: Rectangle {
                                    color: "#f7f7f7"
                                    /* И помещаем изображение, у которго будет
                                     * два источника файлов в зависимости от того
                                     * нажата кнопка или нет
                                     */
                                    Image {
                                        source: control.pressed ? "right_arrow_disable.png" : "right_arrow.png"
                                        width: parent.height - 8
                                        height: width
                                    }
                                }
                            }
                        }
                    }


                    // Стилизуем отображением квадратиков с числами месяца
                    dayDelegate: Rectangle {
                        anchors.fill: parent
                        anchors.margins: styleData.selected ? -1 : 0
                        // Определяем цвет в зависимости от того, выбрана дата или нет
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"

                        // Задаём предопределённые переменные с цветами, доступные только для чтения
                        readonly property color sameMonthDateTextColor: "#444"
                        readonly property color selectedDateColor: "#34aadc"
                        readonly property color selectedDateTextColor: "white"
                        readonly property color differentMonthDateTextColor: "#bbb"
                        readonly property color invalidDateColor: "#dddddd"

                        // Помещаем Label для отображения числа
                        Label {
                            id: dayDelegateText
                            text: styleData.date.getDate() // Устанавливаем число в текущий квадрат
                            anchors.centerIn: parent
                            horizontalAlignment: Text.AlignRight
                            font.pixelSize: 10

                            // Установка цвета
                            color: {
                                var theColor = invalidDateColor; // Устанавливаем невалидный цвет текста
                                if (styleData.valid) {
                                    /* Определяем цвет текста в зависимости от того
                                     * относится ли дата к выбранному месяцу или нет
                                     * */
                                    theColor = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                                    if (styleData.selected)
                                        // Перекрашиваем цвет текста, если выбрана данная дата в календаре
                                        theColor = selectedDateTextColor;
                                }
                                theColor;
                            }
                        }
                    }
                }
            }

            // Делаем панель с кнопками
            Row {
                id: row
                height: 48
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                // Кнопка для закрытия диалога
                Button {
                    id: dialogButtonCalCancel
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: parent.width / 2 - 1

                    style: ButtonStyle {
                        background: Rectangle {
                            color: control.pressed ? "#d7d7d7" : "#f7f7f7"
                            border.width: 0
                        }

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

                // Вертикальный разделитель между кнопками
                Rectangle {
                    id: dividerVertical
                    width: 2
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    color: "#d7d7d7"
                }

                // Кнопка подтверждения выбранной даты
                Button {
                    id: dialogButtonCalOk
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: parent.width / 2 - 1

                    style: ButtonStyle {
                        background: Rectangle {
                            color: control.pressed ? "#d7d7d7" : "#f7f7f7"
                            border.width: 0
                        }

                        label: Text {
                            text: qsTr("Ok")
                            font.pixelSize: 14
                            color: "#34aadc"
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                        }
                    }

                    /* По клику по кнопке сохраняем выбранную дату во временную переменную
                     * и помещаем эту дату на кнопку в главном окне,
                     * после чего закрываем диалог
                     */
                    onClicked: {
                        tempDate = calendar.selectedDate
                        button.text = Qt.formatDate(tempDate, "dd.MM.yyyy");
                        dialogCalendar.close();
                    }
                }
            }
        }

        /* Данная функция необходима для того, чтобы
         * установить дату с кнопки в календарь,
         * иначе календарь откроется с текущей датой
         */
        function show(x){
            calendar.selectedDate = x
            dialogCalendar.open()
        }
    }
}

Insgesamt

Als Ergebnis sollten Sie eine Anwendung mit dem folgenden Dialogfeld haben, in dem sich ein benutzerdefinierter Kalender befindet. Auch im Video-Tutorial gibt es eine Demonstration der Anwendung mit Kommentaren zum Programmcode.

Videoanleitung