本文继续探索嵌入式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默认工程结构如下：
双击
widget.ui
文件即可打开UI设置页面：
先简单熟悉一下各个功能区：
2 代码编写
2.1 UI界面设计
根据我的Linux板子屏幕的分辨率（800×480），调整界面的尺寸：
从左侧拖入一个Label，并修改字体大小：
接着从左侧拖入所需的其他组件（PushButton、TextBrowser）和位置调节组件（HorizontalSpacer、VerticalSpacer），并进行水平和垂直布局。例如，选中3个按钮和中间的2个弹簧，点击工具栏中的水平布局按钮：
3个按键的水平布局效果如下：
然后依次对其他组件进行布局：
调整字体居中显示：
通过拖拽调整最大组合组件的外尺寸，并修改不同级别的组合组件的
layoutStretch
参数，实现按比例显示各个组件：
点击左下角的三角图标运行，查看效果：
注意左边留出的空白是为秒表表盘预留的。
2.2 QTimer与QTime介绍
QTimer
类提供了一个高级编程接口，用于重复和单次计时。
QTime
类提供时钟时间功能，可以表示为自午夜以来的小时数、分钟数、秒数和毫秒数。
Qt Creator提供了方便的帮助文档，可以在Qt Creator中直接查看对应功能函数的使用。例如，搜索
QTimer
可以看到对应的介绍和API函数：
本文需要用到的
QTimer
功能包括：
start
：启动定时器
stop
：停止定时器
同样，搜索
QTime
可以看到其介绍和API函数：
本文需要用到的
QTime
功能包括：
setHMS
：设置初始时间
addMSecs
：增加一个时间（毫秒单位）
toString
：时间转为字符串格式
minute
：获取分钟
second
：获取秒
msec
：获取毫秒
2.3 对应按钮的函数
为了编写更易于理解的代码，在编写之前，需要将组件的默认名称改为便于理解的名称。例如，将3个按键的名称分别改为：
Btn_Start
：开始按钮，同时具有暂停/继续功能
Btn_Reset
：复位按钮
Btn_Hit
：打点按钮，用于记录不同名次的时间
手动添加
QTimer
和
QTime
对象，用于实现秒表的计时功能：
一帧秒创
基于秒创AIGC引擎的AI内容生成平台，图文转视频，无需剪辑，一键成片，零门槛创作视频。
41 查看详情 
2.3.1 开始按钮的处理
在Qt编程中，信号和槽机制是关键处理方式。对于使用Qt Creator的图形界面设计方式，通常通过界面实现信号和槽的连接。在开始按钮上右键，选择“转到槽…”：
由于开始按钮具有暂停/继续功能，这里选择
toggled
信号，利用按钮的按下和松开状态实现暂停/继续功能：
点击OK后，会自动跳转到代码页面，并生成对应的槽函数框架，然后可以在其中编写业务逻辑代码：
开始按钮的具体业务逻辑代码如下，当首次按下时，
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
函数，因为复位按钮只需要点击按下功能：
对应的槽函数实现如下：
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分。
秒表表盘的显示效果如下：
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环境中测试运行情况。
以上就是嵌入式Qt-做一个秒表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/383333.html
微信扫一扫 
支付宝扫一扫 
