import statement:
import qtquick.controls 1.2since: qt 5.3inherits: focusscope
propertiesdayofweekformat : intframevisible : boolmaximumdate : dateminimumdate : dateselecteddate : datestyle : componentvisiblemonth : intvisibleyear : intweeknumbersvisible : boolsignalsclicked(date date)doubleclicked(date date)hovered(date date)pressed(date date)released(date date)methodsshownextmonth()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的帮助文档