Evgenii Legotckoi
Evgenii Legotckoi22 октября 2015 г. 12:40

QML - Урок 006. Custom Calendar in Qt QML or Qt QML Android

В данном уроке хотелось бы рассказать о том, каким образом можно кастомизировать внешний вид объекта Calendar в Qt Qml . Подправить например цвета, шрифт, а также красиво вписать его в диалоговое окно для выбора даты. Поэтому определимся с тем, как должно работать наше приложение и как оно должно выглядеть:

  1. В главном окне приложения будет находиться стандартная кнопка, на которой отображается дата (хотя если хотите, то можете и её кастомизировать );
  2. При нажатии на кнопку открывается диалоговое окно в котором располагается Calendar и две кнопки ("Ok" и "Cancel"). В Calendar устанавливается дата, которая была указана на кнопке;
  3. При нажатии на кнопку "Cancel" ничего не происходит, а диалоговое окно просто закрывается;
  4. При нажатии на кнопку "Ok" диалоговое окно закрывается, а на кнопке главного окна отобразится дата, которая была выбрана в календаре.

Полагаю, что Вы уже успели заметить, что кастомизация интерфейса приложения в Qt QML проходит одинаково, как для Desktop версий, так и для Android. Иначе бы разработка под Qt не считалась кроссплатформенной. Следовательно я не буду сильно вдаваться в разницу настройки отображения диалогового окна для Desktop версии или для Android версии. Этот момент я объяснял в уроке по созданию кастомизированного диалогового окна .


Структура проекта для Custom Calendar

Для демонстрации примера был создан новый проект со следующей структурой:

  • QmlCalendarCustom.pro - профайл проекта;
  • main.cpp - основной файл исходных кодов;
  • main.qml - основной файл интерфейса на QML;
  • left_arrow.png - не нажатая стрелка влево;
  • left_arrow_disable.png - нажатая стрелка влево;
  • right_arrow.png - не нажатая стрелка вправо;
  • right_arrow_disable.png - нажатая стрелка вправо.

Стрелки

Применяю следующие изображения для кастомизации пролистывания месяцев в Calendar.

main.cpp

Данный файл создаётся по умолчанию, но я приведу его программный код, чтобы не было путаницы.

#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

А вот всё безобразие будем творить именно в данном файле. В нём же создадим Custom Calendar, который будет устанавливать дату на кнопку.

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()
        }
    }
}

Итог

В результате у Вас должно получиться приложение со следующим диалоговым окном, в котором присутствует Custom Calendar. Также в видеоуроке привеена демонстрация работы приложения с комментариями по программному коду.

Видеоурок

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

Вам это нравится? Поделитесь в социальных сетях!

M
  • 12 октября 2017 г. 15:13

Все очень круто, больше спасибо.
Подскажите пжлст что такое styleData?
Это какой то объект из dialogCalendar
Если я захочу другое отображение колендаря, мне нужно будет перегружать функции в новом классе?

Evgenii Legotckoi
  • 13 октября 2017 г. 3:13

Добрый день!
Ага, это внутренний объект стилей.

И да, понадобится перегружать. А вообще посмотрите ещё календарь из Quick.Controls 2.0, поскольку этот пример из Quick.Controls 1.4 - он устаревший.
А в новых контролах совсем иначе сделано, там вроде бы вместо стилей делегаты используются, всё несколько проще. Будут вопросы, на форуме спрашивайте по новым контролом, что смогу, подскажу.
M
  • 13 октября 2017 г. 6:20

Спасибо)

U
  • 6 января 2020 г. 9:35
  • (ред.)

Привет. Вопрос именно по старой версии календаря(controls 1.4).
1. Подскажите как календарь определяет выбранный день.
2. В styleData.selected возвращается true если дата выбрана, но я так и не нашёл как вручную выбирается дата...
3. ...если работать с onClicked в области делегата, то автоматический механизм выбора ячейки календаря перестаёт работать. Как быть?
Подытожу. Без onClicked подсветка выбранного дня работает, но если мне нужно производить какие нибудь действия по нажатии на ячейку через onClicked, то всё ломается. Это же касается и onPressed, onReleased и пр.
П.С. Пробовал в onClicked менять градиент выбранного дня - получилось, но мозгов допилить изменение градиента остальных дней не хватает.

U
  • 7 января 2020 г. 8:57
  • (ред.)

Отвечу сам себе.
Чтоб подсветка ячейки менялась при нажатии применил следующее:

MouseArea{
    anchors.fill: daydel//id делегата дня
    onClicked: {
    //curDate, curD, curM, curY - стринговые переменные объявленные в коренном объекте(property string curDate)
        curDate = styleData.date.toLocaleDateString("dd.MM.yyyy")
        curD = curDate.slice(0,2)//вернет день дд
        curM = curDate.slice(3,5)//вернет месяц мм
        curY = curDate.slice(-4)//вернет год гггг
        calendar.selectedDate = curY+"-"+curM+"-"+curD
    }
}

Но пока что имеются проблемы с правильным переходом на предыдущий/следующий месяц и получением правильной даты при нажатии на дату не находящуюся в текущем месяце.

U
  • 8 января 2020 г. 6:52
  • (ред.)

.

Evgenii Legotckoi
  • 9 января 2020 г. 16:36

Вы перекрываете события этим MouseArea, попробуйте пропихнуть всё дальше включив следующее свойство

MouseArea {
    propagateComposedEvents: true
}

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
B

C++ - Тест 002. Константы

  • Результат:16баллов,
  • Очки рейтинга-10
B

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

  • Результат:46баллов,
  • Очки рейтинга-6
FL

C++ - Тест 006. Перечисления

  • Результат:80баллов,
  • Очки рейтинга4
Последние комментарии
k
kmssr8 февраля 2024 г. 18:43
Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Анатолий Кононенко5 февраля 2024 г. 1:50
Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVA25 декабря 2023 г. 10:30
Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJo25 декабря 2023 г. 8:38
Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
G
Gvozdik18 декабря 2023 г. 21:01
Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Сейчас обсуждают на форуме
P
Pisych27 февраля 2023 г. 4:04
Как получить в массив значения из связанной модели? Спасибо, разобрался:))
AC
Alexandru Codreanu19 января 2024 г. 11:57
QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
BlinCT
BlinCT27 декабря 2023 г. 8:57
Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
Дмитрий
Дмитрий10 января 2024 г. 4:18
Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
Evgenii Legotckoi
Evgenii Legotckoi12 декабря 2023 г. 6:48
Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

Следите за нами в социальных сетях