在使用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属性获取时间文本。