67.qt quick-qml自定义日历组件(支持竖屏和横屏)

已于 2022-08-02 18:09:51 修改
阅读量1.7k 收藏 4
点赞数 1
分类专栏： Qt Quick/QML入门到精通 文章标签： qt 开发语言
于 2022-06-22 21:49:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37997682/article/details/125417264
版权
Qt Quick/QML入门到精通 专栏收录该内容
107 篇文章 481 订阅 ¥299.90 ¥399.90
订阅专栏
本文介绍了如何从 qml-material 项目移植一个适用于竖屏和横屏的自定义日历组件。组件包括多种属性如 `dayOfWeekFormat`、`frameVisible`、`locale` 等，以及 `clicked`、`doubleClicked` 等信号方法。文章提供了修改后的代码，并提示性能可能不佳，建议根据需求优化。
摘要由CSDN通过智能技术生成

从GitHub - papyros/qml-material: Material Design implemented in QtQuick移植下来的,凑合用.

截图如下所示(已上传专栏群):

效果如下所示:

1.Calendar介绍

属于import QtQuick.Controls 1.x模块,所以使用时,需要引用下别名模块
Properties: 

  • dayOfWeekFormat : int,一周中各天的显示格式(在页眉中)。Locale.ShortFormat是默认的推荐格式
  • frameVisible : bool, 该属性设置日历周围框架的可
