码上通QT实战26--系统设置01-系统设置布局

1、前言

Qt是一个跨平台的C++图形用户界面应用程序框架，广泛用于开发GUI程序。Qt Designer是Qt提供的可视化设计工具，允许通过拖放组件快速构建界面。使用Qt Designer创建界面时，可以拖拽按钮、文本框等控件到主窗口上，通过属性编辑器调整控件属性。生成的界面文件保存为.ui格式，可通过uic工具转换为C++代码。

Qt 的控件体系中，所有可见控件都继承自 QWidget，QWidget 是所有界面控件的基类，提供了控件的基础显示、大小、位置、事件等核心能力。

开发原则

所有控件必须设置父子关系，避免内存泄漏；
所有控件必须用布局管理，避免界面适配问题；
控件交互一律用信号与槽，这是 Qt 的核心思想；
临时弹窗用 QDialog 模态显示，主界面用 QMainWindow。

常用Qt控件

一、基础通用控件（最常用，必掌握）

这类控件是 Qt 界面开发的基石，使用率最高，用于实现文本显示、输入、按钮操作、选择、状态展示 等基础功能，全部位于 <QtWidgets> 模块，可直接使用。

1. 按钮类控件

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

cpp 复制代码

QPushButton *btn = new QPushButton("点击提交", this); // 父控件为当前窗口
connect(btn, &QPushButton::clicked, this, &MainWindow::onBtnClicked); // 点击信号关联槽函数

QToolButton ：工具按钮，常用于工具栏，支持图标 + 文本，默认只显示图标，适合紧凑布局
QCheckBox ：复选框，支持多选（勾选 / 取消勾选），比如「记住密码」「同意协议」
QRadioButton ：单选按钮，同一组内只能选一个 ，需配合 QButtonGroup 分组，比如「男 / 女」选择

2. 文本类控件

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

cpp 复制代码

QLabel *labText = new QLabel("用户名：", this); // 显示普通文本
QLabel *labImg = new QLabel(this);
labImg->setPixmap(QPixmap("logo.png").scaled(50,50)); // 显示并缩放图片
labImg->setText("<a href='https://www.qt.io'>Qt官网</a>"); // 显示超链接
labImg->setOpenExternalLinks(true); // 点击超链接自动打开浏览器

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

cpp 复制代码

QLabel *labText = new QLabel("用户名：", this); // 显示普通文本
QLabel *labImg = new QLabel(this);
labImg->setPixmap(QPixmap("logo.png").scaled(50,50)); // 显示并缩放图片
labImg->setText("<a href='https://www.qt.io'>Qt官网</a>"); // 显示超链接
labImg->setOpenExternalLinks(true); // 点击超链接自动打开浏览器

QTextEdit ：多行富文本输入框，支持换行、字体格式、图片插入，适合大段文本编辑（比如记事本、评论框）
QPlainTextEdit：多行纯文本输入框，轻量级，只支持纯文本，性能优于 QTextEdit，适合代码、日志展示

3. 选择 / 数值类控件

QComboBox：【最常用】下拉选择框，单选下拉列表，支持添加选项、设置默认值

cpp 复制代码

QComboBox *combo = new QComboBox(this);
combo->addItem("C++");
combo->addItems(QStringList()<<"Qt"<<"Python"<<"Java"); // 批量添加
combo->setCurrentIndex(1); // 设置默认选中第2项（Qt）
QString selectText = combo->currentText(); // 获取选中的文本

QSpinBox：整数数值选择框，只能输入整数，支持上下箭头增减，比如「数量选择 1-100」
QDoubleSpinBox：浮点数值选择框，支持小数输入，比如「价格 0.01-999.99」
QSlider：滑动条控件，横向 / 纵向拖动调整数值，比如音量调节、亮度调节

二、布局容器控件（核心必用，界面排版神器）

这类控件本身不可见 ，核心作用是「管理其他控件的位置和大小」，解决 Qt 界面自适应拉伸、分辨率适配、控件排版混乱 的问题，所有 Qt 项目必须使用布局，绝对不要用 setGeometry() 固定控件位置！

布局内的控件会自动跟随窗口大小变化而调整位置和尺寸，所有布局都继承自 QLayout，常用的是以下 4 种：

QVBoxLayout 垂直布局

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

cpp 复制代码

QVBoxLayout *vLayout = new QVBoxLayout(this);
vLayout->addWidget(new QLabel("用户名"));
vLayout->addWidget(new QLineEdit());
vLayout->addWidget(new QLabel("密码"));
vLayout->addWidget(new QLineEdit());
vLayout->addWidget(new QPushButton("登录"));
// 布局会自动把这些控件垂直排好，窗口拉伸时控件自适应

QHBoxLayout 水平布局

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

cpp 复制代码

QHBoxLayout *hLayout = new QHBoxLayout(this);
hLayout->addWidget(new QPushButton("取消"));
hLayout->addStretch(); // 弹性拉伸，把右侧按钮顶到最右边
hLayout->addWidget(new QPushButton("确定"));

QGridLayout 网格布局（最灵活）

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

cpp 复制代码

QGridLayout *gLayout = new QGridLayout(this);
gLayout->addWidget(new QLabel("用户名："), 0, 0); // 第0行第0列
gLayout->addWidget(new QLineEdit(), 0, 1);      // 第0行第1列
gLayout->addWidget(new QLabel("密码："), 1, 0);   // 第1行第0列
gLayout->addWidget(new QLineEdit(), 1, 1);      // 第1行第1列
gLayout->addWidget(new QPushButton("登录"), 2, 0, 1, 2); // 第2行，跨2列显示

QFormLayout 表单布局

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

