串口助手(布局,图标,串口号,隐藏界面,显示实时时间)

前言

从这篇文章开始 教大家自己制作一个串口助手软件，并实现基本的功能。学做一个 串口助手可以一边回顾复习 QT 的相关知识，也可以进一步了解串口助手功能方法，一举两得。

一、串口助手布局

最简单快速的布局就是使用 UI控件 进行布局。

• 将各个部件拖拉到 1 处，进行布局。
• 在 2 可以进行各个部件的名称修改。
• 在 3 处配置各个部件相关功能及其初始化。
  
  可以参考一些串口助手模板，在 3 处进行布置 某些界面的使能 ，失能，初始数据，大小等等。
  最后布局的效果如下图：
  

二、设置软件的标题，图标

就是设置 软件左上角的图标，标题。

首先要加入资源文件，就是将 图片加入工程中。

1. 添加资源文件：

2. 在Qt中，我们可以使用 QMainWindow 类或 QWidget 类中的 setWindowIcon( ) 函数来设置主窗口或窗口部件的图标。

该函数可以传入一个QIcon对象或一个文件路径字符串。

 void setWindowIcon(const QIcon &icon);

 //设置左上角图标
 w.setWindowIcon(QIcon(":/icon/fish.jpg"));  
 //设置窗口图标
 w.setWindowTitle("小鱼儿串口助手-1.0"); 

三、显示可用串口号

在Qt中，我们可以使用 QSerialPortInfo 类来获取当前系统上可用的串口列表。

availablePorts( ) 是 QSerialPortInfo 的 静态函数获取系统上所有可用的串口信息。

QList<QSerialPortInfo> ports = QSerialPortInfo::availablePorts();

// 获取可用串口列表
   QList<QSerialPortInfo> portList = QSerialPortInfo::availablePorts();
// 遍历串口列表
   for(int i=0;i<portList.count();i++)
   {
       ui->uart->addItem(portList[i].portName()); // 将名字加入组合框中 
   }

portName( )：获取可用串口的名字。

addItem(const QStringList &text) : 使用给定文本将项目添加到组合框中.

现象就是下图了：

四、隐藏，显示面板

串口助手上有一个 隐藏面板，点击即可隐藏多文本面板。再次点击，多文本面板再次出现。

点击 " 隐藏面板 "，需要连接信号与槽。触发QPushButton的clicked( )信号。

在Qt中，如果需要 隐藏 某个控件或窗口，可以使用 QWidget 类中的 hide( ) 或 setVisible( ) 函数。

需要 显示 某个控件或窗口，可以使用QWidget类中的 show( ) 或 setVisible()函数

setVisible( ) 隐藏面板只需要将需要隐藏的面板的 visible 属性设置为 false 即可。

setVisible( true ) 函数可显示该面板。

void Widget::on_hidePanels_clicked()
{
    flagHide = ~flagHide;               // 按键按下标志位
    if(!flagHide)
    {
        ui->hidePanels->setText("隐藏面板");       // setText 修改按钮上的文本
        ui->groupBox_2->setVisible(true);       // 显示面板
    }
    else
    {
        ui->hidePanels->setText("扩展面板");
        ui->groupBox_2->setVisible(false);           // 隐藏面板
    }
}

五、显示实时时间

在串口助手的右下角有一个时间显示，这是一个实时的时间。那么怎么实现 这个功能呢？

1. 获取当前时间
   在QT中，可以使用系统时间类 QDateTime 来获取当前时间。

currentDateTime( ) 是 QDateTime 类的一个静态方法，用于获取当前系统时间。

QDateTime curDateTime = QDateTime::currentDateTime(); 

void Widget::getTime()
{
   QDateTime currentTime = QDateTime::currentDateTime();        // 获取当前时间
    // 将 QDateTime 对象转换为指定格式的字符串  
    QString strDateTime = currentTime.toString("yyyy-MM-dd hh:mm:ss");
    ui->label_15->setText(strDateTime);                         // 设置label文本
}

toString( ) 函数参数中的 “yyyy-MM-dd hh:mm:ss” 表示日期和时间的格式。

其中：

yyyy 表示年份，MM 表示月份（两位数），dd 表示日期（两位数）；

hh 表示小时（24小时制，两位数），mm 表示分钟（两位数），ss 表示秒（两位数）。

因此，这行代码的实际作用是将当前时间转换为形如 “2023-06-08 21:54:36” 的字符串，并将其存储到 strDateTime 变量中。

可以参考 help 手册：

2. 更新显示的时间
   可以通过 一个 定时器 类 QTimer 来实现。

// 创建一个定时器对象  
QTimer timer;
// 设置定时器间隔时间
timer.setInterval(100);
// 启动定时器
timer.start();
// 连接定时器 timeout() 信号到槽函数,每经过 100ms 进入一次槽函数 
connect(&timer,SIGNAL(timeout()),this,SLOT(getTime()));

总结

下一篇文章介绍 串口如何发送，接收数据等。