QML學習筆記(六)- 簡單計時器和定時器

作一個簡單的qml計時器和定時器,左鍵觸發計時,右鍵觸發定時html

GitHub:八至git

做者:狐狸家的魚github

本文連接:QML學習筆記(六)- 簡單計時器和定時器學習

左鍵點擊按鈕,觸發計時器,中鍵能夠暫停計時,同時若是要清零,再次點擊左鍵。ui

右鍵打開時間輸入與告警信息輸入彈出窗口,時間輸入有正則驗證,只能輸入數字,而且時間的:只能在英文半角下輸入,若是時間和告警信息未輸入,會彈出警告。spa

main.qml:3d

/* author:狐狸家的魚 date:20181226 */ import QtQuick 2.10 import QtQuick.Window 2.10 import QtQuick.Controls 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") property int initTime: 0 property var totalSeconds_ipt    //timerIpt 總秒數
    property var totalSeconds_sys    //當前系統時間總秒數
    property var trigger_ipt property int count: 15           //倒計時開始秒數
    //秒轉換爲時分秒 用於計時
    function toTime(s){ var time; if(s > -1){ var hour = Math.floor(s/3600);
            var min = Math.floor((s/60)%60);
            var sec = initTime % 60; if(hour < 10){ time = hour + ":"; } if(min < 10){ time += "0"; } time += min + ":"; if(sec < 10){ time += "0"; } time += sec.toFixed(0); } return time; } //時分秒轉換爲秒 用於定時
    function add_zero(temp){ if(temp < 10) return "0" + temp; } function getCurDateS(){ var date = new Date(); var dateH = add_zero(date.getHours()); var dateM = add_zero(date.getMinutes()); var dateS = add_zero(date.getSeconds()); totalSeconds_sys = dateH*3600 + dateM*60 + dateS*1; return totalSeconds_sys; } //計時器
 Timer{ id:timer_1 interval: 1000 repeat: true triggeredOnStart: true //start()時觸發
        onTriggered: {//觸發器
            initTime++ timeTex.text = toTime(initTime) } } //定時器
 Timer{ id:timer_2 interval: 1000 repeat: true triggeredOnStart: true onTriggered: { getCurDateS() trigger_ipt = totalSeconds_ipt - totalSeconds_sys if(trigger_ipt === count){ warnMsgPop.open();//告警窗口打開
                //warnMusic.play();//告警音樂播放
                count -= 1; if(count <= 0){ timer_2.stop(); } } } } //觸發按鈕
 Button{ id:triggerBtn width: 100 height: 30 anchors.centerIn: parent text: 'trigger' MouseArea{ anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.MidButton | Qt.RightButton onClicked: { if(mouse.button == Qt.LeftButton){//左鍵觸發計時器 & 清零
                    console.log("clicked LeftButton") initTime = 0 timer_1.start() } if(mouse.button == Qt.MidButton){//中鍵中止計時器
                    console.log("clicked MidButton") timer_1.stop() } if(mouse.button == Qt.RightButton){//右鍵觸發定時器
                    console.log("clicked RightButton") //timer_1.stop()
                    //timeTex.text = '' //計時清空
 timeIptPop.open() } } } } Text{ id:timeTex font.pointSize: 20 anchors.bottom: triggerBtn.top anchors.bottomMargin: 10 anchors.horizontalCenter: parent.horizontalCenter color: "#333" } Text{ id:countDownTex font.pointSize: 20 anchors.top: triggerBtn.bottom anchors.topMargin: 10 anchors.horizontalCenter: parent.horizontalCenter color: "#333" } //彈出定時器時間輸入和告警提示信息窗口
 Popup{ id:timeIptPop width: 210 height: 200 x:triggerBtn.x + triggerBtn.width y:triggerBtn.y - triggerBtn.height/2
 TimeIpt{ id:timeIptWin anchors.fill: parent } }
 WarnPop{//倒計時告警窗口
 id:warnMsgPop x:triggerBtn.x - triggerBtn.width y:triggerBtn.y width: 200 height: 200 warnText:timeIptWin.warnMsgInput + "\n" + (count <= 0 ? "End of countdown" : count) } //時間輸入
    Connections{//彈出時間輸入的確認按鈕
 target: timeIptWin.confirmBtnArea onClicked:{ var hhmmIpt = timeIptWin.timeInputText.replace(":",""); var hhIpt_before = hhmmIpt.substring(0,2); var mmIpt_before = hhmmIpt.substring(2,4); var hhIpt_after = parseInt(hhIpt_before,10); var mmIpt_after = parseInt(mmIpt_before,10); console.log("轉換前:",hhIpt_before,mmIpt_before); console.log("轉換後:",hhIpt_after,mmIpt_after); totalSeconds_ipt = hhIpt_after * 3600 + mmIpt_after * 60; console.log("總秒數:",totalSeconds_ipt); } } Connections{//彈出時間輸入的倒計時啓動按鈕連接
 target: timeIptWin.startBtnArea onClicked:{ timeIptPop.close() timer_2.start() } } Connections{//告警窗口關閉 倒計時中止
 target: warnMsgPop.closeWarn onClicked:{ timer_2.stop() warnMsgPop.close() count = 15 } } }