cpp 复制代码

QFormLayout *fLayout = new QFormLayout(this);
fLayout->addRow("用户名", new QLineEdit());
fLayout->addRow("密码", new QLineEdit());
fLayout->addRow("性别", new QComboBox());
fLayout->addRow("年龄", new QSpinBox());

布局核心技巧

布局可以嵌套使用（比如垂直布局里套水平布局、网格布局），几乎能实现所有复杂界面的排版需求，这是 Qt 布局的核心用法。

2、跟着干

1、整体布局

这个页面就是一个QTabWidget ，这是一个选项卡控件，选项卡默认提供了2个选项，可以切换，默认是第一个选项被激活的。里面套了一个QTableWidget，用来展示二维表格数据的。

QTabWidget 是 Qt 框架中用于实现多页标签界面的控件，允许用户通过标签页切换不同的内容区域。常用于组织复杂界面，将功能模块分开展示。

QTableWidget 是 PyQt/PySide 中用于显示和编辑表格数据的控件，继承自 QTableView。它提供了类似 Excel 的表格功能，支持动态增删行列、单元格编辑、数据排序等操作。

QTableWidget 与 QTabWidget 的区别

QTableWidget 是用于显示和编辑表格数据的控件，适用于展示二维数据（如Excel表格）。它继承自 QTableView，内置了对单元格数据的直接操作功能（如编辑、排序）。典型用途包括数据展示、表单输入等。

QTabWidget 是用于管理多个子窗口或页面的容器控件，通过标签页（Tab）的形式组织内容。用户可以通过点击标签切换不同的页面，每个页面可以嵌入其他控件（如 QWidget）。典型用途包括多视图切换、配置界面分组等。

典型场景

QTableWidget：数据库查询结果展示、CSV文件编辑、表单输入。
QTabWidget：软件设置界面分栏、多文档编辑器（如浏览器标签页）。

数据结构

QTableWidget：内部模型为二维表格，支持动态增删行列、单元格内容编辑。
QTabWidget：通过 addTab() 方法添加页面，每个页面是独立的 QWidget 实例。

功能定位

QTableWidget：专注于表格数据的展示与交互，提供行列操作、单元格编辑等功能。
QTabWidget：作为容器管理多个独立页面，不直接处理数据，而是通过标签页组织布局。

选择建议

需要处理表格数据时选择 QTableWidget。
需要分页显示不同内容或功能模块时选择 QTabWidget。
两者可结合使用，例如在 QTabWidget 的某个页面中嵌入 QTableWidget

2、监控布局

3、定义QSS

QSS (Qt Style Sheets) 是 Qt 提供的一种类似 CSS (Cascading Style Sheets) 的机制，用于美化和定制 Qt 控件的外观。如果你熟悉网页开发的 CSS，那么 QSS 几乎是零门槛上手；如果你不熟悉，也没关系，QSS 的核心语法非常简单，主要用于设置颜色、字体、边框、背景、圆角 等。QSS 的语法结构与 CSS 完全一致，由选择器 (Selector) 和声明块 (Declaration Block) 组成。

css 复制代码

/* 这是注释 */
选择器 {
    属性: 值;
    属性: 值;
}

css 复制代码

/*设置QTabWidget样式*/
QTabWidget{
	background:transparent;
}
QTabWidget::pane{
	border:none;
}
QTabWidget::tab-bar{
	alignment:right;
}

/*设置QTabBar样式*/
QTabBar::tab{
	font:15px;
	width:100px;					/*设置宽度*/
	height:26; 					/*设置高度*/
	margin-top:5px; 			/*设置边距*/
	margin-right:0px;
	margin-left:0px;
	margin-bottom:0px;
}
/*设置圆角*/
QTabBar::tab:first{
	border-top-left-radius:13px;
	border-bottom-left-radius:13px;
}

QTabBar::tab:last{
	border-top-right-radius:13px;
	border-bottom-right-radius:13px;
}

/*设置选中的颜色*/
QTabBar::tab:first:selected,
QTabBar::tab:last:selected{
	color:#FFFFFF;
	background:#409EFE;
}
/*设置未选的颜色*/
QTabBar::tab:first:!selected,
QTabBar::tab:last:!selected{
	color:#333333;
	background:#11000000;
}



/*底部按钮样式*/
QPushButton{
	border:none;
   font-size:13px;
	border-radius:3px;
	background:#409EFE;
	width:80px;
	height:26px;
	color:white;
}
QPushButton:hover{
	background:#307AEA;
}

/*中间表格样式*/
QTableWidget{
	border:none;
	border-radius:5px;
	background-color:transparent;
}
QTableWidget::item:selected{
	background-color:"#22409EFE";
	color:#555555;
}
/*表头*/
QHeaderView::section{
	text-align:center;
	background:#FFFFFF;
	padding:3px;
	margin:0px;
	color:#555555;
	border:none;
	border-left-width:0;
	height:20px;
}



QLabel#lbl_error{
	color:red;
}

#label,#label_4,#label_7,#label_10,#label_13,#label_16{
	margin:0px 25px 0px 0px;
	
}
#label_2,#label_3,
#label_5,#label_6,
#label_8,#label_9,
#label_11,#label_12,
#label_14,#label_15,
#label_17,#label_18{
	color:#66000000;
}


QCheckBox{
	margin:0px 25px 0px 0px;
}

4、预警条件布局

这个选项目前不需要设计，到时候再来，目前用不上

5、运行效果

6、小结

基础通用控件（最常用，必掌握），布局容器控件（核心必用，界面排版神器），高级功能控件（开发常用，提升开发效率），窗口类核心控件（程序入口，所有界面的载体）

复制代码

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