嵌入式Qt-做一个秒表-Windows系列-PHP中文网

本文继续探索嵌入式qt开发，旨在实现一个模仿手机秒表功能的程序。上一篇文章《嵌入式qt-动手编写并运行自己的第1个arm-qt程序》介绍了如何编写一个电子时钟的演示，本文将使用qt creator的ui界面设计功能来开发这个秒表程序。

首先，看看秒表的最终效果：

https://www.php.cn/link/99644a15c905e2bea0236398dd480dd5?

1 创建Qt工程

创建Qt工程的具体步骤可以参考之前的文章《嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序》。本文的不同之处在于，我们将使用Qt Creator的UI界面设计功能，因此在创建工程时需要勾选创建界面的选项。

嵌入式Qt-做一个秒表

创建完成后的Qt默认工程结构如下：

嵌入式Qt-做一个秒表

双击

widget.ui

登录后复制

文件即可打开UI设置页面：

嵌入式Qt-做一个秒表

先简单熟悉一下各个功能区：

嵌入式Qt-做一个秒表

2 代码编写

2.1 UI界面设计

根据我的Linux板子屏幕的分辨率（800x480），调整界面的尺寸：

嵌入式Qt-做一个秒表

从左侧拖入一个Label，并修改字体大小：

嵌入式Qt-做一个秒表

接着从左侧拖入所需的其他组件（PushButton、TextBrowser）和位置调节组件（HorizontalSpacer、VerticalSpacer），并进行水平和垂直布局。例如，选中3个按钮和中间的2个弹簧，点击工具栏中的水平布局按钮：

嵌入式Qt-做一个秒表

3个按键的水平布局效果如下：

嵌入式Qt-做一个秒表

然后依次对其他组件进行布局：

嵌入式Qt-做一个秒表

调整字体居中显示：

嵌入式Qt-做一个秒表

通过拖拽调整最大组合组件的外尺寸，并修改不同级别的组合组件的

layoutStretch

登录后复制

参数，实现按比例显示各个组件：

嵌入式Qt-做一个秒表

点击左下角的三角图标运行，查看效果：

嵌入式Qt-做一个秒表

注意左边留出的空白是为秒表表盘预留的。

2.2 QTimer与QTime介绍

QTimer

登录后复制

类提供了一个高级编程接口，用于重复和单次计时。

QTime

登录后复制

类提供时钟时间功能，可以表示为自午夜以来的小时数、分钟数、秒数和毫秒数。

Qt Creator提供了方便的帮助文档，可以在Qt Creator中直接查看对应功能函数的使用。例如，搜索

QTimer

登录后复制

可以看到对应的介绍和API函数：

嵌入式Qt-做一个秒表

本文需要用到的

QTimer

登录后复制

功能包括：

```
start
```
登录后复制
：启动定时器
```
stop
```
登录后复制
：停止定时器

同样，搜索

QTime

登录后复制

可以看到其介绍和API函数：

嵌入式Qt-做一个秒表

本文需要用到的

QTime

登录后复制

功能包括：

```
setHMS
```
登录后复制
：设置初始时间
```
addMSecs
```
登录后复制
：增加一个时间（毫秒单位）
```
toString
```
登录后复制
：时间转为字符串格式
```
minute
```
登录后复制
：获取分钟
```
second
```
登录后复制
：获取秒
```
msec
```
登录后复制
：获取毫秒

2.3 对应按钮的函数

为了编写更易于理解的代码，在编写之前，需要将组件的默认名称改为便于理解的名称。例如，将3个按键的名称分别改为：

```
Btn_Start
```
登录后复制
：开始按钮，同时具有暂停/继续功能
```
Btn_Reset
```
登录后复制
：复位按钮
```
Btn_Hit
```
登录后复制
：打点按钮，用于记录不同名次的时间

嵌入式Qt-做一个秒表

手动添加

QTimer

登录后复制

和

QTime

登录后复制

对象，用于实现秒表的计时功能：

一帧秒创

基于秒创AIGC引擎的AI内容生成平台，图文转视频，无需剪辑，一键成片，零门槛创作视频。

查看详情

嵌入式Qt-做一个秒表

2.3.1 开始按钮的处理

