码上通QT实战28--系统设置03-用户管理布局

1、前言

在Qt中实现新增用户布局通常涉及使用布局管理器（如QVBoxLayout、QHBoxLayout、QGridLayout等）来组织控件。布局容器控件内的控件会自动跟随窗口大小变化而调整位置和尺寸，所有布局都继承自 QLayout，常用的是 4 种：

.QVBoxLayout 垂直布局：控件从上到下垂直排列，一行一个控件，最常用的布局之一。

QHBoxLayout 水平布局：控件从左到右水平排列，一列一个控件，和垂直布局是「黄金搭档」

QGridLayout 网格布局（最灵活）：【最常用】控件按照行 + 列的二维表格形式排列，支持「控件跨行 / 跨列」，适合做登录界面、表单界面这类规整的排版，Qt 中使用率最高的布局。

QFormLayout 表单布局：专门用于做「表单」的布局，自动分成两列：左列是「标签（QLabel）」，右列是「输入控件（QLineEdit/QComboBox 等）」，完美适配「标签 + 输入框」的场景，比 QGridLayout 更简洁。

对于复杂界面，可以嵌套使用不同布局管理器：

cpp 复制代码

QVBoxLayout *mainLayout = new QVBoxLayout;
QHBoxLayout *nameLayout = new QHBoxLayout;
nameLayout->addWidget(new QLabel("用户名:"));
nameLayout->addWidget(new QLineEdit);
mainLayout->addLayout(nameLayout);

QHBoxLayout *passwordLayout = new QHBoxLayout;
passwordLayout->addWidget(new QLabel("密码:"));
passwordLayout->addWidget(new QLineEdit);
mainLayout->addLayout(passwordLayout);

mainLayout->addWidget(new QPushButton("提交"));

新增用户属于表单类界面， QLabel(文本标签) + QLineEdit(单行输入框) + QRadioButton(单选按钮 - 性别) + QButtonGroup(单选分组) + QSpinBox(年龄数值选择) + QPushButton(提交 / 重置按钮)，全部是基础核心控件，无冷门控件

2、这样干

1、新建文件

在 Qt 中，Dialog（对话框）是一种常见的用户界面组件，用于与用户进行交互或显示特定信息。Qt 提供了多种对话框类型，包括模态对话框、非模态对话框以及预定义的通用对话框（如文件选择对话框、颜色选择对话框等）。

模态与非模态对话框

模态对话框会阻塞用户与应用程序其他部分的交互，直到对话框关闭。非模态对话框允许用户同时与对话框和应用程序的其他部分交互。

创建模态对话框

cpp 复制代码

QDialog dialog;
dialog.setModal(true);
dialog.exec(); // 阻塞直到对话框关闭

创建非模态对话框

cpp 复制代码

QDialog *dialog = new QDialog;
dialog->setModal(false);
dialog->show(); // 非阻塞

注意事项

非模态对话框需要注意内存管理，避免内存泄漏。
模态对话框会阻塞事件循环，避免在长时间操作中使用。
预定义对话框提供了丰富的选项，可以满足大多数常见需求

2、界面控件

QLabel ：【最常用】标签控件，核心用途：显示文本、图片、超链接，只读不可编辑

QLineEdit：【最常用】单行文本输入框，输入账号、密码、搜索内容等，支持密码掩码

QPushButton：【最常用】普通按钮，点击触发操作（确认、提交、跳转等）

QRadioButton ：单选按钮，同一组内只能选一个 ，需配合 QButtonGroup 分组，比如「男 / 女」选择

视觉层次是UI设计的核心，通过大小、颜色、对比度等元素引导用户视线。重要内容使用更大字体或更鲜艳色彩，次要信息适当弱化。一致性确保整个产品使用相同的布局模式、间距标准和交互逻辑，降低用户学习成本。

对齐与间距直接影响专业感，采用网格系统规范元素排列。常见8px基准网格确保间距成比例，避免随意数值。留白不是浪费空间，而是突出关键内容的必要手段。

3、QSS样式

cpp 复制代码

QPushButton{
	border:none;
	width:70px;
	height:28px;
	border-radius:5px;
	background:#409EFE;
	font-size:14px;
	color:white;
}
QPushButton::hover{
	border:none;
	width:70px;
	height:28px;
	border-radius:5px;
	background:#308EDE;
	color:white;
}



QWidget#wdg_content{
	background-color:#F7F9FA;
	border-radius: 6px;
}


