Qt制作一个时钟小程序

最新推荐文章于 2024-09-11 19:50:40 发布

weixin_44585751

最新推荐文章于 2024-09-11 19:50:40 发布

阅读量504

点赞数 2

分类专栏：时钟小程序文章标签： qt

本文链接：https://blog.csdn.net/weixin_44585751/article/details/106516715

版权

时钟同时被 2 个专栏收录

1 篇文章

订阅专栏

小程序

1 篇文章

订阅专栏

效果展示

这是动态图，链接里面是视频(https://v.youku.com/v_show/id_XNDY5Njk3MjczMg==.html)
以下是截图所示
在这里插入图片描述

准备工作

了解QPainter类

这是使用Qt的绘图事件、QPainter 类（在小部件和其他绘制设备上执行低级绘制）来实现的。

QPainter类：提供了高度优化的功能来完成大多数图形用户界面程序所需的工作。它可以画从简单的线条到复杂的形状，如馅饼和和弦。它还可以绘制对齐的文本和像素。通常，它在“自然”坐标系中绘制，但也可以进行视图和世界变换。QPainter类可以对继承QPaintDevice类的任何对象进行操作。

QPainter类的常见用法是在小部件的paint事件中：构造和定制（例如设置笔或画笔）painter。然后画。绘制后请记住销毁Qpanter类对象。

重写绘制事件虚函数

这是头文件
#ifndef COLOCK_H
#define COLOCK_H
#include <QPaintEvent>

#include <QWidget>

namespace Ui {
class Colock;
}

class Colock : public QWidget
{
    Q_OBJECT

public:
    explicit Colock(QWidget *parent = nullptr);
    ~Colock();

protected:
    void paintEvent(QPaintEvent *event);//重写绘制事件虚函数
    void mouseDoubleClickEvent(QMouseEvent *event);//重写鼠标双击事件虚函数
private:
    Ui::Colock *ui;


    static const QPoint hour[4];
    static const QPoint minute[4];
    static const QPoint second[4];
};

#endif // COLOCK_H

绘制图标

画笔

在这我讲简单点，在生活中，要绘制图标时，首先得有画笔。想一下，要是没有画笔，怎么画画，对不。有了画笔，当然得有颜料，没有颜料画个毛。

 QPainter painter(this);//准备画笔
 painter.setPen(Qt::green);//画笔颜色

在这，画笔的颜色我是只使用了Qt给定的颜色，当然也可以自定义。想要别的颜色，自己调制。

QColor hourColor(127,127,127);//设置时针颜色
 painter.setPen(hourColor);//画笔颜色

图形

在这给大家介绍一下，Qt的一些基本形状，这样大家在绘制的时候就知道有些啥基本形状，需要来绘制。

drawLines :画线
drawPath：绘制轮廓

drawPicture: 绘制图片
drawPie：绘制饼图
drawPixmap：绘制图
drawPoint：描点
drawPolygon：绘制多边形
drawPolyline: 多段线点计数。
drawRect:绘制长方形
drawRoundedRect：绘制圆角矩形
drawStaticText：绘制静态文本
drawText：绘制当前文本
drawTiledPixmap：在给定的矩形内绘制平铺像素
…… ……
这些简单的图表就介绍在这，如果还有不会的，可以问我。当然，讲上述的搞懂了，已经够用了。

绘制时钟

工欲善其事必先利其器，已经万事俱备，就差开工了。前期准备工作做好之后，那么就要实行。学过的知识内容，不能只是学了，也要会用、多用。

#include "colock.h"
#include "ui_colock.h"
#include <QPainter>
#include <QBrush>
#include <QTime>
#include <QTimer>
#include <QColor>
#include <QPixmap>
#include <QIcon>


const QPoint Colock:: hour[4]   = {QPoint(0,-70),QPoint(12,0),QPoint(0,12),QPoint(-12,-2)};
const QPoint Colock:: minute[4] = {QPoint(0,-95),QPoint(10,0),QPoint(0,10),QPoint(-10,0)};
const QPoint Colock:: second[4] = {QPoint(0,-130),QPoint(6,0),QPoint(0,6),QPoint(-6,2)};


Colock::Colock(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Colock)
{
    ui->setupUi(this);
    this->setWindowTitle("贵哥牌");
    //this->setWindowFlags(Qt::FramelessWindowHint);//无边框
    this->setAttribute(Qt::WA_TranslucentBackground);//背景透明
    QTimer *timer = new QTimer();
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));
    timer->start(1000);
    this->setWindowIcon(QIcon(":/2.ico"));
}

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

