QML QtQuick.Controls 1 Calendar日历样式自定义

最新推荐文章于 2024-01-25 18:10:00 发布
最新推荐文章于 2024-01-25 18:10:00 发布
阅读量6.7k 收藏 15
点赞数 7
分类专栏： QML 三言两语 文章标签： Qt QML Calendar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongjianbo1992/article/details/90671577
版权

0.前言

QML中QtQuick.Controls 1里有Calendar这个控件，官方的文档以及示例都很简单，网上很多人也是自己重新实现的，我比较懒，照着QtQuick.Controls.Styles里的源码改了下。

（2021-1-7补充）最近又在用这个，发现之前从项目里copy代码出来的时候有些地方没弄好，所以文末补了个新的，色调和Qt默认效果差不多。

1.展示

效果如图：

我是用的Qt 5.9，不过这个控件在低版本里也可以用。还有就是他用的js的Date类，月份是从0开始的，用的时候要+1。代码如下：

//main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id:item_root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    CalendarBox{
        width: 300
        height: 300
        anchors.centerIn: parent

        calendar.onSelectedDateChanged:{
        }
        calendar.onDoubleClicked: {
        }

    }
}

//CalendarBox.qml

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4


Rectangle{
    width: 300
    height: 300
    border.width: 1
    border.color: Qt.rgba(33/255,104/255,101/255,1)
    color: "black"
    property alias calendar: the_calendar
    //这里没有把字体颜色之类的引出来，作为控件的时候需要定义这些

    Calendar{
        id:the_calendar
        anchors.fill: parent
        anchors.margins: 2

        style: CalendarStyle {
            gridColor: Qt.rgba(18/255,62/255,68/255,1)
            //gridVisible: false

            background: Rectangle{
                id:background
                anchors.fill: parent
                color:Qt.rgba(18/255,62/255,68/255,1)
            }

            //标题年月
            navigationBar:Item{
                //color: "transparent"
                height: the_calendar.height/8
                Canvas {
                    id: prevYear
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    width: parent.height/2
                    height: width
                    //color: bgColor
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.lineWidth = 1
                        ctx.strokeStyle = Qt.rgba(100/255,1,1,1)
                        ctx.beginPath()
                        ctx.moveTo(0,height*3/4)
                        ctx.lineTo(width/2,height/4)
                        ctx.lineTo(width,height*3/4)
                        //ctx.closePath()
                        ctx.stroke()
                    }

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            control.showPreviousYear()
                        }
                    }
                }
                Canvas {
                    id: nextYear
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: prevYear.right
                    anchors.leftMargin: 10
                    width: parent.height/2
                    height: width
                    //color: bgColor
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.lineWidth = 1
                        ctx.strokeStyle = Qt.rgba(100/255,1,1,1)
                        ctx.beginPath()
                        ctx.moveTo(0,height/4)
                        ctx.lineTo(width/2,height*3/4)
                        ctx.lineTo(width,height/4)
                        //ctx.closePath()
                        ctx.stroke()
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            control.showNextYear()
                        }
                    }
                }
                Label {
                    id: labelYear
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: nextYear.right
                    anchors.leftMargin: 15
                    //text: the_calendar.selectedDate.getFullYear()+qsTr('年')
                    text:control.visibleYear+qsTr('年')
                    //elide: Text.ElideRight
                    horizontalAlignment: Text.AlignLeft
                    font.pixelSize: 14
                    font.family: "SimSun"
                    color: Qt.rgba(101/255,1,1,1)
                }

                Canvas {
                    id: nextMonth
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    width: parent.height/2
                    height: width
                    //color: bgColor
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.lineWidth = 1
                        ctx.strokeStyle = Qt.rgba(100/255,1,1,1)
                        ctx.beginPath()
                        ctx.moveTo(0,height/4)
                        ctx.lineTo(width/2,height*3/4)
                        ctx.lineTo(width,height/4)
                        //ctx.closePath()
                        ctx.stroke()
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            control.showNextMonth()
                        }
                    }
                }
                Canvas {
                    id: prevMonth
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: nextMonth.left
                    anchors.rightMargin: 10
                    width: parent.height/2
                    height: width
                    //color: bgColor
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.lineWidth = 1
                        ctx.strokeStyle = Qt.rgba(100/255,1,1,1)
                        ctx.beginPath()
                        ctx.moveTo(0,height*3/4)
                        ctx.lineTo(width/2,height/4)
                        ctx.lineTo(width,height*3/4)
                        //ctx.closePath()
                        ctx.stroke()
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            control.showPreviousMonth()
                        }
                    }
                }
                Label {
                    id: labelMonth
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: prevMonth.left
                    anchors.rightMargin: 15
                    //注意Date原本的月份是0开始
                    text: (control.visibleMonth+1)+qsTr('月')
                    //elide: Text.ElideRight
                    horizontalAlignment: Text.AlignRight
                    font.pixelSize: 14
                    font.family: "SimSun"
                    color: Qt.rgba(101/255,1,1,1)
                }

                Rectangle{
                    width: parent.width
                    height: 1
                    anchors.bottom: parent.bottom
                    color: "black"
                }
            }
            //星期
            dayOfWeekDelegate: Item{
                //color: "transparent"
                height: the_calendar.height/8
                Label {
                    text: control.__locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
                    anchors.centerIn: parent
                    color: Qt.rgba(101/255,1,1,1)
                    font.pixelSize: 12
                    font.family: "SimSun"
                }
            }
            dayDelegate: Rectangle {
                //选中-当月未选中-其他
                color: styleData.selected
                       ?Qt.rgba(52/255,142/255,145/255,1)
                       : (styleData.visibleMonth && styleData.valid
                          ?Qt.rgba(6/255,45/255,51/255,1)
                          : Qt.rgba(3/255,28/255,35/255,1));

                Label {
                    text: styleData.date.getDate()
                    anchors.centerIn: parent
                    font.pixelSize: 12
                    font.family: "SimSun"
                    color: styleData.valid
                           ?Qt.rgba(197/255,1,1,1)
                           : Qt.rgba(16/255,100/255,100/255,1)
                }
            }

        }
    }
}

