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