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组件

 }

 }

 }

}




转载于:https://my.oschina.net/u/1170641/blog/285004