QML2.0下的丰富的控件之日历

Import Statement:span style=white-space:pre/span import QtQuick.Controls 1.2Since:span style=white-space:pre/span Qt 5.3Inherits:span style=white-space:pre/spanFocusScope PropertiesdayOfWeekFormat : intframeVisible : boolmaximumDate : date

Import Statement:	

import QtQuick.Controls 1.2
Since:	 Qt 5.3
Inherits:	
FocusScope

Properties

dayOfWeekFormat : int
frameVisible : bool
maximumDate : date
minimumDate : date
selectedDate : date
style : Component
visibleMonth : int
visibleYear : int
weekNumbersVisible : bool
Signals

clicked(date date)
doubleClicked(date date)
hovered(date date)
pressed(date date)
released(date date)
Methods

showNextMonth()
showNextYear()
showPreviousMonth()
showPreviousYear()

日历控件是基于Qt5.x以上 需要导入QtQuick.Controls.1.2即可使用

日历控件主要使用到三个样式的设置

使用其中style:CalendarStyle

background : Component
control : Calendar
dayDelegate : Component
dayOfWeekDelegate : Component
gridColor : color
gridVisible : bool
navigationBar : Component
weekNumberDelegate : Component

其中dayDelegate主要设置日期的样式

dayOfWeekDelegate 主要设置周的样式

navigationBar 主要设置导航选择月份的样式

background 主要设置背景样式

下面看下例子是如何使用的

Calendar {
            id: calendar
            width: parent.width * 0.6 - row.spacing / 2
            height: parent.height
            selectedDate: new Date()
            focus: true

            style: CalendarStyle {
                dayDelegate: Rectangle {//设置日期样式，使用了渐变式
                    gradient: Gradient {
                        GradientStop {
                            position: 0.00
                            color: styleData.selected ? "#111" : (styleData.visibleMonth && styleData.valid ? "#444" : "#666");
                        }
                        GradientStop {
                            position: 1.00
                            color: styleData.selected ? "#444" : (styleData.visibleMonth && styleData.valid ? "#111" : "#666");
                        }
                        GradientStop {
                            position: 1.00
                            color: styleData.selected ? "#777" : (styleData.visibleMonth && styleData.valid ? "#111" : "#666");
                        }
                    }

                    Label {
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        color: styleData.valid ? "white" : "grey"
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        color: "#555"
                        anchors.bottom: parent.bottom
                    }

                    Rectangle {
                        width: 1
                        height: parent.height
                        color: "#555"
                        anchors.right: parent.right
                    }
                }
                dayOfWeekDelegate: Item{//设置周的样式
                    Rectangle{
                        anchors.fill: parent
                        Text {
                            id: weekTxt
                            text:Qt.locale().dayName(styleData.dayOfWeek, control.dayOfWeekFormat)//转换为自己想要的周的内容的表达
                            anchors.centerIn: parent
                            color: styleData.selected?"green":"gray"
                        }
                    }
                }
                navigationBar: Rectangle {//导航控制栏，控制日期上下选择等
                        color: "#49A9E3"
                        height: dateText.height * 4

                        Rectangle {
                            color: Qt.rgba(1, 1, 1, 0.6)
                            height: 1
                            width: parent.width
                        }

                        Rectangle {
                            anchors.bottom: parent.bottom
                            height: 1
                            width: parent.width
                            color: "#ddd"
                        }
                        ToolButton {
                            id: previousMonth
                            width: parent.height
                            height: width-20
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: parent.left
                            anchors.leftMargin: 40
                            iconSource: "qrc:/images/left.png"
                            onClicked: control.showPreviousMonth()
                        }
                        Label {
                            id: dateText
                            text: styleData.title
                            font.pixelSize: 14
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            fontSizeMode: Text.Fit
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: previousMonth.right
                            anchors.leftMargin: 2
                            anchors.right: nextMonth.left
                            anchors.rightMargin: 2
                        }
                        ToolButton {
                            id: nextMonth
                            width: 60
                            height: 53
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.right: parent.right
                            anchors.rightMargin: 40
                            iconSource: "qrc:/images/right.png"
                            onClicked: control.showNextMonth()
                            style: ButtonStyle {
                                    background: Item {
                                        implicitWidth: 25
                                        implicitHeight: 25
                                    }
                                }
                        }
                    }
            }
        }