В данном уроке хотелось бы рассказать о том, каким образом можно кастомизировать внешний вид объекта Calendar в Qt Qml . Подправить например цвета, шрифт, а также красиво вписать его в диалоговое окно для выбора даты. Поэтому определимся с тем, как должно работать наше приложение и как оно должно выглядеть:
- В главном окне приложения будет находиться стандартная кнопка, на которой отображается дата (хотя если хотите, то можете и её кастомизировать );
- При нажатии на кнопку открывается диалоговое окно в котором располагается Calendar и две кнопки ("Ok" и "Cancel"). В Calendar устанавливается дата, которая была указана на кнопке;
- При нажатии на кнопку "Cancel" ничего не происходит, а диалоговое окно просто закрывается;
- При нажатии на кнопку "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. Также в видеоуроке привеена демонстрация работы приложения с комментариями по программному коду.
Все очень круто, больше спасибо.
Подскажите пжлст что такое styleData?
Это какой то объект из dialogCalendar
Если я захочу другое отображение колендаря, мне нужно будет перегружать функции в новом классе?
Добрый день!
Ага, это внутренний объект стилей.
Спасибо)
Привет. Вопрос именно по старой версии календаря(controls 1.4).
1. Подскажите как календарь определяет выбранный день.
2. В styleData.selected возвращается true если дата выбрана, но я так и не нашёл как вручную выбирается дата...
3. ...если работать с onClicked в области делегата, то автоматический механизм выбора ячейки календаря перестаёт работать. Как быть?
Подытожу. Без onClicked подсветка выбранного дня работает, но если мне нужно производить какие нибудь действия по нажатии на ячейку через onClicked, то всё ломается. Это же касается и onPressed, onReleased и пр.
П.С. Пробовал в onClicked менять градиент выбранного дня - получилось, но мозгов допилить изменение градиента остальных дней не хватает.
Отвечу сам себе.
Чтоб подсветка ячейки менялась при нажатии применил следующее:
Но пока что имеются проблемы с правильным переходом на предыдущий/следующий месяц и получением правильной даты при нажатии на дату не находящуюся в текущем месяце.
.
Вы перекрываете события этим MouseArea, попробуйте пропихнуть всё дальше включив следующее свойство