了解本专栏 订阅专栏 解锁全文
诺谦
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
【Qt开发教程】日历日期选择显示月份日历控件QCalendarWidget类详解及实战应用
科技改变人类，技术成就未来
07-24 944
QCalendarWidget 提供了一个强大而灵活的日期选择控件，可以轻松集成到 Qt 应用程序中。通过合理设置日历控件的显示参数、日期范围和样式，可以实现用户友好的日期输入功能。结合信号和槽机制，可以响应日期选择的变化，实现更多高级功能。在自定义日历样式和日期选择验证时，通过子类化和重载方法，可以实现个性化的日期选择体验。注意处理日期范围和信号连接问题，确保日历控件的正常运行和用户交互流程的顺畅。
Qml控件之Calendar日历
Qt君
01-08 2590
Calendar(日历)控件是基于Qml实现的，它兼容于QtQuick 1.x和QtQuick 2.x。可用于显示日期信息。
QML 简单日历控件
12-25
一个qml的日历控件 很简单 没有定义很复杂的风格， 代码很简单，如果要改风格 修改spinner.qml也可以很容易做到
QML自定义的日历控件
zjgo007的专栏
08-31 2031
QML中提供了日历的控件，该文主要记录对日历控件的样式设置。
QML 日历控件
qq_42108501的博客
09-26 990
qml 日历Calendar import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQml 2.2 import QtQuick.Controls 1.4 import QtQuick.Layouts 1.3 Rectangle{ width: 300 height: 300 border.width: 1 property alias calen
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
此外，QML的模块系统允许导入自定义组件或Qt提供的内置组件，例如`import QtQuick.Controls`可以引入Qt的标准控件集，其中可能包括日历控件的预定义实现。 在压缩包中的"Qt-Qml-Calendar"可能包含以下文件和目录： ...
92.qt qml-日期/日期时间/时间选择器(日历选择器)
最新发布
抵抗时间扭曲，坚持做一件有意义的事
07-11 2196
QML日历组件我们之前移植过:67.qt quick-qml自定义日历组件(支持竖屏和横屏)_qml日历_诺谦的博客-CSDN博客但是该组件内部代码比较坑的就是全部使用自定义对象，导致性能不行，动画卡顿，并且不好加时间选择，所以本章我们重新学习，然后重构一个日期时间选择器，支持更改日期 或者 日期时间重构需要使用到Calendar类和样式类2.Calendar类介绍int,一周中各天的显示格式(在页眉中)。Locale.ShortFormat是默认的推荐格式。
Qml日历
zhengtianzuo的博客
11-01 2000
目前显示日历还没有QtQuick.Controls2, 只能用1显示 Calendar { anchors.centerIn: parent style: CalendarStyle { gridVisible: false dayDelegate: Rectangle { prope
自编Qml时间控件（实用）
12-21
笔者在开发产品时，由于使用的是qt4.8系列的版本，用qml编写一个闹钟，要选择时间，系统自带没有时间控件。这时候也需要使用这一个时间控件，这时候就必须要自己写一个时间控件，分享给大家。
基于QT qml的精美日历
06-08
基于QT qml的精美日历，采用QML方式进行实现的。。。。。。。
qt自定义日历
12-15
利用QLabel和日历算法：蔡勒（Zeller）公式自己写了一个可以选中多个日期的日历控件
Qt自定义日历
08-16
//自定义日历可看上篇文章 QCalendarTimeEdit::QCalendarTimeEdit(QWidget *parent) : QLineEdit(parent) , m_calendarWidget(nullptr) , m_widget(nullptr) { m_minDateTime = QDateTime::currentDateTime(); { QTime maxtime; maxtime.setHMS(23, 59, 59); m_maxDateTime.setTime(maxtime); m_maxDateTime.setDate(QDate::currentDate().addDays(365)); } setContextMenuPolicy(Qt::NoContextMenu); } QCalendarTimeEdit::~QCalendarTimeEdit() { if (m_widget) { delete m_widget; m_widget = nullptr; } } void QCalendarTimeEdit::initControlcalendar() { m_widget = new BackPaintWidget(nullptr); m_widget->setObjectName("calendarFramWidget"); loadStyleSheet(m_widget, "CalendarWidget"); m_widget->setAttribute(Qt::WA_TranslucentBackground); m_widget->setWindowFlags(Qt::WindowStaysOnTopHint | Qt::FramelessWindowHint | Qt::SubWindow); QHBoxLayout* layout = new QHBoxLayout; layout->setMargin(8); layout->setSpacing(0); m_calendarWidget = new QCustomCalendarTimeWidget(m_widget); m_widget->setCalendarTimeWidget(m_calendarWidget); m_calendarWidget->setCalendarMinDate(m_minDateTime); m_calendarWidget->setCalendarMaxDate(m_maxDateTime); //m_calendarWidget->disconnect(SIGNAL(selectionChanged())); //m_calendarWidget->disconnect(SIGNAL(clicked(QDate))); layout->addWidget(m_calendarWidget); m_widget->setLayout(layout); connect(m_calendarWidget, &QCustomCalendarTimeWidget;::signalSetCalendarTime, [this](const QDateTime& date){ setText(date.toString("yyyy-MM-dd hh:mm:ss")); hideCalendarTimeWidget(); }); connect(m_calendarWidget, &QCustomCalendarTimeWidget;::signalClearDateTime, [this](){ clear(); hideCalendarTimeWidget(); }); hideCalendarTimeWidget(); } void QCalendarTimeEdit::setCalendarMinDate(const QDateTime &datetime;) { m_minDateTime = datetime; if (m_calendarWidget) { m_calendarWidget->setCalendarMinDate(m_minDateTime); } } void QCalendarTimeEdit::setCalendarMaxDate(const QDateTime &datetime;) { m_maxDateTime = datetime; if (m_calendarWidget) { m_calendarWidget->setCalendarMaxDate(m_maxDateTime); } } void QCalendarTimeEdit::popCalendarTimeWidget() { if (m_calendarWidget == nullptr) { initControlcalendar(); } QRect rect = qApp->desktop()->availableGeometry(0); QPoint gloadPos = mapToGlobal(QPoint(-8, this->height())); if (gloadPos.y() + m_calendarWidget->height() > rect.height()) { int y = gloadPos.y() - this->height() - m_calendarWidget->height(); gloadPos.setY(y); } m_widget->move(gloadPos); m_widget->show(); } void QCalendarTimeEdit::hideCalendarTimeWidget() { m_widget->hide(); } void QCalendarTimeEdit::mousePressEvent(QMouseEvent *event) { __super::mousePressEvent(event); if (event->button() == Qt::LeftButton) { popCalendarTimeWidget(); } } void QCalendarTimeEdit::keyPressEvent(QKeyEvent *event) { Q_UNUSED(event); }
Qt6 QML 日历样式自定义
龚建波
04-16 2790
Qt6 把 Qt5 labs 中的日历组件放到了 Controls2 里，和 Qt5 Controls1 中的 Calendar 组件不同，新的日历由三个部件组成：MonthGrid 展示月内日期、DayOfWeekRow 展示星期几、WeekNumberColumn 展示第几周。因为文档示例过于简单，所以还需要借鉴源码中的默认实现。 MonthGrid 日期表格，主要是定义 delegate 单元格样式，文档提供了 delegate 中可以访问的 model role：（model.day 表示日期，m
QML QtQuick.Controls 1 Calendar日历样式自定义
龚建波
05-29 6998
0.前言 QML中QtQuick.Controls 1里有Calendar这个控件，官方的文档以及示例都很简单，网上很多人也是自己重新实现的，我比较懒，照着QtQuick.Controls.Styles里的源码改了下。 1.展示 效果如图： 我是用的Qt 5.9，不过这个控件在低版本里也可以用。还有就是他用的js的Date类，月份是从0开始的，用的时候要+1。代码如下： //main...
QML－－－自定义日历Calendar
wangpailiulanqi8的博客
03-06 726
【代码】QML－－－自定义日历Calendar。
qml日历
leileilove100的专栏
03-03 1169
Qt日历控件封装基于QML
09-25 473
日历控件单元格颜色控制。创建日历并修改其样式。
QML自定义组件：插件方式集成到Qt Designer库面板详解
在进行QtQuick开发时，自定义组件的使用是常见的需求。本文将重点介绍如何将自定义的QML组件以插件的形式显示并在Qt Creator设计工具的库面板中方便地使用。首先，我们区分两种常见的自定义组件导入方式：直接导入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

诺谦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值