在Qt编程中，信号和槽机制是关键处理方式。对于使用Qt Creator的图形界面设计方式，通常通过界面实现信号和槽的连接。在开始按钮上右键，选择“转到槽...”：

嵌入式Qt-做一个秒表

由于开始按钮具有暂停/继续功能，这里选择

toggled

登录后复制

信号，利用按钮的按下和松开状态实现暂停/继续功能：

嵌入式Qt-做一个秒表

点击OK后，会自动跳转到代码页面，并生成对应的槽函数框架，然后可以在其中编写业务逻辑代码：

嵌入式Qt-做一个秒表

开始按钮的具体业务逻辑代码如下，当首次按下时，

checked

登录后复制

为

true

登录后复制

，此时启动定时器，记录当前时间戳，并将按钮文字显示为“暂停”，同时将复位和打点按钮置灰：

void Widget::on_Btn_Start_toggled(bool checked){
    if (checked)
    {
        timer.start(ADD_TIME_MSEC);
        lastTime = QTime::currentTime();//记录时间戳
        ui->Btn_Start->setText("暂停");
        ui->Btn_Reset->setEnabled(false);
        ui->Btn_Hit->setEnabled(true);
    }
    else
    {
        timer.stop();
        ui->Btn_Start->setText("继续");
        ui->Btn_Reset->setEnabled(true);
        ui->Btn_Hit->setEnabled(false);
    }
}
connect(&timer, SIGNAL(timeout()), this, SLOT(timeout_slot()));
void Widget::timeout_slot(){
    //qDebug("hello");
    QTime nowTime = QTime::currentTime();
    time = time.addMSecs(lastTime.msecsTo(nowTime));
    lastTime = nowTime;
    ui->Txt_ShowTime->setText(time.toString("mm:ss.zzz"));
}

登录后复制

超时时间到后，计算两次的时间差值，并通过

addMSecs

登录后复制

函数累加时间。

2.3.2 复位按钮的处理

复位按钮通过右键调整到槽，这里使用

clicked

登录后复制

函数，因为复位按钮只需要点击按下功能：

嵌入式Qt-做一个秒表

对应的槽函数实现如下：

void Widget::on_Btn_Reset_clicked(){
    m_iHitCnt = 0;
    timer.stop();
    time.setHMS(0,0,0,0);
    ui->Txt_ShowTime->setText("00:00:00");
    ui->Txt_ShowItem->clear();
    ui->Btn_Start->setText("开始");
    ui->Btn_Start->setChecked(false);
    ui->Btn_Reset->setEnabled(false);
    ui->Btn_Hit->setEnabled(false);
}

登录后复制

主要是将时间归零，更新显示，并将各个按钮的显示状态复位为默认状态。

2.3.3 打点按钮的处理

打点按钮同样使用

clicked

登录后复制

函数，对应的槽函数实现如下：

void Widget::on_Btn_Hit_clicked(){
    QString temp;
    m_iHitCnt++;
    temp.sprintf("--计次 %d--", m_iHitCnt);
    ui->Txt_ShowItem->setFontPointSize(9);
    ui->Txt_ShowItem->append(temp);
    ui->Txt_ShowItem->setFontPointSize(12);
    ui->Txt_ShowItem->append(time.toString("[mm:ss.zzz]"));
}

登录后复制

打点功能用于在秒表运行过程中记录不同名次的时间，并在右侧文本显示框中显示。通过

setFontPointSize

登录后复制

函数设置不同大小的字体显示。

2.4 秒表表盘的实现

在之前的文章《嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序》中，通过代码实现了一个时钟表盘的显示。本文在此基础上修改代码，实现一个显示秒和分的秒表表盘，具体修改后的代码如下：

