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)
                   }
    }
}

演示

视频讲解

相关推荐
Larry_Yanan1 小时前
QML学习笔记(三十四)QML的GroupBox、RadioButton
c++·笔记·qt·学习·ui
im_AMBER1 小时前
杂记 14
前端·笔记·学习·web
立志成为大牛的小牛2 小时前
数据结构——十七、线索二叉树找前驱与后继(王道408)
数据结构·笔记·学习·程序人生·考研·算法
张永清-老清3 小时前
每周读书与学习->初识JMeter 元件(五)
学习·jmeter·性能调优·jmeter性能测试·性能分析·干货分享·每周读书与学习
低音钢琴3 小时前
【从零开始构建性能测试体系-02】 Apache JMeter 取样器指南:从入门到精通
学习·jmeter·apache
im_AMBER3 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
cimeo3 小时前
【C 学习】12.2-函数补充
学习·c#
ajassi20004 小时前
开源 C++ QT QML 开发(十七)进程--LocalSocket
c++·qt·开源
微露清风4 小时前
系统性学习C++-第五讲-内存管理
java·c++·学习
小张的博客之旅6 小时前
2025年“羊城杯”网络安全大赛 线上初赛 (WriteUp)
python·学习·网络安全