【Qt Quick】用动态加载实现轮盘时钟

效果展示

代码部分

clock.h

#ifndef CLOCK_H
#define CLOCK_H

#include <QObject>
#include <map>


class Clock : public QObject
{
    Q_OBJECT
public:
    explicit Clock(QObject *parent = nullptr);

    Q_INVOKABLE QString mmANDss(int _index);
    Q_INVOKABLE QString hh(int _index);
public:
    std::map<int,QString> map_Hours;
signals:

};

#endif // CLOCK_H

clock.cpp

#include "clock.h"
#include <QStringList>
#include <QDebug>

//QStringList strList = {"零","壹","贰","叁","肆","伍","陆","柒","捌","玖"};
QStringList strList = {"零","一","二","三","四","五","六","七","八","九"};
Clock::Clock(QObject *parent) : QObject(parent)
{

}

QString Clock::hh(int _index)
{
    map_Hours.clear();
    for(int i = 1; i < 13; ++i)
    {
        if(i < 10)
        {
            map_Hours[i] = strList.at(i);
        }
        else
        {
            QString tempStr = strList.at(i/10);
            tempStr += strList.at(i - (i/10)*10);
            map_Hours[i] = tempStr;
        }
    }

    return  map_Hours[_index];
}

QString Clock::mmANDss(int _index)
{
    map_Hours.clear();
    for(int i = 1; i <= 60; ++i)
    {
        if(i < 10)
        {
            map_Hours[i] = strList.at(i);
        }
        else if(60 == i)
        {
            map_Hours[i] = "零零";
        }
        else
        {
            QString tempStr = strList.at(i/10);
            tempStr += strList.at(i - (i/10)*10);
            map_Hours[i] = tempStr;
        }
    }

    return  map_Hours[_index];
}

MyText.qml

import QtQuick 2.0

Text {
    id:text_Rotation
    text: ""
    color: "#252525"
    font.bold: true
    font.pointSize: 12
    anchors.centerIn: parent
}

Time.qml

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Page {
    id:time_ROOT

    background: null
    property var textColor: "white"

    //获取时分秒
    function currentHour(){
        return Qt.formatDateTime(new Date(),"hh");
    }
    function currentMinu(){
        return Qt.formatDateTime(new Date(),"mm");
    }
    function currentSeco(){
        return Qt.formatDateTime(new Date(),"ss");
    }
    //获取日期
    function currentDate(){
        return Qt.formatDateTime(new Date(),"yyyy年MM月dd日");
    }
    //获取星期几
    function currentWeek(){
        return Qt.formatDateTime(new Date(),"ddd");
    }

    Component.onCompleted: {
        timer.start()

        for(var i = 1; i <= 60; ++i){
            loadTextMinute((i-1)*6,$CL.mmANDss(i))
        }

        for(var j = 1; j <= 60; ++j){
            loadTextSecond((j-1)*6,$CL.mmANDss(j))
        }

        for(var k = 1; k < 13; ++k){
            loadTextHour((k-1)*30,$CL.hh(k))
        }
    }


    Rectangle {id:rect_Hour;color: "#00000000";anchors.fill: parent}
    Rectangle {id:rect_Minu;color: "#00000000";anchors.fill: parent}
    Rectangle {id:rect_Seco;color: "#00000000";anchors.fill: parent}
    //时
    function loadTextHour(_angle,_text){
        var component = Qt.createComponent("MyText.qml")
        if(component.status === Component.Ready){
            var vText = component.createObject(rect_Hour);
            vText.text = "\t\t\t" + _text
            //vText.color = "red"

            vText.rotation = _angle

            return true
        }
        return false
    }

    //分
    function loadTextMinute(_angle,_text){
        var component = Qt.createComponent("MyText.qml")
        if(component.status === Component.Ready){
            var vText = component.createObject(rect_Minu);
            vText.text = "\t\t\t\t\t" + _text
            //vText.color = "#252525"

            vText.rotation = _angle

            return true
        }
        return false
    }

    //秒
    function loadTextSecond(_angle,_text){
        var component = Qt.createComponent("MyText.qml")

        if(component.status === Component.Ready){
            var vText = component.createObject(rect_Seco);
            vText.text = "\t\t\t\t\t\t\t" + _text
            //vText.color = "red"

            vText.rotation = _angle

            return true
        }
        return false
    }


    Text {
        id:text_Second
        text: "\t\t\t\t\t\t\t\t秒"
        color: textColor
        font.bold: true
        font.pointSize: 12
        anchors.centerIn: parent
    }
    Text {
        id:text_Minute
        text: "\t\t\t\t\t\t分"
        color: textColor
        font.bold: true
        font.pointSize: 12
        anchors.centerIn: parent
    }
    Text {
        id:text_Hour
        text: "\t\t\t\t时"
        color: textColor
        font.bold: true
        font.pointSize: 12
        anchors.centerIn: parent
    }

    Column{
        spacing: 5
        anchors.centerIn: parent
        Text {
            id: text_Week
            text: ""
            color: textColor
            font.bold: true
            font.pointSize: 12
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Text {
            id: text_Date
            text: ""
            color: textColor
            font.bold: true
            font.pointSize: 12
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }


    Timer{
        id:timer
        interval: 1;
        repeat: true
        onTriggered: {
            text_Week.text = currentWeek()
            text_Date.text = currentDate()
            rect_Hour.rotation = (currentHour() - 1) * (-30)
            rect_Minu.rotation = (currentMinu() - 1) * (-6)
            rect_Seco.rotation = (currentSeco() - 1) * (-6)
        }
    }

}