基于QT软件的DIY桌面番茄钟-上篇

前言
- 参考本教程(上篇)可实现的功能：
实现细节：
- Day 1:
- - 需求导图：
  - QT的安装：
- Day 2:
- - 创建项目：
  - 构建无边框界面(后续可添加缩放功能，未添加)
  - 增加透明度界面，新增单击界面改变界面透明度（后续统计第几个番茄钟决定用透明度来统计）
  - 代码展示：
- Day 3:
- - 计时器的实现
  - 参考代码：

前言

番茄工作法是个不错的方法，本想要从淘宝买一个番茄钟，但发现要99块钱，太贵了。尝试自制一个基于Windows的桌面悬浮番茄钟。

经过一番搜索，决定采用Qt方式进行DIY。计划用一周的时间进行DIY，并给出具体的实现细节。

参考本教程(上篇)可实现的功能：

计时器功能及界面变色功能：番茄钟25min(红色)，休息5min(绿色)。
暂停功能：单击实现暂停与恢复暂停。

置顶功能，始终置于其它窗体上面，避免被遮挡。

后续更多功能及扩展将在**从无到有的基于QT软件的DIY桌面番茄钟(2)**中添加。具体可执行文件将在功能完全扩展后发出，需要目前的beta版本的可执行文件可在评论区留言。

实现细节：

Day 1:

需求导图：

QT的安装：

QT官网
首先从Qt官网下载开源安装包，之后进行安装：
需要首先进行注册登录，之后进入到如下步骤

选择如下安装即可，

进入到下载页面，静静等待，

Day 2:

创建项目：

创建完后如下：

创建完成后，有如下文件

Header Files
- tomatoclock.h
Source Files
- main.cpp
- tomatoclock.cpp

Header Files: 用于放头文件，所有.h的声明都放在这里。
Source Files: 放源文件，所有.c,.cpp的程序实现的代码都放这里。
Resource Files: 所有的资源文件，如图标，图片，菜单，文字之类的文件都放这里。

头文件(header files)又称作预编译文件，是用户应用程序和函数库之间的桥梁和纽带。作为一种包含功能函数、数据接口声明的载体文件，用于保存程序的声明，而定义文件用于保存程序的实现。

头文件的主要作用在于调用库功能，对各个被调用函数给出一个描述，其本身不包含程序的逻辑实现代码，它只起描述性作用，告诉应用程序通过相应途径寻找相应功能函数的真正逻辑实现代码。用户程序只需要按照头文件中的接口声明来调用库功能，编译器会从库中提取相应的代码。

简单的说，头文件就是作者告诉程序从哪调用库函数的文件。

构建无边框界面(后续可添加缩放功能，未添加)

构建了一个无边框的界面，增加番茄钟的美观图，如图所示：

增加透明度界面，新增单击界面改变界面透明度（后续统计第几个番茄钟决定用透明度来统计）

代码展示：

tomatoclock.h

#ifndef TOMATOCLOCK_H
#define TOMATOCLOCK_H#include <QWidget>
#include <windows.h>
#include <windowsx.h>
#include <QMouseEvent>
QT_BEGIN_NAMESPACE
namespace Ui { class TomatoClock; }
QT_END_NAMESPACEclass TomatoClock : public QWidget
{Q_OBJECTpublic:TomatoClock(QWidget *parent = nullptr);~TomatoClock();
protected:
//     声明一些函数void mousePressEvent(QMouseEvent *e); //鼠标单击事件void mouseMoveEvent(QMouseEvent *e); // 鼠标单击拖动窗口
private:int boundaryWidth;float Opacity;QPoint clickPos;Ui::TomatoClock *ui;
};
#endif // TOMATOCLOCK_H

main.cpp

#include "tomatoclock.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);TomatoClock w;w.show();return a.exec();
}

tomatoclock.cpp

#include "tomatoclock.h"
#include "./ui_tomatoclock.h"TomatoClock::TomatoClock(QWidget *parent): QWidget(parent), ui(new Ui::TomatoClock)
{ui->setupUi(this);boundaryWidth=4;                                    //设置触发resize的宽度Opacity = 1.0;this->setWindowFlags(Qt::FramelessWindowHint);      //设置为无边框窗口this->setMinimumSize(45,45);                        //设置最小尺寸this->setStyleSheet("background:#D1EEEE");          //设置背景颜色this->setWindowOpacity(Opacity);                    //设置不透明度}
TomatoClock::~TomatoClock()
{delete ui;
}void TomatoClock::mousePressEvent(QMouseEvent *e)
{if(e->button()==Qt::LeftButton)clickPos=e->pos();Opacity = 0.5;this->setWindowOpacity(Opacity);
}
void TomatoClock::mouseMoveEvent(QMouseEvent *e)
{if(e->buttons()&Qt::LeftButton)move(e->pos()+pos()-clickPos); //父窗口的左上角+当前鼠标指针移动-初始单击时候鼠标指针的方向
}//void move(const QPoint &);
//其中move的原点是父窗口的左上角，  如果没有父窗口，则桌面即为父窗口

Day 3:

计时器的实现

实现计时器功能及计时器初始化以及暂停功能。通过单击窗体实现暂停及恢复暂停。
增加一些界面美化功能，包括单击窗体界面变色以及番茄钟期间和休息期间界面不同颜色。
增加置顶功能，始终置于其它窗体上面，避免被遮挡。

具体示例参考Gif图：

计时器功能及界面变色功能：
暂停功能：

参考代码：