Qt/QML学习-Calendar

QML学习

• Calendar例程
• 视频讲解
• 代码

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

演示

视频讲解