qml实现的“滑动选择”日历，用的是qml的PathView组件，而且也用到了两个qml之间的通信

main.qml代码如下：

import QtQuick 1.1

Rectangle{
 id:_born
 width: 400;height: 200
 color: "white"
 property variant object;
 Rectangle{
 id:month
 width: 120;height: 20
 color: "#575757"
 Text {
 id: brithday
 text: "生日:" + "-月-日"
 color: "white"
 }
 function showCalendar(){
 var component = Qt.createComponent("Calendar.qml");

 if (component.status === Component.Ready) {
 var bQml = component.createObject(_born);
 bQml.xClicked.connect(doSomething); // 实现了两个qml组件之间的通信,传递数据
 }
 }
 }
 function doSomething(msg){
 console.log(msg);
 brithday.text = "生日:"+msg
 }
 MouseArea {
 x:0;y:0
 width: 80;height: 20
 onClicked: month.showCalendar()
 }
}

Calendar.qml源码如下：

import QtQuick 1.1

Rectangle {
 width: 160
 height: 120
 id:born_Calendar
 visible: true
 property variant temp
 signal xClicked(string msg)//与主的qml组件通信的信号
 ListModel {
 id:m_Calendar
 ListElement {name: "1 月"}
 ListElement {name: "2 月"}
 ListElement {name: "3 月"}
 ListElement {name: "4 月"}
 ListElement {name: "5 月"}
 ListElement {name: "6 月"}
 ListElement {name: "7 月"}
 ListElement {name: "8 月"}
 ListElement {name: "9 月"}
 ListElement {name: "10 月"}
 ListElement {name: "11 月"}
 ListElement {name: "12 月"}
 }
 ListModel {
 id:d_Calendar
 ListElement {name: "1 日"}
 ListElement {name: "2 日"}
 ListElement {name: "3 日"}
 ListElement {name: "4 日"}
 ListElement {name: "5 日"}
 ListElement {name: "6 日"}
 ListElement {name: "7 日"}
 ListElement {name: "8 日"}
 ListElement {name: "9 日"}
 ListElement {name: "10 日"}
 ListElement {name: "11 日"}
 ListElement {name: "12 日"}
 ListElement {name: "13 日"}
 ListElement {name: "14 日"}
 ListElement {name: "15 日"}
 ListElement {name: "16 日"}
 ListElement {name: "17 日"}
 ListElement {name: "18 日"}
 ListElement {name: "19 日"}
 ListElement {name: "20 日"}
 ListElement {name: "21 日"}
 ListElement {name: "22 日"}
 ListElement {name: "23 日"}
 ListElement {name: "24 日"}
 ListElement {name: "25 日"}
 ListElement {name: "26 日"}
 ListElement {name: "27 日"}
 ListElement {name: "28 日"}
 ListElement {name: "29 日"}
 ListElement {name: "30 日"}
 ListElement {name: "31 日"}
 }
 Component {
 id: delegate
 Column {
 id: wrapper

 Text {
 id: nameText
 text: name
 font.pointSize: 16
 color: wrapper.PathView.isCurrentItem ? "white" : "black"
// //up
// Item{
// width: nameText.width
// height: nameText.height/3
// MouseArea{
// anchors.fill: parent
// onClicked: {
// view.decrementCurrentIndex();
// }
// }
// }
// //down
// Item{
// width: nameText.width
// height: nameText.height/3
// MouseArea{
// anchors.fill: parent
// onClicked: {
// view.incrementCurrentIndex();
// }
// }
// }
 }
 }
 }
 //标题view
 Rectangle {
 id:title
 x:0;y:0
 width: born_Calendar.width;height: 25
 color:"#474747"
 Text{
 id: nameText
 text: "Your born"
 font.pointSize: 16
 color: "#1E90FF"
 }
 Rectangle {
 id:line_view
 anchors.top: nameText.bottom
 x:0;y:20
 width: born_Calendar.width;height: 2
 color:"#1E90FF"
 }
 }
 //生日日期,某个月份
 Rectangle {
 id:m_Rect
 x:0;y:25
 width: born_Calendar.width/2;height: 70
 color:"#474747"
 PathView {
 id:view
 anchors.fill: parent
 model: m_Calendar
 delegate: delegate
 pathItemCount: 3
 preferredHighlightBegin: 0.5
 preferredHighlightEnd: 0.5
 path: Path {
 startX: 40; startY: 0
 PathLine { x: 40; y: 25; }
 PathLine { x: 40; y: 45; }
 PathLine { x: 40; y: 65; }
 }
 onCurrentIndexChanged: {
 console.log("view.currentIndex="+view.currentIndex)
 //根据月份不同,对应的日期可选范围发生变化
 if(1 == view.currentIndex){
 d_Calendar = d_Calendar.remove(30)
 d_Calendar = d_Calendar.remove(29)
 }if(3 == view.currentIndex
 ||5 == view.currentIndex
 ||8 == view.currentIndex
 ||10 == view.currentIndex){
 if(d_Calendar.count == 31){
 d_Calendar = d_Calendar.remove(30)
 }
 }if(0 == view.currentIndex
 ||2 == view.currentIndex
 ||4 == view.currentIndex
 ||6 == view.currentIndex
 ||7 == view.currentIndex
 ||9 == view.currentIndex
 ||11 == view.currentIndex){
 if(d_Calendar.count == 30){
 d_Calendar = d_Calendar.insert(30,{name: "31 日"})
 }
 if(d_Calendar.count == 29){
 d_Calendar = d_Calendar.insert(29,{name: "30 日"})
 d_Calendar = d_Calendar.insert(30,{name: "31 日"})
 }
 }
 }
 }
 }
 //生日日期,某一天
 Rectangle {
 id:d_Rect
 x:born_Calendar.width/2;y:25
 width: born_Calendar.width/2;height: 70
 color:"#474747"
 PathView {
 id:view1
 anchors.fill: parent
 model: d_Calendar
 delegate: delegate
 pathItemCount: 3
 preferredHighlightBegin: 0.5
 preferredHighlightEnd: 0.5
 path: Path {
 startX: 40; startY: 0
 PathLine { x: 40; y: 25; }
 PathLine { x: 40; y: 45; }
 PathLine { x: 40; y: 65; }
 }
 onCurrentIndexChanged: {
 console.log("view1.currentIndex="+view1.currentIndex)
 }
 }
 }
 //下面另外一条分割线:横向线
 Rectangle {
 id:split_line_H
 anchors.bottom: confirm.top
 x:0;y:20
 width: born_Calendar.width;height: 1
 color:"white"
 }
 //确定按钮
 Rectangle {
 id: confirm
 x:0;y:90
 width: born_Calendar.width/2;height: 35
 color: "#474747"
 Text{
 id: text
 x:10;y:10
 text: "Confirm"
 font.pointSize: 16
 color: "#1E90FF"
 //anchors.centerIn: confirm.Center+15
 }
 MouseArea{
 anchors.fill: parent
 onClicked: {
// console.log("您的生日是:"+(view.currentIndex+1)+"月"+(view1.currentIndex+1)+"日")
// Qt.quit()
 born_Calendar.xClicked((view.currentIndex+1)+"月"+(view1.currentIndex+1)+"日")//往信号内传入数据
 born_Calendar.destroy()//销毁当前qml组件
 }
 }
 }

 //下面另外一条分割线:纵向线
 Rectangle {
 id:split_line_V
 anchors.left: confirm.right
 x:born_Calendar.width/2;y:90
 width: 1;height: confirm.height
 color:"white"
 }

 //取消按钮
 Rectangle {
 id: concel
 x:born_Calendar.width/2+1;y:90
 width: born_Calendar.width/2-1;height: 35
 color: "#474747"
 Text{
 id: text1
 x:16;y:10
 text: "Concel"
 font.pointSize: 16
 color: "#1E90FF"
 }
 MouseArea{
 anchors.fill: parent
 onClicked: {
// Qt.quit()
 born_Calendar.destroy()//销毁当前qml组件
 }
 }
 }
}