Quick控件--4.clock

1 效果

2 简介

clock控件常用，自定义备用。

3 控件代码

3.1 SenClock.qml

import QtQuick 2.12

Column {
    id: container

    property date dateTime: new Date()
    property color color: "lightgrey"
    property alias timeFont: time.font
    property alias dateFont: date.font

    Timer {
        interval: 100; running: true; repeat: true;
        onTriggered: container.dateTime = new Date()
    }

    Text {
        id: time
        anchors.horizontalCenter: parent.horizontalCenter
        color: container.color
        text : Qt.formatTime(container.dateTime, "hh:mm")
        font.pointSize: 72
    }

    Text {
        id: date
        anchors.horizontalCenter: parent.horizontalCenter
        color: container.color
        text : Qt.formatDate(container.dateTime, Qt.DefaultLocaleLongDate)
        font.pointSize: 24
    }
}

3.2 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenCom

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SenCom.SenClock {
        anchors.centerIn: parent
    }
}