TimeIpt.qmlcode

import QtQuick 2.0 import QtQuick.Window 2.3 import QtQuick.Layouts 1.3 import QtQuick.Controls 2.2 import QtQuick.Dialogs 1.1 Rectangle{//自定義時間輸入窗口
 id:root property int txtFieldWidth: 100 property int txtFieldHeight: 35 property int btnWidth: 70 property int btnHeight: 40 property alias confirmBtnArea: confirmBtn property alias startBtnArea: startBtn property alias warnMsgInput: warnMsgInput.text property alias timeInputText: timerInputText.text width: parent.width height: parent.height ColumnLayout{ spacing: 3 anchors.horizontalCenter: parent.horizontalCenter Text{ text: "Please enter time:" font.pointSize: 12 color: "#C23B07" } TextField{ id:timerInputText implicitWidth: root.width-5 validator: RegExpValidator{regExp: /^(?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]$/} Keys.enabled: true Keys.onReturnPressed: { if(timerInputText.text === ""){ hintTimeIpt.open() timerInputText.focus = false }else{ warnMsgInput.focus = true countDownTex.text = timerInputText.text } } } Text{//輸入告警信息
           text:"Please Enter Warning Msg:" font.pointSize: 12 color: "#C23B07" } TextField{ id:warnMsgInput implicitWidth: root.width-5 Keys.enabled: true Keys.onReturnPressed: { if(warnMsgInput.text === ""){ hintWarnIpt.open() warnMsgInput.focus = false } } } Row{ anchors.horizontalCenter: parent.horizontalCenter spacing: 10 Button{//確認按鈕
 id:confirmBtn width: btnWidth height: btnHeight text: "Confirm" onClicked: { if(timerInputText.text === " " || warnMsgInput.text === ""){ hintTimeIpt.open() timerInputText.focus = false warnMsgInput.focus = false }else{ countDownTex.text = timerInputText.text } } } Button{//倒計時開始
 id:startBtn width: btnWidth height: btnHeight text: "Start" } } } WarnPop{ id:hintTimeIpt x:root.x+root.width/3
 y:root.y warnText: "Please enter time!" } WarnPop{ id:hintWarnIpt x:root.x+root.width/3
 y:root.y warnText: "Please enter Warning Message!" } Connections{ target: hintTimeIpt.closeWarn onClicked:{ hintTimeIpt.close() } } Connections{ target: hintWarnIpt.closeWarn onClicked:{ hintWarnIpt.close() } } }

WarnPop.qmlhtm

import QtQuick 2.0 import QtQuick.Controls 2.2 Dialog{ id:delDialog property alias warnText: warnText.text property alias closeWarn: confirm width: 120 height: 160 background: Rectangle{ color: "#ECF0F1" anchors.fill: parent } header: Rectangle{ width: delDialog.width height: 50 border.color: "#ECF0F1" Image{ width: 30 height: 30 anchors.centerIn: parent source: "qrc:/warning.png" } } contentItem: Rectangle{ border.color: "#ECF0F1" color: "#ECF0F1" Text{ id:warnText anchors.fill: parent anchors.centerIn: parent font.family: "Microsoft Yahei" text: "" wrapMode: Text.WordWrap verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } } footer: Rectangle{ width: delDialog.width height: 50 border.color: "#ECF0F1" color: "#ECF0F1" Button{ id:confirm width: 80 height: 30 anchors.centerIn: parent text: "Confirm" } } }

所用的圖片是本身作的,能夠在GitHub demo中找到源文件blog

相關文章
相關標籤/搜索