void Colock::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);//准备画笔
    QTime time = QTime::currentTime();//获取当前时间

    painter.translate(this->width()/2,this->height()/2);//移动坐标系

    int size = this->width() < this->height() ? this->width() : this->height();
    painter.scale(size/350.0,size/350.0);


   // painter.setBackground(Qt::BrushStyle::Dense2Pattern);//设置背景

    painter.setPen(Qt::green);
    QString dataCurrnet =  QDate::currentDate().toString();
    painter.drawRect(-30.0, -80.0, 60.0, 30.0);
    QColor fontColor(255,255,127);
    painter.setPen(fontColor);
    painter.drawText(-30.0, -72.0, 60.0, 30.0,Qt::AlignHCenter|Qt::AlignTop,QString(dataCurrnet));


    QColor hourColor(127,127,127);//设置时针颜色
    painter.setPen(Qt::yellow);
    painter.setBrush(hourColor);
    painter.setRenderHint(QPainter::Antialiasing,true);//图像锐化
    painter.save();//保存当前位置，以做参考
    painter.rotate(30.0*time.hour());//旋转
    painter.drawConvexPolygon(hour,4);
    painter.restore();


    QColor minuteColor(170,255,127);
    painter.setPen(Qt::black);
    painter.setBrush(minuteColor);
    painter.setRenderHint(QPainter::Antialiasing,true);//图像锐化
    painter.save();
    painter.rotate(6.0*time.minute());
    painter.drawConvexPolygon(minute,4);
    painter.restore();


    QColor secondColor(0,255,255);
    painter.setPen(Qt::yellow);
    painter.setBrush(secondColor);
    painter.setRenderHint(QPainter::Antialiasing,true);//图像锐化
    painter.save();
    painter.rotate(6.0*time.second());
    painter.drawConvexPolygon(second,4);
    painter.restore();

    //绘制表盘
    for(int i=0; i<60; i++)
    {
        QColor lineColor(7,227,227);
        painter.setPen(lineColor);
        painter.rotate(6.0);
        painter.drawLine(0,-150,0,-145);
    }

    //绘制整点表盘
    for(int i=0; i<12; i++)
    {
        QColor lineColor(227,0,7);
        painter.setPen(lineColor);
        painter.rotate(30.0);
        painter.drawLine(0,-150,0,-135);
    }

    //绘制整点数字
    for(int i=0; i<12; i++)
    {
        QColor lineColor(127,127,127);
        painter.setPen(lineColor);
        painter.rotate(30.0);
        painter.drawText(-20,-130,40,100,Qt::AlignHCenter|Qt::AlignTop,QString::number(i+1));
    }

}

//鼠标双击事件
void Colock::mouseDoubleClickEvent(QMouseEvent *event)
{
    if(isFullScreen())
    {
        this->showNormal();
    }
    else {
        this->showMaximized();
    }
}

制作小程序

当然啦，目前制作好的，也就是可以在本电脑上可以运行，不能在别人电脑上运行。这就好比，你做了一款超好玩的游戏，可结果是，只能在你电脑上玩，别人玩不了。别人要是想玩的话，必须装个十几个G大的软件（我就是打个比方），那对于客户来说，自然是不太买账。

于是，就要想一个办法，既可以在别人电脑上运行你的程序，又不需要很麻烦的安装大量的库文件。在这，我给你教一招，很简单、很使用。

第一步：将Qt的构建为Release版本，不要构建为Debug版本。
第二步：在releas文件夹中找到.exe文件复制在新建文件夹中。
细心的同学可能会发现，咦！我的.exe文件怎么会有个图标捏，难道编译完之后就会自动添加吗？回答：No！！。当然不会啦，哪有这么好的事。

想知道怎么搞上去的么？来，贵哥手把手教你，很简单。给你的应用程序绘制属于你的风格。
首先准备一张ICO图片，将其复制在根目录下，然后添加。（要是不会定制ICO图片的同学，来，贵哥给你个链接http://www.bitbug.net/），要是不会添加图片的同学，哼！伸出你的左手，狠狠扇一下你的右手。这次一定要学会（开玩笑的）。
在左上角的文件，右键，选择Add new

新弹出一个对话框，选择Qt----->Resource File

写一个文件名（自定义）我一般都是res，可以根据自己编程习惯来定义。

在新弹出的对话框中，删除" / "后面的路径

只保留根目录

点击添加，再点击添加文件，找到刚刚复制好的图片，就搞定了。

这些就是添加图片到Qt文件中。光学会添加图片，不会使用，那还是白搭，白浪费功夫。别着急，贵哥这就给你介绍如何将图片绘制在自己的应用程序上。
找到自己的.pro文件，在最后一行添加以下代码，就可以搞定

RC_ICONS += custom.ico  （custom.ico就是你自己的图片名字）

在首页认真看过我的制作视频，可以发现一点。
在这里插入图片描述
左上角也有个图标，真神奇。其实很简单，就一行代码就可以搞定

在构造函数中，添加以下代码，就可以搞定
this->setWindowIcon(QIcon(":/conster.ico"));

打包小程序

到了这，有些同学想问了，贵哥，咋看你说这么多，还不见你将小程序打包出来，急死人了，你到底会不会，说不说？不说我可要走啦！别急，这就来了。前面我说了，将你的.exe程序复制在一个新建文件夹中，名字是自定义，没有要求。

找到你的windeployqt.exe，在这，因为涉及到每个同学的Qt版本不同，那就以我的Qt5.12为例。我的在C:\Qt\Qt5.12.1\5.12.1\msvc2017\bin，可以根据自己的安装目录来查找。

打开命令行，此时，有同学想问，贵哥，这命令行咋打开来着，忘了呀！别急，来贵哥教你。将你新建的文件夹按住Shift + 右键，选择在此处打开Powershell窗口

输入windeployqt.exe 自定义.exe,这样它会自动添加所需要的库文件，不用手动添加，非常实用、方便。

在这里插入图片描述
稍等几分钟，就可以将所需要的库文件添加在新建文件中。
将你的新建文件夹，发送在其他没有安装Qt的电脑上试试，就可以实现你的小程序。收工！