完整教程：QT肝8天10--新增用户布局

1、先看干货香不香

别看是一个简单地页面，对于高手来说很容易，但对于学习者来说，是一个珍贵的操作，本系列文章目的是也是培训学习记录，层层上进，麻雀虽小，五脏六全。

2、行动让梦想落地

1、添加新文件

选择QT设计页面，这种页面带有UI，头文件，及实现文件,这种类型即有前端设计界面，也有后台逻辑，而不是单纯的类，文件名称自己定义，这里叫addoperator

2、设计UI界面 

QPlainTextEdit 

QPlainTextEdit 是 Qt 框架中用于显示和编辑纯文本的组件，适合处理大量文本或多行内容。它比 QTextEdit 更轻量，适用于日志、代码编辑器等场景。

QFrame 概述

QFrame 是 Qt 框架中用于绘制边框和背景的控件基类，常用于为其他控件提供视觉分组或装饰效果。它支持多种边框样式、阴影效果，并可作为容器放置其他控件

• 若需复杂布局，建议优先使用 QWidget 而非 QFrame。
• 动态修改样式时，调用 update() 强制重绘。
• 避免过度嵌套 QFrame，可能导致性能下降。

QGridLayout 概念

QGridLayout 是 Qt 框架中用于管理窗口部件（Widgets）网格布局的类，属于 QtWidgets 模块。它将子部件排列在二维网格中，支持跨行/列合并、间距控制和动态调整。

核心功能

• 网格结构：通过行和列定位部件，索引从 0 开始。
• 跨度支持：使用 addWidget(widget, row, column, rowSpan, columnSpan) 实现部件跨越多行/列。
• 灵活间距：通过 setSpacing() 统一设置间距，或通过 setRowStretch() 控制行/列比例。

高级配置

• 对齐方式：通过 setAlignment(widget, alignmentFlag) 设置部件对齐（如 Qt.AlignCenter）。
• 动态伸缩：使用 setRowStretch(row, factor) 分配行/列的伸缩比例。
• 边距控制：通过 setContentsMargins(left, top, right, bottom) 调整布局边距。

3、定义方法

QT中的槽函数基本概念

槽函数（Slot）是QT框架中用于响应信号（Signal）的成员函数。信号与槽机制是QT的核心特性，实现了对象间的松耦合通信。槽函数可以是任何普通的成员函数，只需在声明时添加slots关键字。

槽函数的声明与定义

槽函数需要在类的头文件中声明，通常放在public slots或private slots区域。例如：

class MyClass : public QObject {
    Q_OBJECT
public:
    MyClass(QObject *parent = nullptr);
public slots:
    void mySlot(); // 公有槽函数
private slots:
    void privateSlot(); // 私有槽函数
};

信号与槽的连接

使用QObject::connect函数将信号与槽关联：

QObject::connect(sender, &SenderClass::signalName, receiver, &ReceiverClass::slotName);

例如，按钮点击触发槽函数：

QPushButton *button = new QPushButton("Click me");
MyClass *obj = new MyClass;
QObject::connect(button, &QPushButton::clicked, obj, &MyClass::mySlot);

槽函数的特性

1. 参数匹配：槽函数的参数类型和数量必须与信号一致，但允许槽函数忽略尾部参数。
2. 线程安全：支持跨线程通信，通过QueuedConnection自动处理线程切换。
3. Lambda表达式：可以直接用Lambda作为槽函数：

在UI设计中，可以通过命名规则自动连接槽函数。例如，按钮的clicked()信号会自动连接到名为on_buttonName_clicked()的槽函数：

注意事项

• 带Q_OBJECT宏的类才能使用信号槽机制。
• 槽函数可以像普通函数一样调用，但通常由信号触发。
• 避免在槽函数中执行耗时操作，否则可能阻塞事件循环。

4、实现方法

#include "addoperator.h"
#include "ui_addoperator.h"
AddOperator::AddOperator(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::AddOperator)
{
    ui->setupUi(this);
    //创建外围窗口
    if(m_basewin==nullptr){
        m_basewin=new BaseWin(parent);
    }
    m_basewin->setContentWidget(this);//将当前内容区域窗体嵌套到外围窗口
    m_basewin->setTitle("新增人员");
    m_basewin->show();//显示
    QPushButton *b=m_basewin->getButton();
    if(b){
        b->setText("确认添加");
        //给按钮绑定点击事件的槽函数
        QObject::connect(b,&QPushButton::clicked,this,&AddOperator::OnAdd);
    }
    // 初始化Placeholder========================================
    ui->usernameLineEdit->setPlaceholderText("请输入用户名");
    ui->passwordLineEdit->setPlaceholderText("请输入密码");
    ui->passwordLineEdit->setEchoMode(QLineEdit::Password);
    ui->confimPasswordLineEdit->setPlaceholderText("再次输入密码");
    ui->confimPasswordLineEdit->setEchoMode(QLineEdit::Password);
    ui->nameLineEdit->setPlaceholderText("请输入用户名");
    ui->phoneNoLineEdit->setPlaceholderText("请输入手机号码");
    ui->addrLineEdit->setPlaceholderText("请输入地址~~");
}
AddOperator::~AddOperator()
{
    delete ui;
}
//点击确认添加按钮后要触发的函数
void AddOperator::OnAdd()
{
}

本次是UI布局，实现逻辑要到下次实现

5、运行效果

原创不易，打字不易，截图不易，撸码不易，整理不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，灌水，请动动你的金手指，祝您早日实现财务自由。