1. 运行效果
   
   
2. widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QSerialPortInfo>
#include <QSerialPort>
#include <QDebug>
#include <QTextCodec>
#include <QMessageBox>
#include <QImage>
#include <QPixmap>
#include <QTimer>
#include <QDateTime>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_OpenCom_clicked();  //打开串口按钮
    void timeUpdate();

private:
    Ui::Widget *ui;
    QSerialPort *serial;
    QTimer *timer;

};
#endif // WIDGET_H

1. widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //界面的构造函数，我们一般完成的是界面部分的初始化代码

    //遍历查询可使用的串口
    foreach (const QSerialPortInfo &info, QSerialPortInfo::availablePorts()) {
        QSerialPort serial;
        serial.setPort(info);
        if(serial.open(QIODevice::ReadWrite)){
            ui->ComBox->addItem(serial.portName());
            serial.close();
        }
    }

    //设置波特率下拉菜单默认显示第一项
    ui->BaudBox->setCurrentIndex(0);

    QString imgname("D:\\QtCode\\SerialDemo\\close.PNG");
    QImage *img = new QImage;
    if(!img->load(imgname))//加载图像
    {
        QMessageBox::information(this,tr("打开图像失败"),tr("打开图像失败"));
        delete img;
        return;
    }
    ui->lbl_img->setPixmap(QPixmap::fromImage(*img));

    //定时器
    timer = new QTimer(this);
    //关联定时器与槽函数
    connect(timer, SIGNAL(timeout()),this, SLOT(timeUpdate()));
    //timeout()时间溢出信号函数

    //开启定时器
    timer->start(1000);


}


Widget::~Widget()
{
    delete ui;
}

//打开串口按钮
void Widget::on_OpenCom_clicked()
{

    //判断是否是打开信息
    if(ui->OpenCom->text()=="打开串口"){

        serial = new QSerialPort;
        //设置串口名
        serial->setPortName(ui->ComBox->currentText());
        //打开串口
        serial->open(QIODevice::ReadWrite);

        //设置波特率
        serial->setBaudRate(ui->BaudBox->currentText().toInt());
        //设置数据位
        switch (ui->DataBitBox->currentIndex()) {

            case 8:
                serial->setDataBits(QSerialPort::Data8);
                break;
            default:
                break;
        }
        //设置校验位
        serial->setParity(QSerialPort::NoParity);
        //设置停止位
        serial->setStopBits(QSerialPort::OneStop);
        //设置控制流
        serial->setFlowControl(QSerialPort::NoFlowControl);

        //提示信息的变更
        ui->OpenCom->setText("关闭串口");

        //设置打开后选项的不可用
        ui->ComBox->setEnabled(false);
        ui->BaudBox->setEnabled(false);
        ui->DataBitBox->setEnabled(false);
        ui->ParityBox->setEnabled(false);
        ui->StopBox->setEnabled(false);


        QString imgname("D:\\QtCode\\SerialDemo\\open.PNG");
        QImage *img = new QImage;
        if(!img->load(imgname))//加载图像
        {
            QMessageBox::information(this,tr("打开图像失败"),tr("打开图像失败"));
            delete img;
            return;
        }
        ui->lbl_img->setPixmap(QPixmap::fromImage(*img));


        //建立信号与槽函数的关联
        connect(serial, SIGNAL(readyRead()), this, SLOT(readData()));

    }
    else{
        //关闭串口
        serial->clear();//清除serial对象中的串口信息
        serial->close();//关闭串口设备
        serial->deleteLater();

        //ui->OpenCom->setText(QString::fromLocal8Bit("打开串口"));
        ui->OpenCom->setText(" 打开串口");

        //设置关闭后选项的可用
        ui->ComBox->setEnabled(true);
        ui->BaudBox->setEnabled(true);
        ui->DataBitBox->setEnabled(true);
        ui->ParityBox->setEnabled(true);
        ui->StopBox->setEnabled(true);


        QString imgname("D:\\QtCode\\SerialDemo\\close.PNG");
        QImage *img = new QImage;
        if(!img->load(imgname))//加载图像
        {
            QMessageBox::information(this,tr("打开图像失败"),tr("打开图像失败"));
            delete img;
            return;
        }
        ui->lbl_img->setPixmap(QPixmap::fromImage(*img));

    }

}

void Widget::timeUpdate()//时间的更新函数
{
    //currentDateTime() 可以获取当前系统时间
    QDateTime time = QDateTime::currentDateTime();
    //将时间对面按照一定的格式转换为字符串对象
    QString str = time.toString("yyyy/MM/dd hh:mm:ss dddd");
    ui->time_edit->setText(str);
}