2.更新

使用时可以放到 Dialog 或者 Popup 里

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

//日历样式自定义
//龚建波 2021-1-7
Calendar{
    id:control

    implicitHeight: 280
    implicitWidth: 280

    //普通色块背景
    property color normalBgColor: "#FFFFFF"
    //选中项背景
    property color selectBgColor: "#305FDE"
    //超出月份背景
    property color outBgColor: normalBgColor
    //不可选背景（最大最小范围外）
    property color disableBgColor: "#F0F0F0"
    //网格颜色
    property color gridColor: "#E5E5E5"
    //标题文本颜色
    property color darkTextColor: "#242526"
    //日期文本颜色
    property color lightTextColor: "#555658"
    //超出月份文本颜色
    property color outTextColor: "#999999"
    //不可选文本（最大最小范围外）
    property color disableTextColor: "#BBBBBB"

    style: CalendarStyle {
        gridColor: control.gridColor
        //gridVisible: false

        background: Rectangle{
            id:background
            anchors.fill: parent
            color: control.normalBgColor
        }

        //标题年月
        navigationBar:Item{
            //color: "transparent"
            height: control.height/8
            Canvas {
                id: prevYear
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 10
                width: parent.height/2
                height: width
                //color: bgColor
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.lineWidth = 1
                    ctx.strokeStyle = control.darkTextColor
                    ctx.beginPath()
                    ctx.moveTo(0,height*3/4)
                    ctx.lineTo(width/2,height/4)
                    ctx.lineTo(width,height*3/4)
                    //ctx.closePath()
                    ctx.stroke()
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        control.showPreviousYear()
                    }
                }
            }
            Canvas {
                id: nextYear
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: prevYear.right
                anchors.leftMargin: 10
                width: parent.height/2
                height: width
                //color: bgColor
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.lineWidth = 1
                    ctx.strokeStyle = control.darkTextColor
                    ctx.beginPath()
                    ctx.moveTo(0,height/4)
                    ctx.lineTo(width/2,height*3/4)
                    ctx.lineTo(width,height/4)
                    //ctx.closePath()
                    ctx.stroke()
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        control.showNextYear()
                    }
                }
            }
            Label {
                id: labelYear
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: nextYear.right
                anchors.leftMargin: 15
                //text: control.selectedDate.getFullYear()+qsTr('年')
                text: control.visibleYear+qsTr('年')
                //elide: Text.ElideRight
                horizontalAlignment: Text.AlignLeft
                font.pixelSize: 14
                font.family: "Microsoft YaHei"
                color: control.darkTextColor
            }

            Canvas {
                id: nextMonth
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 10
                width: parent.height/2
                height: width
                //color: bgColor
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.lineWidth = 1
                    ctx.strokeStyle = control.darkTextColor
                    ctx.beginPath()
                    ctx.moveTo(0,height/4)
                    ctx.lineTo(width/2,height*3/4)
                    ctx.lineTo(width,height/4)
                    //ctx.closePath()
                    ctx.stroke()
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        control.showNextMonth()
                    }
                }
            }
            Canvas {
                id: prevMonth
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: nextMonth.left
                anchors.rightMargin: 10
                width: parent.height/2
                height: width
                //color: bgColor
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.lineWidth = 1
                    ctx.strokeStyle = control.darkTextColor
                    ctx.beginPath()
                    ctx.moveTo(0,height*3/4)
                    ctx.lineTo(width/2,height/4)
                    ctx.lineTo(width,height*3/4)
                    //ctx.closePath()
                    ctx.stroke()
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        control.showPreviousMonth()
                    }
                }
            }
            Label {
                id: labelMonth
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: prevMonth.left
                anchors.rightMargin: 15
                //注意Date原本的月份是0开始
                text: (control.visibleMonth+1)+qsTr('月')
                //elide: Text.ElideRight
                horizontalAlignment: Text.AlignRight
                font.pixelSize: 14
                font.family: "Microsoft YaHei"
                color: control.darkTextColor
            }

            Rectangle{
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
                color: control.gridColor
            }
        }
        //星期
        dayOfWeekDelegate: Item{
            //color: "transparent"
            height: control.height/8
            Label {
                text: control.__locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
                anchors.centerIn: parent
                color: control.darkTextColor
                font.pixelSize: 14
                font.family: "Microsoft YaHei"
            }
        }
        dayDelegate: Rectangle {
            //选中-当月未选中-其他
            color: (styleData.selected
                    ? control.selectBgColor
                    : styleData.valid
                      ? styleData.visibleMonth
                        ? control.normalBgColor
                        : control.outBgColor
                    : control.disableBgColor)

            Label {
                text: styleData.date.getDate()
                anchors.centerIn: parent
                font.pixelSize: 12
                font.family: "Microsoft YaHei"
                color: (styleData.selected
                        ? control.normalBgColor
                        : styleData.valid
                          ? styleData.visibleMonth
                            ? control.lightTextColor
                            : control.outTextColor
                        : control.disableTextColor)
            }
        }
    }
}

