QT作业GUI (五) 创建editForm界面

QT版本5.9.9

目录

QT作业GUI (一) 创建登录框
QT作业GUI (二) 创建注册窗口
QT作业GUI (三) 创建主窗口
QT作业GUI (四) 创建home界面
QT作业GUI (五) 创建editForm界面
QT作业GUI (六) 创建串口调试界面
QT作业GUI (七) 页面展示

1、创建一个新的设计师类
选择widget

2、UI布局

2.1分类器页

2.2操作记录




2.3密码设置
这里使用大量widget用来布局

添加槽函数监听其他操作

#ifndef EDITFORM_H
#define EDITFORM_H

#include <QWidget>
#include <QPushButton>
namespace Ui {
class EditForm;
}

class EditForm : public QWidget
{
    Q_OBJECT

public:
    explicit EditForm(QWidget *parent = nullptr);
    ~EditForm();

private:
    Ui::EditForm *ui;
    int row; // 记录行号
    QPushButton *classifierBtn; // 分类器按钮
    QPushButton *operationBtn; // 操作记录按钮
    QPushButton *pwdEditBtn; // 密码设置按钮
    QPushButton *serialBtn; // 串口调试
public slots:
    void Myoperation(QString opt); // 记录用户操作信息
};

#endif // EDITFORM_H

#include "editform.h"
#include "ui_editform.h"
#include <QComboBox>
#include <QDateTime>
#include<QDebug>
EditForm::EditForm(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::EditForm)
{
    ui->setupUi(this);
    // 初始化行列信息
    row = 0;
    // 密码设置标题居中
    ui->label_2->setAlignment(Qt::AlignHCenter);

    classifierBtn = new QPushButton("分类器", ui->myBtn);
    classifierBtn->resize(75, 50);
    classifierBtn->move(0, ui->myBtn->height() - classifierBtn->width()*4); // 调整位置
    classifierBtn->setCheckable(true); // 设置按钮为可选中状态

    operationBtn = new QPushButton("操作记录", ui->myBtn);
    operationBtn->resize(75, 50);
    operationBtn->move(0, ui->myBtn->height() - operationBtn->width()*3);// 调整位置
    operationBtn->setCheckable(true); // 设置按钮为可选中状态

    pwdEditBtn = new QPushButton("密码设置", ui->myBtn);
    pwdEditBtn->resize(75, 50);
    pwdEditBtn->move(0, ui->myBtn->height() - pwdEditBtn->width()*2);// 调整位置
    pwdEditBtn->setCheckable(true); // 设置按钮为可选中状态

    serialBtn = new QPushButton("串口调试", ui->myBtn);
    serialBtn->resize(75, 50);
    serialBtn->move(0, ui->myBtn->height() - serialBtn->width()*1);// 调整位置
    serialBtn->setCheckable(true); // 设置按钮为可选中状态

    QButtonGroup *buttonGroup = new QButtonGroup(ui->myBtn); // 设置按钮组
    buttonGroup->addButton(classifierBtn);
    buttonGroup->addButton(operationBtn);
    buttonGroup->addButton(pwdEditBtn);
    buttonGroup->addButton(serialBtn);

    // 设置按钮排他性
    buttonGroup->setExclusive(true);

     // 创建垂直布局管理器
    QVBoxLayout *layout = new QVBoxLayout;
    // 添加按钮到布局
    layout->addWidget(classifierBtn);
    layout->addWidget(operationBtn);
    layout->addWidget(pwdEditBtn);
    layout->addWidget(serialBtn);

    ui->myBtn->setLayout(layout);
    // 设置默认页
    ui->stackedWidget->setCurrentIndex(0);
    // 监听按钮点击切换
    connect(classifierBtn,&QPushButton::clicked,this,[&](){
        ui->stackedWidget->setCurrentIndex(0);
    });
    connect(operationBtn,&QPushButton::clicked,this,[&](){
        ui->stackedWidget->setCurrentIndex(1);
    });
    connect(pwdEditBtn,&QPushButton::clicked,this,[&](){
        ui->stackedWidget->setCurrentIndex(2);
    });
    connect(serialBtn,&QPushButton::clicked,this,[&](){
        ui->stackedWidget->setCurrentIndex(3);
    });
    // 设置表格细节
    ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers); //禁止编辑
    ui->tableWidget->horizontalHeader()->resizeSection(0, ui->tableWidget->width()/2); // 设置第一列宽度
    ui->tableWidget->horizontalHeader()->setStretchLastSection(true); // 行头自适应表格

    // QHeaderView::section表示对QHeaderView中的section部分进行样式设置
    // background-color: qlineargradient 这会创建一个颜色渐变的背景色
    // color: white 设置section中文字的颜色为白色
    // padding-left: 5px 设置文字距离section左侧边框的内边距为5像素。
    // border: 1px solid #6c6c6c;：设置边框为1像素宽的#6c6c6c颜色的实线。
    ui->tableWidget->horizontalHeader()->setStyleSheet("QHeaderView::section\
    {\
        background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,\
                                          stop: 0 #616161, stop: 0.5 #505050,\
                                          stop: 0.6 #434343, stop:1 #656565);\
        color: white;\
        padding-left: 5px;\
        border: 1px solid #6c6c6c;\
    }\
    /*QHeaderView::section:checked\
    {\
        background-color: red;\
    }*/");
}
EditForm::~EditForm()
{
    delete ui;
}
void EditForm::Myoperation(QString opt)
{
    QDateTime dateTime = QDateTime::currentDateTime(); // 获取当前时间

    ui->tableWidget->insertRow(row); // 插入一行

    QTableWidgetItem *item = new QTableWidgetItem(opt);
    item->setTextAlignment(Qt::AlignCenter); // 设置居中对齐
    ui->tableWidget->setItem(row, 0, item); // 设置第一列数据

    item = new QTableWidgetItem(dateTime.toString("yyyy-MM-dd hh:mm:ss"));
    item->setTextAlignment(Qt::AlignCenter); // 设置居中对齐
    ui->tableWidget->setItem(row, 1, item);

    row++; // 记录行号
}

最终效果

串口调试下一章单独制作

当前目录结构