1. 说明

在自定义时钟组件时，使用到的基本控件主要是Canvas，在绘制相关元素时有两种方式：一种时在同一个canvas中绘制所有的部件元素，这样需要不断的对画笔和画布的属性进行保存和恢复，容易混乱；另一种就是创建多个canvas组件，每一部分的元素绘制都在各自的画布进行绘制，逻辑比较清晰，但是canvas组件会相对较多，本文使用的是第二种方式。
效果展示：

2. 整体代码

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    id:root
    implicitWidth: 400
    implicitHeight: implicitWidth

    // 尺寸属性
    property real outerCircleRadius:root.width / 2.05
    property real innerCircleRadius:root.width / 2.05

    // 颜色属性
    property color bgColor:"white"
    property color outerColor:"black"
    property color innerColor:"black"
    property color innerRootColor:"lightSlateGray"
    property color innerLineColorL:"#484D58"
    property color innerLineColorS:"#63677A"
    property color textColor:"black"
    property color hourLineColor:"#484D58"
    property color minuteLineColor:"#484D58"
    property color secondLineColor:"red"
    property color timeTxtColor:"black"

    // 时间属性
    property var hours
    property var minutes
    property var seconds
    property var currentTime
    property alias hoursAngle:hourLine.angle
    property alias minutesAngle:minuteLine.angle
    property alias secondsAngle:secondLine.angle

    // 组件加载完成后先初始化当前时间
    Component.onCompleted: {
        calculateAngle()
    }

    // 时间计算
    function calculateAngle(){
        var date = new Date()
        hours = date.getHours()
        // 模除得到12小时制的小时数
        hours = hours % 12
        minutes = date.getMinutes()
        seconds = date.getUTCSeconds()
        currentTime = hours + ":" + minutes + ":" + seconds
        hoursAngle = Math.PI*2/12*hours+Math.PI*2*minutes/12/60-Math.PI
        minutesAngle = Math.PI*2*minutes/60 + Math.PI*2*seconds/60/60 -Math.PI
        secondsAngle = Math.PI*2*seconds/60-Math.PI
    }

    // 绘制背景
    Canvas{
        id:bgCircle
        width: root.width
        height: root.height
        anchors.centerIn: parent
        onPaint: {
            // 绘制背景
            var ctx = getContext("2d")  
            ctx.save()
            ctx.lineWidth = root.width/50   
            ctx.fillStyle = bgColor
            ctx.beginPath()
            ctx.arc(root.width/2,root.height/2,outerCircleRadius,0,Math.PI * (12/6))
            ctx.fill()
            ctx.restore()
        }
    }
    // 绘制圆环轮廓
    Canvas{
        id:outerCircle
        width: root.width
        height: root.height
        anchors.centerIn: parent
        onPaint: {
            var ctx = getContext("2d")  //创建画师
            //为画师创建画笔并设置画笔属性
            ctx.lineWidth = root.width/50   //设置画笔粗细
            ctx.strokeStyle = outerColor    //设置画笔颜色
            ctx.beginPath()     //每次绘制调用此函数，重新设置一个路径
            // 按照钟表刻度进行划分，一圈是Math.PI * 2,分成12个刻度，每个刻度占用 1/6
            // canvas绘制圆弧，是按照顺时针绘制，起点默认在三点钟方向
            ctx.arc(root.width/2,root.height/2,outerCircleRadius,0,Math.PI * (12/6))
            ctx.stroke()    //根据strokeStyle对边框进行描绘
        }
    }
    // 绘制圆环内衬
    Canvas{
        id:innerCircle
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property real endAngle:Math.PI * (12/6)
        onPaint: {
            var ctx = getContext("2d")  
            ctx.save()
            ctx.lineWidth = root.width/50   
            ctx.strokeStyle = innerColor     
            ctx.beginPath()     
            ctx.arc(root.width/2,root.height/2,innerCircleRadius,0,endAngle)
            ctx.stroke()    
            ctx.restore()

            // 绘制指针根部圆圈
            ctx.save()
            ctx.lineWidth = root.width/50   
            ctx.fillStyle = innerRootColor
            ctx.beginPath()
            ctx.arc(root.width/2,root.height/2,innerCircleRadius/16,0,endAngle)
            ctx.fill()
            ctx.restore()
        }
    }
    // 绘制刻度线
    Canvas{
        id:innerLine
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property real lineNums:60
        onPaint: {
            var ctx = getContext("2d")  
            for (var i = 0; i <= lineNums; ++i){
                ctx.beginPath();
                var angle = 2 * Math.PI / 60 * i;
                var dx = Math.cos(angle)*(outerCircleRadius-15);
                var dy = Math.sin(angle)*(outerCircleRadius-15);
                var dx2 = Math.cos(angle)*(outerCircleRadius-7);
                var dy2 = Math.sin(angle)*(outerCircleRadius-7);
                if (i % 5 === 0){
                    ctx.lineWidth = root.width/100
                    ctx.strokeStyle = innerLineColorL
                }else{
                    ctx.lineWidth = root.width/200
                    ctx.strokeStyle = innerLineColorS
                }
                ctx.moveTo(root.width/2+dx,root.height/2+dy);
                ctx.lineTo(root.width/2+dx2,root.height/2+dy2);
                ctx.stroke();
            }
        }
    }
    // 绘制数字
    Canvas{
        id:drawText
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property var numbers : [1,2,3,4,5,6,7,8,9,10,11,12]
        onPaint: {
            var ctx = getContext("2d")  
            ctx.font = "18px Arial";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            for(var i = 0; i < 12; ++i)
            {
                ctx.fillStyle = textColor
                var angle = 2 * Math.PI / 12 * numbers[i] - 3.14 / 2;
                var dx = Math.cos(angle)*(outerCircleRadius-30);
                var dy = Math.sin(angle)*(outerCircleRadius-30);
                ctx.fillText(numbers[i],root.width/2 + dx,root.height / 2 + dy);
                ctx.fill()
            }
        }
    }
    // 绘制时针线
    Canvas{
        id:hourLine
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property real angle
        onPaint: {
            var ctx = getContext("2d")  
            // 先清空画布上之前的内容
            ctx.clearRect(0,0,width,height)
            ctx.save()
            ctx.beginPath()
            ctx.lineWidth = root.width/100
            ctx.strokeStyle=hourLineColor
            // 平移坐标点(注意：坐标系原点先平移，再旋转)
            ctx.translate(root.width/2,root.height/2)
            // 旋转坐标系
            ctx.rotate(angle)
            // 坐标原点变化之后再进行实际的绘图
            ctx.moveTo(0,-20);
            ctx.lineTo(0,outerCircleRadius / 2 - 15);
            ctx.stroke()
            ctx.restore()
        }
    }
    // 绘制分针线
    Canvas{
        id:minuteLine
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property real angle
        onPaint: {
            var ctx = getContext("2d")  
            ctx.clearRect(0,0,width,height)
            ctx.save()
            ctx.beginPath()
            ctx.lineWidth = root.width/100
            ctx.strokeStyle=minuteLineColor
            // 平移坐标点(注意：坐标系原点先平移，再旋转)
            ctx.translate(root.width/2,root.height/2)
            // 旋转坐标系
            ctx.rotate(angle)
            // 坐标原点变化之后再进行实际的绘图
            ctx.moveTo(0,-25);
            ctx.lineTo(0,outerCircleRadius / 2 - 5);
            ctx.stroke()
            ctx.restore()
        }
    }
    // 绘制秒针线
    Canvas{
        id:secondLine
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property real angle
        onPaint: {
            var ctx = getContext("2d")  
            ctx.clearRect(0,0,width,height)
            ctx.save()
            ctx.beginPath()
            ctx.lineWidth = root.width/100
            ctx.strokeStyle=secondLineColor
            // 平移坐标点(注意：坐标系原点先平移，再旋转)
            ctx.translate(root.width/2,root.height/2)
            // 旋转坐标系
            ctx.rotate(angle)
            // 坐标原点变化之后再进行实际的绘图
            ctx.moveTo(0,-30);
            ctx.lineTo(0,outerCircleRadius / 1.5);
            ctx.stroke()
            ctx.restore()
        }
    }
    // 当前时间显示
    Text{
        id:timeTxt
        y:root.height * 0.75
        anchors.horizontalCenter: root.horizontalCenter
        text: currentTime
        font.pixelSize: root.width/12
        color: timeTxtColor
    }

    // 使用定时器(每秒钟进行计算)
    Timer{
        id:angleCal
        interval: 1000
        repeat: true
        running: true
        onTriggered: {
            calculateAngle()
            hourLine.requestPaint()
            minuteLine.requestPaint()
            secondLine.requestPaint()
        }
    }
}