QML之TimeEdit的实现

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

1、自定义编辑框TimeInput组件

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

TimeInput组件的实现：

/**************************************
  *文件名：TimeInput.qml
  ***************************************/
import QtQuick 2.0
import QtQml 2.2
import QtQuick.Controls 1.3
import 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.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
import 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属性获取时间文本。