嵌入式Qt-做一个秒表

雪夜

发布时间：2025-09-03 08:27:01

408人浏览过

来源于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

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

会译·对照式翻译

会译是一款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主要修改是去掉小时显示，改为两个时间环：外圈秒环和内圈分环，秒环的范围是0~60秒，分环的范围是0~30分。
秒表表盘的显示效果如下：

3 编译运行
代码是在Windows环境中的Qt Creator中编写的，首先在Windows中编译查看效果。
3.1 Windows中编译
在Windows中的运行效果如下图的右图，可以实现类似手机秒表的计时效果：

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环境中测试运行情况。