【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_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic: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，直径为400resize(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;                   // 假设圆的半径为250int 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();         //更新当前页面
}