QLabel#label{
	margin:8px 0px;
}
#label_2,#label_3,#label_4,#label_5,#label_6,#label_7,#label_8,#label_9,#label_10,#label_11,#label_12{
	color:#66000000;
	margin:0px 10px 0px 0px;
}

4、槽函数

cpp 复制代码

#include "settingsview.h"
#include "ui_settingsview.h"

#include <EditUserDialog.h>



SettingsView::SettingsView(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::SettingsView)
{
    ui->setupUi(this);
    //设置"描述"这一列内容的模式为自动平铺，即第11列
    ui->tw_users->horizontalHeader()->setSectionResizeMode(11,QHeaderView::Stretch);
    //数据初始化
    DB=QSqlDatabase::addDatabase("QSQLITE");
    DB.setDatabaseName(QApplication::applicationDirPath()+"/data.db3");
    if(!DB.open()){
        //ui->lbl_error->setText("数据库对象初始化失败");
    }

    this->refresh();
}

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

//刷新
void SettingsView::refresh()
{
    if(!DB.isOpen()&&!DB.open()){
        return;
    }

    QSqlQuery query_user("select * from users");

    int row=0;
    //遍历查询结果，将每一行数据赋给表格控件
    while(query_user.next()){
        ui->tw_users->setRowCount(row+1);//产生一个新行
        //编号id
        QString rid = query_user.value(0).toString();
        QTableWidgetItem *item = new QTableWidgetItem(rid);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 0, item);//给当前行设置对象
        //用户id
        QString uid = query_user.value(1).toString();
        QTableWidgetItem *item2 = new QTableWidgetItem(uid);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 1, item2);//给当前行设置对象
        //用户名称
        QString name = query_user.value(2).toString();
        item = new QTableWidgetItem(name);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 2, item);
        //用户名
        QString real = query_user.value(3).toString();
        item = new QTableWidgetItem(real);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 3, item);
        //密码
        QString pwd = query_user.value(4).toString();
        item = new QTableWidgetItem(pwd);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 4, item);
        //班组
        QString group = query_user.value(5).toString();
        item = new QTableWidgetItem(group);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 5, item);
        //职务
        QString post = query_user.value(6).toString();
        item = new QTableWidgetItem(post);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 6, item);
        //部门
        QString dept = query_user.value(7).toString();
        item = new QTableWidgetItem(dept);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 7, item);
        //用户性别
        QString gender = query_user.value(8).toString();
        gender=gender=="1"?"男":"女";
        item = new QTableWidgetItem(gender);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 8, item);
        //年龄
        QString age = query_user.value(9).toString();
        item = new QTableWidgetItem(age);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 9, item);
        //手机
        QString phone = query_user.value(10).toString();
        item = new QTableWidgetItem(phone);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 10, item);
        //描述
        QString desc = query_user.value(11).toString();
        item = new QTableWidgetItem(desc);
        item->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        ui->tw_users->setItem(row, 11, item);

        ++row;
    }
}

//刷新
void SettingsView::on_pb_refresh_clicked()
{
    this->refresh();
}

//新增
void SettingsView::on_pb_new_clicked()
{
    EditUserDialog *edu=new EditUserDialog();
    edu->exec();
}

//编辑
void SettingsView::on_pb_edit_clicked()
{
    EditUserDialog *edu=new EditUserDialog();
    edu->exec();
}

5、运行测试

Qt 中所有弹窗 / 子窗口（继承QDialog/QWidget）都分为这两种，本质区别是：弹出子窗口后，是否能操作

✔️ 1. 「模态窗口」 Modal Dialog

核心特征：弹窗子窗口弹出后，「父窗口 / 主窗口被完全锁定」，无法点击、无法操作、无法切换焦点，只能操作当前这个弹窗 。必须关闭这个模态窗口（点确定 / 取消 / 叉号），父窗口才能恢复可用状态。

模态窗口会阻塞父窗口的所有交互 ，这是 Qt 里最常用的弹窗方式。

✔️ 2. 「非模态窗口」 Modeless Dialog

核心特征：弹窗子窗口弹出后，「父窗口完全不受影响」，可以随意点击、操作、切换焦点，父窗口和子窗口能同时操作。子窗口就像一个独立的悬浮窗口，和父窗口平级。

非模态窗口不会阻塞任何窗口的交互，使用频率低于模态窗口。

6、小结

Qt 内置的弹窗全是**模态窗口，**QWidget 更适合做主窗口 / 容器，弹窗一律用 QDialog。

复制代码

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