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

演示

视频讲解

相关推荐
2303_Alpha14 小时前
SpringBoot
笔记·学习
萘柰奈14 小时前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽15 小时前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫15 小时前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie15 小时前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿15 小时前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng16 小时前
量子计算学习(第十四周周报)
学习·量子计算
我是菜鸟0713号16 小时前
Qt 中 OPC UA 通讯实战
开发语言·qt
JCBP_16 小时前
QT(4)
开发语言·汇编·c++·qt·算法
lqjun08271 天前
Qt程序单独运行报错问题
开发语言·qt