QML 自定义时间编辑控件

一.展示效果

qml自定义时间编辑控件

二.主界面调用

//main.qml
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Window 2.12
import "./qml"Window
{visible: truewidth: 400height: 300title: qsTr("Hello World")property date originDate: new Date()       //原始时间property var theme: QtObject {id: themeobjectName: "theme"property string fontFamily: 'Microsoft YaHei'property real fontSize: 14property int fontWeight: Font.Normalproperty color textColor: '#222222'property color borderColor: '#D3D3D3'property color sameMonthDateTextColor: "#444"property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : "#3778d0"property color selectedDateTextColor: "white"property color differentMonthDateTextColor: "#bbb"property color invalidDatecolor: "#dddddd"}Row{spacing: 10width: 120height: 35Text{color: "#ffffff"width: 40height:35antialiasing: truefont {family: theme.fontFamilypixelSize: theme.fontSizeweight: theme.fontWeight}text: qsTr('时间:')}CustomTimeEdit{id: timeEidtcolor: Qt.rgba(18/255,62/255,68/255,1)height: parent.height - 2width: 120selectionColor: theme.selectedDateColorhour: originDate.getHours()minute: originDate.getMinutes()}}
}

三.时间编辑控件封装

//CustomTimeEdit.qml
import QtQuick 2.11
import QtQuick.Controls 2.4Rectangle {id: timeEditproperty string timeproperty int hour: 0property int minute: 0property int timePointWidth: 24property int controlWidth: 60property color selectionColor: 'blue'property var theme: QtObject {id: themeobjectName: "theme"property string fontFamily: 'Microsoft YaHei'property real fontSize: 14property int fontWeight: Font.Normalproperty color textColor: '#222222'property color borderColor: '#D3D3D3'}border.width: 1border.color: theme.borderColorwidth: 160height: 26color: "#57b9a5"Row{id:timeTextspacing:1width: parent.width - control.widthheight: parent.heightTextInput {id: hoursheight: parent.heightcolor: "#ffffff"//enabled: falsewidth: timePointWidthfont {family: theme.fontFamilypixelSize: theme.fontSize - 1weight: theme.fontWeight}selectByMouse: truemaximumLength: 2selectionColor: timeEdit.selectionColormouseSelectionMode: TextInput.SelectWordsvalidator: IntValidator{bottom: 0; top: 23;}verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCentertext: hour < 10 ? '0'+ hour: hour >= 24 ? 0 : houronEditingFinished:{hour = parseInt(hours.text.trim())}onActiveFocusChanged: {if (activeFocus){hours.selectAll();minutes.deselect();}}onTextChanged: {if (activeFocus){//hours.selectAll();//minutes.deselect();}}}Text {id: separatorwidth:6height: parent.heightcolor: "#ffffff"verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCentertext: ":"}TextInput {id: minutesheight: parent.heightcolor: "#ffffff"width: timePointWidthfont {family: theme.fontFamilypixelSize: theme.fontSize - 1weight: theme.fontWeight}selectByMouse: truemaximumLength: 2//enabled: falseselectionColor: timeEdit.selectionColormouseSelectionMode: TextInput.SelectWordsvalidator: IntValidator{bottom: 0; top: 59;}verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCentertext: minute < 10 ? '0'+ minute: minute >= 60 ? 0 : minuteonEditingFinished:{minute = parseInt(minutes.text.trim())}onActiveFocusChanged: {if (activeFocus){minutes.selectAll();hours.deselect();}}onTextChanged: {if (activeFocus){//minutes.selectAll();//hours.deselect();}}}}Rectangle{id: controlwidth: controlWidthanchors.right: parent.rightanchors.rightMargin: 1anchors.top: parent.topanchors.topMargin: 1anchors.bottom: parent.bottomanchors.bottomMargin: 1color: Qt.rgba(18/255,62/255,68/255,1)Canvas {id:timeIncanchors.right: parent.rightanchors.rightMargin: 0anchors.bottom: parent.bottomanchors.bottomMargin: 0anchors.top: parent.topanchors.topMargin: 0width: parent.heightheight:  parent.heightonPaint: {var ctx = getContext("2d")ctx.lineWidth = 1ctx.strokeStyle = Qt.rgba(100/255,1,1,1)ctx.beginPath()ctx.moveTo(width/4,height*5/8)ctx.lineTo(width/2,height*3/8)ctx.lineTo(width*3/4,height*5/8)//ctx.closePath()ctx.stroke()}MouseArea{anchors.fill: parentonClicked: {if (minutes.activeFocus){minute = parseInt(minutes.text.trim())minute = minute + 1;if(minute > 59){minute = 0}}else{hour = parseInt(hours.text.trim())hour = hour + 1;if(hour > 23){hour = 0;}if (!hours.activeFocus){hours.selectAll();}}}}}Canvas {anchors.right: timeInc.leftanchors.rightMargin: 0anchors.bottom: parent.bottomanchors.bottomMargin: 0anchors.top: parent.topanchors.topMargin: 0width: parent.heightheight:  parent.heightonPaint: {var ctx = getContext("2d")ctx.lineWidth = 1ctx.strokeStyle = Qt.rgba(100/255,1,1,1)ctx.beginPath()ctx.moveTo(width/4,height*3/8)ctx.lineTo(width/2,height*5/8)ctx.lineTo(width*3/4,height*3/8)//ctx.closePath()ctx.stroke()}MouseArea{anchors.fill: parentonClicked: {if (minutes.activeFocus){minute = parseInt(minutes.text.trim())minute = minute - 1;if(minute < 0){minute = 59}}else{hour = parseInt(hours.text.trim())hour = hour - 1;if(hour < 0){hour = 23;}if (!hours.activeFocus){hours.selectAll();}}}}}}
}