connect(&timer, SIGNAL(timeout()), this, SLOT(update()));
connect(ui->Btn_Reset, SIGNAL(clicked()), this, SLOT(update()));
void Widget::paintEvent(QPaintEvent *event){
    int side = qMin(width(), height());
    //QTime time = QTime::currentTime();
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.translate(width()/3, height()*2/5); //画图的基准位置
    painter.scale(side/300.0, side/300.0); //随窗口尺寸自动缩放
    //表盘(3个同心圆)
    for (int i=0; i<panel_radius_num; i++)
    {
        if (i==0)
        {
            painter.setPen(QPen(Qt::black, 2));
            painter.drawEllipse(0, 0, panel_radius3, panel_radius3);
        }
        else if (i==1)
        {
            painter.setPen(QPen(Qt::black, 1));
            painter.drawEllipse(0, 0, panel_radius4, panel_radius4);
        }
        else
        {
            painter.setPen(QPen(Qt::black, 1));
            painter.drawEllipse(0, 0, panel_radius5, panel_radius5);
        }
    }
    //秒环
    painter.save();
    painter.rotate(6 * time.second());
    painter.setPen(QPen(Qt::red, 3));
    painter.drawLine(0, 0, 0, -panel_radius2);
    painter.restore();
    //分环
    painter.save();
    painter.rotate(6 * time.minute());
    painter.setPen(QPen(Qt::blue, 3));
    painter.drawLine(0, 0, 0, -panel_radius1);
    painter.restore();
    //秒环数字
    painter.setPen(QPen(Qt::black));
    painter.setFont(QFont("Arial", sec_num_size, QFont::Bold));
    for (int j=0; j<60; j++)
    {
        if (j % 5 == 0)
        {
            painter.save();
            painter.rotate(6 * j);
            painter.drawText(-sec_num_size/2, -panel_radius2-sec_num_size, QString::number(j));
            painter.restore();
        }
    }
    //分环数字
    painter.setPen(QPen(Qt::black));
    painter.setFont(QFont("Arial", min_num_size, QFont::Bold));
    for (int k=0; k<30; k++)
    {
        painter.save();
        painter.rotate(12 * k);
        painter.drawText(-min_num_size/2, -panel_radius1-min_num_size, QString::number(k));
        painter.restore();
    }
    painter.end();
}

登录后复制

主要修改是去掉小时显示，改为两个时间环：外圈秒环和内圈分环，秒环的范围是0~60秒，分环的范围是0~30分。

秒表表盘的显示效果如下：

嵌入式Qt-做一个秒表

3 编译运行

代码是在Windows环境中的Qt Creator中编写的，首先在Windows中编译查看效果。

3.1 Windows中编译

在Windows中的运行效果如下图的右图，可以实现类似手机秒表的计时效果：

嵌入式Qt-做一个秒表

3.2 Ubuntu中编译

将Windows中的QT工程源码（

.cpp

登录后复制

文件、

.h

登录后复制

文件、

.pro

登录后复制

文件、

.ui

登录后复制

文件）复制到Ubuntu中，注意

.user

登录后复制

文件不需要（它是Windows平台的编译配置）。

然后使用ARM平台的编译工具链，我的路径是

/home/xxpcb/myTest/imx6ull/otherlib/qt/qt-everywhere-src-5.12.9/arm-qt/

登录后复制

，首先使用其

qmake

登录后复制

工具自动生成Makefile文件，然后通过

make

登录后复制

指令进行编译。

使用

qmake

登录后复制

生成Makefile，进入程序源码目录，执行

qmake

登录后复制

指令：

/home/xxpcb/myTest/imx6ull/otherlib/qt/qt-everywhere-src-5.12.9/arm-qt/bin/qmake

登录后复制

成功执行后，可以看到自动生成的Makefile文件，然后执行

make

登录后复制

指令进行编译，得到可执行文件。

3.3 Linux板子中运行

将可执行文件放到已配置了qt运行环境的Linux板子中，运行并查看效果：

https://www.php.cn/link/99644a15c905e2bea0236398dd480dd5?

注：

Ubuntu中的具体编译过程，可参考之前的文章《嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序》。

Ubuntu中Qt的交叉编译环境的配置，可参考之前的文章《嵌入式Linux-Qt环境搭建》。

4 总结

本文通过一个秒表的实例，介绍了如何使用Qt Creator的UI界面设计功能进行Qt开发，并将代码进行交叉编译，放入i.MX6ULL的Linux环境中测试运行情况。

以上就是嵌入式Qt-做一个秒表的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

win11任务管理器怎么打开_Windows11快速打开任务管理器方法 windows10如何打开和使用任务计划程序_windows10任务计划管理方法 windows10如何清除打印机队列_Windows打印任务卡住清理方法 windows11如何打开组策略编辑器(gpedit.msc)_Windows 11进入组策略设置方法 win11右键菜单的“在终端中打开”怎么去掉_Windows11右键菜单自定义教程