【QT】自制一个简单的时钟（跟随系统时间）

目录

源代码：

 输出结果如下：

---

         使用QT完成一个简单的时钟图形化界面，功能是完成了时分秒指针能够跟随系统时间移动

        设计思路：

                1、首先将时钟的边框绘制出来

                2、定义出一个定时器t1，将定时器连接到update_slot槽内，每次超时，就会自动调用timeout信号，用来更新当前的界面update();

                3、绘制时分秒，通过系统时间控制坐标的旋转，依次绘制出时间

源代码：

widegt.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTimer>
#include <QPainter>      //画家类
#include <QPaintEvent>   //绘制事件类
#include <QPen>
#include <QFont>
#include <QTime>


QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();


    //重写自己的绘制事件处理函数
    void paintEvent(QPaintEvent *event) override;

    void drawClockDial(QPainter *painter);           //绘制圆内里面的时刻标志


public slots:
    void update_slot();   //自定义槽函数用来处理计时器超时




private:
    Ui::Widget *ui;
    QTimer t1;            //定义一个计时器


};
#endif // WIDGET_H

main.cpp 

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

widegt.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 1. 连接定时器信号到 update() 槽
    connect(&t1, &QTimer::timeout, this, &Widget::update_slot);

    // 2. 启动定时器，每1000毫秒（1秒）触发一次
    t1.start(1000);

    // 设置窗口没有边框和标题栏
    setWindowFlags(Qt::FramelessWindowHint);

    // 设置窗口大小为半径的两倍（直径）
    int diameter = 410; // 半径为200，直径为400
    resize(diameter, diameter);

    // 创建圆形遮罩
    QPainterPath path;
    path.addEllipse(0, 0, diameter, diameter); // 半径为宽度和高度的一半

    // 设置窗口遮罩为圆形
    setMask(path.toFillPolygon().toPolygon());
}

Widget::~Widget()
{
    delete ui;
}

//重写自己的绘制事件处理函数
void Widget::paintEvent(QPaintEvent *event)
{
    //1、实例化一个画家
    QPainter painter(this);

    //2、准备画笔
    QPen pen;
    pen.setStyle(Qt::SolidLine);        //使用实线
    pen.setColor("pink");               //设置画笔颜色为粉色
    pen.setWidth(10);                   //设置画笔粗细为10

    //3、给画家安排上画笔
    painter.setPen(pen);

    //4、设置画笔的坐标起点:在正中心
    painter.translate(this->width()/2, this->height()/2);

    //4、绘制一个圆
    int radius = 200;
    painter.drawEllipse(QPoint(0,0), radius, radius);

    //5、给时钟内加上时刻标志以及数字
    drawClockDial(&painter);

    //6、获取当前时间
    QTime time = QTime::currentTime();

    // 绘制时针
    painter.save();
    painter.rotate(30.0 * (time.hour() + time.minute() / 60.0));     //旋转坐标角度与当前位置水平
    painter.setPen(QPen(Qt::black, 10));
    painter.drawLine(0, 0, 0, -70);
    painter.restore();

    // 绘制分针
    painter.save();
    painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
    painter.setPen(QPen(Qt::blue, 8));
    painter.drawLine(0, 0, 0, -90);
    painter.restore();

    // 绘制秒针
    painter.save();
    painter.rotate(6.0 * time.second());
    painter.setPen(QPen(Qt::red, 6));
    painter.drawLine(0, 0, 0, -110);
    painter.restore();
}


//自定义函数，为时钟内部加上时刻标志
void Widget::drawClockDial(QPainter *painter)
{
    int radius = 200;                   // 假设圆的半径为250
    int hourTickLength = 30;            // 小时刻度的长度
    int minuteTickLength = 15;          // 分钟刻度的长度

    for(int i = 0; i < 60; ++i)
    {
        painter->save();                //保存一下当前界面
        painter->rotate(6 * i);         // 坐标轴旋转6度

        // 绘制分钟刻度
        painter->drawLine(0, radius - minuteTickLength, 0, radius);

        //恢复绘制之前的状态
        painter->restore();

        if(i % 5 == 0)
        {
            // 绘制小时刻度
            painter->save();
            painter->rotate(6 * i);         // 坐标轴旋转6度
            painter->drawLine(0, radius - hourTickLength, 0, radius);
            painter->restore();

            //绘制数字

        }
    }
}

void Widget::update_slot()
{
    update();         //更新当前页面
}

 输出结果如下：

        时分秒能够跟随系统时间运动，完成一个简单的时钟功能