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

Import Statement:<span style="white-space:pre">	</span>

import QtQuick.Controls 1.2
Since:<span style="white-space:pre">	</span> Qt 5.3
Inherits:<span style="white-space:pre">	</span>
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
                                    }
                                }
                        }
                    }
            }
        }

日历控件差不多就这些样式需要设置，具体可以多参考Qt的帮助文档