CalendarStyle
ImportStatement: importQtQuick.Controls.Styles 1.2
Since: Qt 5.3
Properties
background :Component
control :Calendar
dayDelegate: Component
dayOfWeekDelegate: Component
gridColor :color
gridVisible: bool
navigationBar: Component
weekNumberDelegate: Component
DetailedDescription
标准界面:
如上图,日历可以更改下面的组件样式。
|
background |
填到整个界面 |
|
navigationBar |
日期头,显示年月 |
|
dayOfWeekDelegate |
显示一周的每一天 |
|
weekNumberDelegate |
显示第几周 |
|
dayDelegate |
显示一个月的每一天 |
示例
Calendar {
anchors.centerIn: parent
style: CalendarStyle {
gridVisible: false
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
}
}
}
}
PropertyDocumentation
background :Component
日历的背景。日历的隐式尺寸的计算基于背景的隐式尺寸。
control :Calendar
那个日历关联这个样式,只读。
dayDelegate: Component
日历每一天的样式。
下面的数据会提供给dayDelegate的组件
styleData.date |
样式中的日期,属性为date |
styleData.selected |
如果为真,日期被选择 属性为bool |
styleData.index |
这个delegate的索引 属性为int |
styleData.valid |
日期有效则为真,属性bool |
styleData.today |
日期为今天,为真。属性bool |
styleData.visibleMonth |
日期在今月,为真,属性bool |
styleData.hovered |
鼠标悬停在这个单元,为真。即使日期无效。属性bool |
styleData.pressed |
鼠标在单元按下,为真,即使日期无效。属性bool |
dayOfWeekDelegate: Component
每周的样式。周天的高度基于隐式的显示框的高度计算。
每个delegate需要提供下面的属性。
styleData.index |
Delegate的0~6 属性int |
styleData.dayOfWeek |
Locale.Sunday Locale.Monday Locale.Tuesday Locale.Wednesday Locale.Thursday Locale.Friday Locale.Saturday |
gridColor :color
网格线的颜色。
gridVisible: bool
网格是否可见。默认为真
navigationBar: Component
导航条的样式。在日历的顶部,包含下个月,上个月和选择的日期label。
需要提供的属性为:
styleData.title 日历的标题
weekNumberDelegate: Component
周数的样式。显示框的隐式宽用来计算周数的宽。
styleData.index: delegate的0~5索引
styleData.weekNumber:周的数目