QML之TimeEdit的实现

在使用QML设计界面的时候，用到了时间编辑框，发现QML中没有提供类似QTWidget中的QTimeEdit控件。后来没有办法就自己使用TextField和Calendar封装了一个TimeEdit组件

1、自定义编辑框TimeInput组件

时间编辑框通常都是一个输入框，前部分显示时间后面有个日历的小图标，点击可以显示日历进行选择日期。文本输入框QML中之后TextField和TextInput，但是都不符合这样的界面效果，所以这块也封装实现了一个这样的输入框。

TimeInput组件的实现：

/**************************************  *文件名：TimeInput.qml  ***************************************/import QtQuick 2.0import QtQml 2.2import QtQuick.Controls 1.3import QtQuick.Controls.Styles 1.3//时间编辑框组件Rectangle{    id:rect    width: parent.width    height: parent.height    border.width: 1    border.color: "#333"    /*******************************自定义属性*********************************/    property var locale: Qt.locale()    property alias strTime: textEdit.text    property string oldTime: ""    /**********************************自定义信号*******************************/    signal clicked()    /*******************************对象树*************************************/    Row{        id:row        anchors.top: parent.top        anchors.topMargin: 1        anchors.left: parent.left        anchors.leftMargin: 1        width: children.width        height: children.height        spacing: 2        //文本编辑框        TextField{            id:textEdit            width:rect.width-25            height:rect.height-2            style:TextFieldStyle{                background: Rectangle{                    radius: 2                    width: rect.width-25                    height: rect.height-2                }            }            onEditingFinished:{                //编辑完成进行格式判断                if(rect.checkTimeFomat() === false)                {                    textEdit.text = oldTime                }                else                {                    oldTime = textEdit.text                }            }        }        //日历小图标        Image{            width: 16            height: 16            anchors.top:parent.top            anchors.topMargin: 4            source: "picture/calendar.png"            MouseArea{                anchors.fill: parent                onClicked: {                    rect.clicked()                    mouse.accepted = false                }            }        }    }    /************************************方法***********************************/    //检查输入的时间的合法性。原理就是把文本按照合法的格式解析出各个部分，再都在出日期Date,    //把Date转换为string之后判断和原来的文本是否一致    function checkTimeFomat()    {        var strDateTimeSplit = strTime.split(" ")        var strDateSplit = strDateTimeSplit[0].split("/")        var strTimeSplit = strDateTimeSplit[1].split(":")        var date = new Date(strDateSplit[0],strDateSplit[1]-1,strDateSplit[2],strTimeSplit[0],strTimeSplit[1],0)        var strDate2 = date.toLocaleString("yyyy/M/d H:mm")        console.log(strDate2)        if(strDate2  !== strTime)            return false        else            return true    }}

 并在这个组件中添加了对用户输入的时间格式继续合法性检查功能，如发现不合法则输入不成功，显示原本的时间，在checkTimeFomat方法中实现。当TextFiled编辑完成时进行调用

2、自定义TimeEdit组件

TimeEdit组件就是把上面实现的TimeInput组件和一个Calender（日历）组件整合实现了我们最终需要的TextEdit时间编辑组件

TextEdit组件的实现：

/**************************************  *文件名：TimeEdit.qml  ***************************************/import QtQuick 2.3import QtQuick.Window 2.2import QtQuick.Controls 1.3import QtQml 2.2//TimeEdit组件Rectangle {    width: 100    height: 25    /**********************************自定义属性***********************************/    property alias text: textEdit.strTime     //保存当前的时间文本    property date currentDate: new Date()    /***********************************对象树*************************************/    //自定义的时间输入框组件    TimeInput{        id:textEdit        width: parent.width        height: parent.height        anchors.top: parent.top        anchors.left: parent.left    }    //日历控件    Calendar{        id:calendarItem        width: 300        height: 250        anchors.top: textEdit.bottom        anchors.left: textEdit.left        visible: false        onClicked: {            visible:false        }    }    Component.onCompleted: {        //日历点击信号的信号与槽的连接        calendarItem.clicked.connect(calendarClicked)        textEdit.clicked.connect(showCalendar)        //初始的默认时间为当前时间        textEdit.strTime = currentDate.toLocaleDateString("yyyy/M/d")+" "+currentDate.toLocaleTimeString("H:mm")        textEdit.oldTime = textEdit.strTime    }    /***************************************方法*******************************************/    //显示日历界面的    function showCalendar()    {        calendarItem.visible = !calendarItem.visible    }    //点击日历选择时间后的处理函数    function calendarClicked(date)    {        var year = date.getFullYear()        var month =date.getMonth()+1        var day = date.getDate()        var selectDate = year+"/"+month+"/"+day        var timeSplit =textEdit.strTime.split(" ")        textEdit.strTime = selectDate+" "+timeSplit[1]        textEdit.oldTime = textEdit.strTime    }}

这样就是实现了TextEdit组件，在外面获取当前的时间时，可直接通过text属性获取时间文本。