3.参考文档

 Qt文档：5.7\Src\qtquickcontrols\src\controls\Styles\Base\CalendarStyle.qml

Qt文档：5.7\Src\qtquickcontrols\src\controls\Calendar.qml

 

 

龚建波
关注
  • 7
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
Qml控件之Calendar日历
Qt君
01-08 2436
Calendar(日历)控件是基于Qml实现的，它兼容于QtQuick 1.x和QtQuick 2.x。可用于显示日期信息。
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
QT/QML 的日历控件，纯QML实现。
QComboBox 组件 个人 美化 已解决
最新发布
PHP代码的博客
01-25 545
下拉框QComboBox还有两种状态编辑editable和展开on，我这边因为不可编，所以就没写编辑状态，只写了展开时通过对padding数值的改变，从而实现的动态变化。我对qss只会一些简单的，所以每次都得查资料，自己调，好麻烦，特别是之前一篇博客关于菜单样式的设置。下拉项样式的设置和我之前博客说的菜单项的写法不一样的，和列表表格之类的写法是一样的，比较简单，直接设置。这个QComboBox下拉框的样式设置有稍微复杂，有些关键点得记住，所以用这篇博客记录下。注意，最重要的一点就是要使qss生效，
Qt 自定义 Calendar 日历控件
07-31
Qt 自定义 Calendar 日历 控件 方便控制 及实现样式表
Qt 示例学习--2. calendar quick controls
skyztttt的专栏
04-08 1848
Qt 示例学习--calendar quick controls
QML－－－自定义日历Calendar
wangpailiulanqi8的博客
03-06 606
【代码】QML－－－自定义日历Calendar。
Qt编写自定义控件-光晕日历
hw5230的博客
09-14 289
超过160个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏，flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。每个类都可以独立成一个单独的控件，零耦合，每个控件一个头文件和一个实现文件，不依赖其他文件，方便单个控件以源码形式集成到项目中，较少代码量。qwt的控件类环环相扣，高度耦合，想要使用其中一个控件，必须包含所有的代码。
Calendar风格样式自定义——QML
xiaopei_yan的博客
08-26 1813
前言 QML的日历只有Controls 1有，Controls 2里暂时还没有（说个题外话，2里的控件明显比1里简单好用多了），属性也就那么几个，比较简单，但是有些功能就有点欠缺。 我这次是日历有用到两个一个大的一个小的，为了复用，我就都写一块了，看着可能乱些。 效果图 上传的动图好像有点地方字体不清晰，这个可能是csdn问题吧，界面部分是没这个的。 代码和说明 通过自带的帮助可以看到Calendar的属性就那么几个（如下），就根据 自己的需求进行设置就行了。 dayOfWeekForma
QML自定义的日历控件
zjgo007的专栏
08-31 1819
QML中提供了日历的控件，该文主要记录对日历控件的样式设置。
qt lineedit 刷新显示文本_Qt官方示例日历控件
weixin_39678531的博客
12-07 607
该例子介绍QCalendarWidget的用法。总结一些用法QCalendarWidget*calendar;设置最小日期calendar->setMinimumDate(date);设置最大日期calendar->setMaximumDate(date);设置当前日期calendar->setSelectedDate(date);显示日历表格calendar-&gt...
Qt自定义DateTime控件--实现日历及时间选择器自定义
slowlytalk
07-06 9506
怎样能够完全地实现一个不用其他控件就能正常使用的控件。最近尝试了下，使用了Qt的基础控件实现了一个完全自定义的日历控件，顺便改良了一下以前的时间选择器，测试效果还可以。终于实现了自定义的DateTime控件。......
QtQuick.Controls2实现TreeView
02-20
qml的QtQuick.Controls2是没有树控件的，这是我自己花了两天时间写的树控件，可以直接使用，效果非常好，环境是qt5.12.1
QT QML Quick Controls2（Swipe View滑动翻页以及隐藏面板）
03-30
为智能手机或桌面应用提供滑动翻页功能，将不同主题和子应用分别在不同页面上，还提供隐藏面板，将详细信息隐藏在其中。
《QML和Qt Quick快速入门》示例源码
09-16
《QML和Qt Quick快速入门》示例源码.zip
qt例程QML_QtQuick_PY.7z
07-19
qt例程QML_QtQuick_PY.7z
QML与C++交互
热门推荐
龚建波
02-27 3万+
前言 文档如是说，QML旨在通过C ++代码轻松扩展。Qt QML模块中的类使QML对象能够从C ++加载和操作，QML引擎与Qt元对象系统集成的本质使得C ++功能可以直接从QML调用。这允许开发混合应用程序，这些应用程序是通过混合使用QML，JavaScript和C ++代码实现的。 QML is designed to be easily extensible through C++ c...
QML QtQuick 2 TableView的使用：展示表格数据
龚建波
12-16 1万+
（更新日期：2020-2-7） 1.写在前面 在Qt5.12中，QtQuick 2 添加了 TableView 组件，功能和 QtQuickControl 1 中的 TableView 类似，但是接口大不一样（QtQuick Control 1已经处于弃用状态，不建议使用）。 Qt Creator中有两个 QtQuick 2 TableView 的示例，但是都不是数据类型的，参考起来不大方...
QML鼠标事件传递（鼠标穿透）
龚建波
11-18 1万+
有时候，我们的MouseArea区域重叠了，这时候默认是最上层的MouseArea接收鼠标事件，而我们可能需要底层也能接收这个事件。虽然可以关联两个MouseArea的信号，但是这种操作局限性比较大，耦合性太强，某个MouseArea并不能被外部所见等等。在Qt Widgets中可以通过setAttribute(Qt::WA_TransparentForMouseEvents,true...
QML 基本文本输入组件TextInput、TextField、TextEdit、TextArea
龚建波
09-22 1万+
0.前言 Qt Quick 提供了两个基本的文本输入组件 TextInput 和 TextEdit ，在 Control 模块中提供了以前面两种为基类的 TextField 和 TextArea 。其中，TextInput 和 TextField 类似 QWidgets 里面的 QLineEdit ，可以作为密码框或限制输入内容；而 TextEdit 和 TextArea 类似 QTextEdi...
QML QtQuick.Controls 2.12怎么使用DatePicker
05-26
在QtQuick.Controls 2.12中，可以使用DatePicker控件来选择日期。以下是一个简单的示例： ```qml import QtQuick.Controls 2.12 DatePicker { anchors.centerIn: parent onAccepted: console.log(selectedDate) } ``` 在这个示例中，DatePicker控件被创建，并使用anchors.centerIn将其居中于其父项中。`onAccepted`信号被连接到一个JavaScript函数，当用户点击“完成”按钮时，该函数将在控制台中打印所选日期。 DatePicker控件有一些可用的属性和方法，例如： - `selectedDate`：获取或设置所选日期 - `minimumDate`和`maximumDate`：设置可选日期的最小和最大值 - `locale`：设置DatePicker控件的语言环境 你可以在Qt文档中找到更多有关DatePicker控件的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

龚建波

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

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

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

打赏作者

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

抵扣说明：

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

余额充值