Qt/QML学习-Calendar

QML学习

main.qml

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Calendar")

    Calendar {
        id: the_calendar
        anchors.fill: parent
        style: CalendarStyle {
            // 顶部导航栏代理
            navigationBar: Rectangle {
                implicitHeight: 50
                // 底端黑线
                Rectangle {
                    width: parent.width
                    height: 2
                    anchors.bottom: parent.bottom
                    color: "black"
                }
                // 年份减少
                Rectangle {
                    id: subYear
                    width: parent.width * 0.15
                    height: parent.height * 0.8
                    anchors.verticalCenter: parent.verticalCenter
                    Text {
                        anchors.centerIn: parent
                        text: "<<"
                        font.bold: true
                        font.pointSize: 15
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.color = "red"
                            }
                            onExited: {
                                parent.color = "black"
                            }
                            onClicked: {
                                control.showPreviousYear()
                            }
                        }
                    }
                }
                // 年份
                Label {
                    id: year
                    anchors.left: subYear.right
                    anchors.verticalCenter: parent.verticalCenter
                    text: control.visibleYear+"年"
                    font.bold: true
                    font.pointSize: 15
                }
                // 年份增加
                Rectangle {
                    id: addYear
                    width: parent.width * 0.15
                    height: parent.height * 0.8
                    anchors.left: year.right
                    anchors.verticalCenter: parent.verticalCenter
                    Text {
                        anchors.centerIn: parent
                        text: ">>"
                        font.bold: true
                        font.pointSize: 15
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.color = "red"
                            }
                            onExited: {
                                parent.color = "black"
                            }
                            onClicked: {
                                control.showNextYear()
                            }
                        }
                    }
                }
                // 月份增加
                Rectangle {
                    id: addMonth
                    width: parent.width * 0.15
                    height: parent.height * 0.8
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    Text {
                        anchors.centerIn: parent
                        text: ">"
                        font.bold: true
                        font.pointSize: 15
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.color = "red"
                            }
                            onExited: {
                                parent.color = "black"
                            }
                            onClicked: {
                                control.showNextMonth()
                            }
                        }
                    }
                }
                // 月份
                Label {
                    id: month
                    anchors.right: addMonth.left
                    anchors.verticalCenter: parent.verticalCenter
                    text: (control.visibleMonth+1)+"月"
                    font.bold: true
                    font.pointSize: 15
                }
                // 月份减少
                Rectangle {
                    id: subMonth
                    width: parent.width * 0.15
                    height: parent.height * 0.8
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: month.left
                    Text {
                        anchors.centerIn: parent
                        text: "<"
                        font.bold: true
                        font.pointSize: 15
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.color = "red"
                            }
                            onExited: {
                                parent.color = "black"
                            }
                            onClicked: {
                                control.showPreviousMonth()
                            }
                        }
                    }
                }
            }
            // 星期几代理
            dayOfWeekDelegate: Rectangle {
                implicitHeight: 40
                Label {
                    anchors.centerIn: parent
                    text: control.__locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
                    font.bold: true
                    font.pixelSize: 15
                }
            }
            // 日期代理
            dayDelegate: Rectangle {
                color: styleData.selected? "black": "white"
                Label {
                    id: label
                    anchors.centerIn: parent
                    text: styleData.date.getDate()
                    font.pointSize: 13
                    color: styleData.selected? "white": "black"
                }
            }
        }
        //!
        onClicked: (date)=> {
                       console.log(date)
                   }
    }
}

演示

视频讲解

相关推荐
菜菜子爱学习10 分钟前
系统架构设计师——【2025年上半年案例题】真题分享(一)
学习·系统架构·软考·系统架构设计师
一只乔哇噻13 分钟前
java后端工程师进修ing(研一版‖day44)
java·开发语言·学习·算法
~kiss~20 分钟前
MLLM学习~M3-Agent如何处理视频:视频clip提取、音频提取、抽帧提取和人脸提取
学习
大可门耳1 小时前
Qt第一课:Qt是什么?相对于其他框架的优劣势是什么
开发语言·qt
呵呵哒( ̄▽ ̄)"1 小时前
专项智能练习(行为主义学习理论)
学习
贝塔实验室1 小时前
两种常用的抗单粒子翻转动态刷新方法
论文阅读·经验分享·笔记·科技·学习·程序人生·fpga开发
你真的可爱呀2 小时前
5.Three.js 学习(基础+实践)
学习·three.js
axban4 小时前
QT M/V架构开发实战:QFileSystemModel介绍
开发语言·qt·架构
another heaven9 小时前
【Qt VS2022调试时无法查看QString等Qt变量信息】解决方法
开发语言·qt