QML自定义的日历控件

喵喵叫的猴

已于 2022-08-31 14:12:33 修改

阅读量2k

点赞数 1

分类专栏： QML 文章标签： qml

于 2022-08-31 14:05:45 首次发布

本文链接：https://blog.csdn.net/zjgo007/article/details/126622615

版权

QML 专栏收录该内容

49 篇文章 36 订阅

订阅专栏

QML中提供了日历的控件Calendar，但该控件为QtQuick.Controls 1中提供的控件，因此只能使用QtQuick.Controls.Styles的方式对该控件进行设置，效果如图：

在Qt文档中关于日历Calendar的描述为：Calendar允许从天数网格中选择日期，类似于QCalendarWidget。日历上的日期可以用鼠标选择，也可以用键盘导航。CalendarStyle 可用于设置日历组件的样式，其样式组件区域为：

property color backgroundColor: 设置日历整体背景颜色，可设置半透明效果
property color backgroundBorderColor: 背景边框颜色
property color navigationBarBackgroundColor: 导航栏背景颜色
property color navigationBarTextColor: 导航栏字体颜色
property color dayOfWeekBackgroundColor: 星期显示栏背景颜色
property color dayOfWeekTextColor:星期显示栏字体颜色
property color daySelectedBackgroundColor: 选中的日期的背景颜色
property color dayInvalidBackgroundColor: 非本月日期的背景颜色
property color dayTextColor: 本月日期字体颜色
property color gridLineColor: 日期框颜色

大家在使用过程中可结合我QML中提供的属性和文档进行自定义日历样式和添加修改属性，QML源码：

import QtQml 2.7
import QtQuick 2.7
import QtQuick.Controls 1.6
import QtQuick.Controls.Styles 1.4

Calendar {
    id:calendar
    width: 260
    height: 260
    frameVisible:false
    property color backgroundColor: "#d90b394e"
    property color backgroundBorderColor: "#e6115777"
    property color navigationBarBackgroundColor: "#99b3b3b3"
    property color navigationBarTextColor: "#38d3dc"
    property color dayOfWeekBackgroundColor: "#4d2d2f39"
    property color dayOfWeekTextColor: "#38d3dc"
    property color daySelectedBackgroundColor: "#6638d3dc"
    property color dayInvalidBackgroundColor: "#4d5c5952"
    property color dayTextColor: "#38d3dc"
    property color gridLineColor: "#555"

    signal dateChanged(var dateStr)

    onClicked: {
        var s = datamanager.dateToString(date)
        dateChanged(s)
    }
    style: CalendarStyle {
             gridVisible: false
             background: Rectangle{
                 color: calendar.backgroundColor
                 border.color: calendar.backgroundBorderColor
             }
             navigationBar:Rectangle{
                 height: 30
                 color: calendar.navigationBarColor
                 Label {
                     text: styleData.title
                     anchors.centerIn: parent
                     color: calendar.titleColor
                     font.pixelSize: 13
                     font.family: "微软雅黑"
                     font.bold: true
                 }
                 Label {
                     anchors.left: parent.left
                     width: 30
                     height: 30
                     text:"<"
                     font.pixelSize: 16
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
                     font.family: "微软雅黑"
                     font.bold: true
                     color: "#cecece"
                     MouseArea{
                         anchors.fill: parent
                         onClicked: calendar.showPreviousMonth()
                     }
                 }
                 Label {
                     anchors.right: parent.right
                     width: 30
                     height: 30
                     text:">"
                     font.pixelSize: 16
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
                     font.family: "微软雅黑"
                     font.bold: true
                     color: "#cecece"
                     MouseArea{
                         anchors.fill: parent
                         onClicked: calendar.showNextMonth()
                     }
                 }
             }

             dayOfWeekDelegate:Rectangle{
                 color: calendar.dayOfWeekBackgroundColor
                 height: 26
                 Label {
                     text: Qt.locale().dayName(styleData.dayOfWeek)
                     anchors.centerIn: parent
                     color: calendar.dayOfWeekTextColor
                     font.pixelSize: 9
                 }
             }

             dayDelegate: Rectangle {
                 color: styleData.selected ? calendar.daySelectedBackgroundColor :(styleData.visibleMonth && styleData.valid ? "#00000000" : calendar.dayInvalidBackgroundColor)
                 border.width: 0


                 Label {
                     text: styleData.date.getDate()
                     anchors.centerIn: parent
                     color: styleData.visibleMonth && styleData.valid ?  calendar.dayTextColor: "#888"
                 }

                 Rectangle {
                     width: parent.width
                     height: 1
                     color: calendar.gridLineColor
                     anchors.bottom: parent.bottom
                 }

                 Rectangle {
                     width: 1
                     height: parent.height
                     color: calendar.gridLineColor
                     anchors.right: parent.right
                 }
             }
         }

  }