使用Qt Quick Controls创建自定义日历组件-CSDN博客

本文链接：https://blog.csdn.net/u011186532/article/details/147467865

引言

Qt6 Quick框架提供了一套丰富的日历相关组件，包括 MonthGrid、DayOfWeekRow 和 WeekNumberColumn，使开发者能够轻松实现各种日历功能。本文将通过一个简单的日历应用示例，展示如何组合这些组件创建一个完整的日历界面。

项目结构及实现

工程结构图

代码实现及解析

1. 组件封装

首先，我们将三个基础日历组件封装成单独的QML文件，便于复用和维护。

MonthGridComponent.qml

import QtQuick
import QtQuick.Controls

MonthGrid {
    id: monthGrid
    locale: Qt.locale("zh_CN")    // 本地化设置
    
    delegate: Text {              // 自定义日期显示
        text: model.day
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

这个组件封装了月份网格，设置了中文本地化，自定义了日期显示样式。

DayOfWeekRowComponent.qml

import QtQuick
import QtQuick.Controls

DayOfWeekRow {
    locale: Qt.locale("zh_CN")
    
    delegate: Text {
        text: model.shortName
        font.bold: true
        horizontalAlignment: Text.AlignHCenter
    }
}

这个组件封装了星期标题行，同样使用中文本地化，加粗显示星期名称。

WeekNumberColumnComponent.qml

import QtQuick
import QtQuick.Controls

WeekNumberColumn {
    locale: Qt.locale("zh_CN")
    
    delegate: Text {
        text: model.weekNumber
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

这个组件封装了周数列，显示每周的周数。

2. 主界面实现

Main.qml

import QtQuick
import QtQuick.Controls
import "components"

ApplicationWindow {
    visible: true
    width: 600
    height: 500
    
    property date currentDate: new Date()
    property int currentMonth: currentDate.getMonth()
    property int currentYear: currentDate.getFullYear()
    
    Column {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 10
        
        // 月份导航
        Row {
            spacing: 10
            anchors.horizontalCenter: parent.horizontalCenter
            
            Button {
                text: "<"
                onClicked: {
                    if (currentMonth === 0) {
                        currentMonth = 11
                        currentYear--
                    } else {
                        currentMonth--
                    }
                }
            }
            
            Label {
                text: Qt.locale().standaloneMonthName(currentMonth) + " " + currentYear
                font.pixelSize: 18
                font.bold: true
            }
            
            Button {
                text: ">"
                onClicked: {
                    if (currentMonth === 11) {
                        currentMonth = 0
                        currentYear++
                    } else {
                        currentMonth++
                    }
                }
            }
        }
        
        // 日历主体
        Row {
            spacing: 10
            
            // 周数列
            WeekNumberColumnComponent {
                width: 40
                height: monthGrid.height
                month: currentMonth
                year: currentYear
                
                delegate: Rectangle {
                    implicitWidth: 40
                    implicitHeight: 40
                    color: "transparent"
                    
                    Text {
                        text: model.weekNumber
                        anchors.centerIn: parent
                        color: "gray"
                    }
                }
            }
            
            Column {
                spacing: 5
                
                // 星期标题行
                DayOfWeekRowComponent {
                    width: monthGrid.width
                    height: 40
                    
                    delegate: Rectangle {
                        implicitWidth: 40
                        implicitHeight: 40
                        color: "#f0f0f0"
                        
                        Text {
                            text: model.shortName
                            anchors.centerIn: parent
                            font.bold: true
                        }
                    }
                }
                
                // 月历网格
                MonthGridComponent {
                    id: monthGrid
                    month: currentMonth
                    year: currentYear
                    
                    delegate: Rectangle {
                        implicitWidth: 40
                        implicitHeight: 40
                        color: {
                            if (!model.day)
                                return "transparent"
                            if (model.today)
                                return "#e6f3ff"
                            if (model.month === monthGrid.month)
                                return "white"
                            return "#f9f9f9"
                        }
                        border.color: "#e0e0e0"
                        
                        Text {
                            text: model.day
                            anchors.centerIn: parent
                            color: {
                                if (!model.day)
                                    return "transparent"
                                if (model.month !== monthGrid.month)
                                    return "gray"
                                return "black"
                            }
                            font.bold: model.today
                        }
                        
                        MouseArea {
                            anchors.fill: parent
                            enabled: model.day && model.month === monthGrid.month
                            onClicked: console.log("选择的日期:", model.date.toLocaleDateString())
                        }
                    }
                }
            }
        }
    }
}

主界面实现了以下功能：

日期属性定义：