如何做网站不容易被攻击,衡水网站建设格公司,建立网站大概需要多长时间,win7 iis 默认网站属性目录
前言
一、多元素与容器类控件的核心价值
二、多元素控件#xff1a;批量数据的高效展示与交互
2.1 ListWidget#xff1a;简洁高效的列表控件
2.1.1 核心属性与 API
2.1.2 基础用法#xff1a;简单列表的增删改查
2.1.3 进阶用法#xff1a;带图标的列表与多选…目录前言一、多元素与容器类控件的核心价值二、多元素控件批量数据的高效展示与交互2.1 ListWidget简洁高效的列表控件2.1.1 核心属性与 API2.1.2 基础用法简单列表的增删改查2.1.3 进阶用法带图标的列表与多选功能2.1.4 ListWidget 避坑指南2.2 TableWidget功能强大的表格控件2.2.1 核心属性与 API2.2.2 基础用法增删改查2.2.3 TableWidget 避坑指南2.3 TreeWidget层级分明的树形控件2.3.1 核心属性与 API2.3.1 基础树形结构2.3.2 TreeWidget 避坑指南三、容器类控件界面的有序组织与分组3.1 GroupBox控件分组的 “收纳盒”3.1.1 核心属性与 API3.1.2 基础用法表单分组3.1.3 进阶用法扁平模式与对齐方式3.1.4 GroupBox 避坑指南3.2 TabWidget多页面切换的 “导航栏”3.2.1 核心属性与 API3.2.2 基础用法功能模块切换3.2.3 进阶用法标签页的增加与删除3.2.4 TabWidget 避坑指南总结前言在 Qt GUI 开发中当需要展示批量数据或对控件进行分组管理时单纯的基础控件已无法满足需求。多元素控件ListWidget/TableWidget/TreeWidget专为批量数据展示而生支持列表、表格、树形等多样化数据呈现容器类控件GroupBox/TabWidget则擅长控件分组与界面分区让复杂界面更具逻辑性和可读性。本文基于 Qt 5.14 版本以 “属性解析 实战案例 进阶技巧” 的结构全面拆解这两类控件的核心用法带你轻松搞定复杂界面开发下面就让我们正式开始吧一、多元素与容器类控件的核心价值在实际项目中我们常面临这些场景展示一组文件列表、呈现多行多列的表格数据、构建层级化的分类目录、将相关控件归类展示、用标签页切换不同功能模块 —— 这正是多元素与容器类控件的用武之地。多元素控件聚焦 “数据展示与交互”支持批量数据的添加、删除、选中、排序等操作是处理集合数据的核心工具容器类控件聚焦 “界面组织与分组”通过分组、分页等方式优化界面布局提升用户体验和界面整洁度。本文将详细讲解 5 个核心控件多元素控件ListWidget列表、TableWidget表格、TreeWidget树形容器类控件GroupBox分组框、TabWidget标签页二、多元素控件批量数据的高效展示与交互多元素控件的核心优势是“批量管理数据”Qt 提供了基于 Item 的简化版控件ListWidget/TableWidget/TreeWidget无需手动创建 Model直接操作 Item 即可实现数据展示开发效率极高。2.1 ListWidget简洁高效的列表控件QListWidget 是垂直列表控件适用于展示单列批量数据如文件列表、选项列表等支持单选、多选、添加、删除等基础操作用法简洁直观。2.1.1 核心属性与 API属性 / 方法功能说明实用场景currentRow()获取当前选中行的下标未选中返回 - 1选中数据后获取位置currentItem()获取当前选中的 Item 对象获取选中数据的详细信息addItem(const QString text)添加单个列表项动态添加数据addItems(const QStringList items)批量添加列表项初始化批量数据insertItem(int row, const QString text)在指定行插入列表项插入中间数据takeItem(int row)删除指定行并返回该 Item需手动释放删除数据并回收资源setSortingEnabled(bool enable)启用 / 禁用排序数据排序展示itemClicked(QListWidgetItem* item)点击列表项时触发的信号点击事件响应核心数据载体QListWidgetItem每个 Item 可设置文本、图标、字体、选中状态等是列表数据的最小单元。2.1.2 基础用法简单列表的增删改查#include widget.h #include QListWidget #include QLineEdit #include QPushButton #include QVBoxLayout #include QHBoxLayout Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); this-setWindowTitle(ListWidget基础用法编程语言列表); // 布局管理输入框按钮水平布局列表垂直布局 QVBoxLayout *mainLayout new QVBoxLayout(this); QHBoxLayout *inputLayout new QHBoxLayout(); // 输入框用于添加新列表项 QLineEdit *inputEdit new QLineEdit(this); inputEdit-setPlaceholderText(请输入编程语言名称); // 按钮添加、删除 QPushButton *addBtn new QPushButton(添加, this); QPushButton *delBtn new QPushButton(删除选中, this); // 列表控件 QListWidget *langList new QListWidget(this); // 初始化列表数据 QStringList initLangs {C, Java, Python, Qt, JavaScript, Golang}; langList-addItems(initLangs); // 启用排序 langList-setSortingEnabled(true); // 设置选中模式单选默认 langList-setSelectionMode(QAbstractItemView::SingleSelection); // 组装布局 inputLayout-addWidget(inputEdit); inputLayout-addWidget(addBtn); inputLayout-addWidget(delBtn); mainLayout-addLayout(inputLayout); mainLayout-addWidget(langList); // 添加按钮点击事件 connect(addBtn, QPushButton::clicked, this, []() { QString text inputEdit-text().trimmed(); if (!text.isEmpty()) { // 添加新项并自动排序 new QListWidgetItem(text, langList); inputEdit-clear(); } }); // 删除按钮点击事件 connect(delBtn, QPushButton::clicked, this, []() { // 获取当前选中行 int currentRow langList-currentRow(); if (currentRow ! -1) { // 删除选中项takeItem返回Item需手动删除避免内存泄漏 QListWidgetItem *item langList-takeItem(currentRow); delete item; } }); // 列表项点击事件 connect(langList, QListWidget::itemClicked, this, [](QListWidgetItem *item) { qDebug() 选中语言 item-text(); }); }2.1.3 进阶用法带图标的列表与多选功能ListWidget 支持为 Item 添加图标且支持多选模式适用于文件列表、应用列表等场景先在.ui文件中创建控件编写代码#include widget.h #include ui_widget.h #include QDebug Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //往这里添加一些元素 ui-listWidget-addItem(C); ui-listWidget-addItem(Java); ui-listWidget-addItem(Python); //在QListWidgetItem中可以设置字体属性设置图标设置文字大小设置是否被选中等状态 // ui-listWidget-addItem(new QListWidgetItem(C)); // ui-listWidget-addItem(new QListWidgetItem(Java)); // ui-listWidget-addItem(new QListWidgetItem(Python)); //也可以在.ui文件中通过图形化界面编辑 } Widget::~Widget() { delete ui; } void Widget::on_pushButton_insert_clicked() { //1.先获取到输入框中的内容 const QString text ui-lineEdit-text(); //2.添加到QListWidget中 ui-listWidget-addItem(text); //添加到末尾如果想添加到中间位置需要使用insertItem } void Widget::on_pushButton_delete_clicked() { //1.先获取到被选中的元素 int row ui-listWidget-currentRow(); if(row 0) { return; } //2.按照行号来删除元素 ui-listWidget-takeItem(row); } void Widget::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous) { //通过这个槽函数来感知到变化 if(current ! nullptr) { qDebug() 当前选中的元素 current-text(); } if(previous ! nullptr) { qDebug() 上次选中的元素 previous-text(); } }运行结果如下2.1.4 ListWidget 避坑指南内存泄漏takeItem方法会从列表中移除 Item 但不删除需手动delete回收资源排序不生效需先调用setSortingEnabled(true)新增 Item 才会自动排序多选获取通过selectedItems()获取所有选中项返回QListQListWidgetItem*Item 编辑需设置item-setFlags(item-flags() | Qt::ItemIsEditable)默认不可编辑。2.2 TableWidget功能强大的表格控件QTableWidget 是多行多列的表格控件适用于展示结构化数据如学生信息表、商品列表、数据统计等支持单元格编辑、表头自定义、行高列宽调整等功能是 Qt 中最常用的多元素控件之一。2.2.1 核心属性与 API属性 / 方法功能说明实用场景setColumnCount(int count)设置列数初始化表格结构setRowCount(int count)设置行数初始化表格结构setHorizontalHeaderItem(int col, QTableWidgetItem* item)设置列标题自定义表头文本 / 样式setItem(int row, int col, QTableWidgetItem* item)设置单元格内容填充表格数据currentRow()/currentColumn()获取当前选中单元格的行 / 列下标定位选中位置insertRow(int row)/insertColumn(int col)插入行 / 列动态添加数据removeRow(int row)/removeColumn(int col)删除行 / 列动态删除数据setEditTriggers(QAbstractItemView::EditTriggers triggers)设置编辑触发方式控制单元格是否可编辑horizontalHeader()-setSectionResizeMode(QHeaderView::ResizeMode mode)设置列宽调整模式自适应列宽 / 固定列宽核心数据载体QTableWidgetItem每个单元格对应一个 Item支持设置文本、图标、对齐方式、字体等。2.2.2 基础用法增删改查在.ui文件中创建控件编写代码#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //创建三行 ui-tableWidget-insertRow(0); ui-tableWidget-insertRow(1); ui-tableWidget-insertRow(2); //创建三列 ui-tableWidget-insertColumn(0); ui-tableWidget-insertColumn(1); ui-tableWidget-insertColumn(2); //给三列设置列名设置水平方向的表头 ui-tableWidget-setHorizontalHeaderItem(0, new QTableWidgetItem(学号)); ui-tableWidget-setHorizontalHeaderItem(1, new QTableWidgetItem(姓名)); ui-tableWidget-setHorizontalHeaderItem(2, new QTableWidgetItem(年龄)); //给表格中添加数据 ui-tableWidget-setItem(0, 0, new QTableWidgetItem(1001)); ui-tableWidget-setItem(0, 1, new QTableWidgetItem(张三)); ui-tableWidget-setItem(0, 2, new QTableWidgetItem(20)); ui-tableWidget-setItem(1, 0, new QTableWidgetItem(1002)); ui-tableWidget-setItem(1, 1, new QTableWidgetItem(李四)); ui-tableWidget-setItem(1, 2, new QTableWidgetItem(19)); ui-tableWidget-setItem(2, 0, new QTableWidgetItem(1003)); ui-tableWidget-setItem(2, 1, new QTableWidgetItem(王五)); ui-tableWidget-setItem(2, 2, new QTableWidgetItem(18)); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_insertRow_clicked() { //需要知道当前一共有多少行 int rowCount ui-tableWidget-rowCount(); //在最后一行之后新增新行 //注意此处的参数是“下标”表示你新增之后的一行是第几行 ui-tableWidget-insertRow(rowCount); } void Widget::on_pushButton_deleteRow_clicked() { //获取到选中的行号 int curRow ui-tableWidget-currentRow(); //删除这一行 ui-tableWidget-removeRow(curRow); } void Widget::on_pushButton_insertColumn_clicked() { //需要知道当前一共有多少列 int colCount ui-tableWidget-columnCount(); //在对应位置新增新列 ui-tableWidget-insertColumn(colCount); //设置列名从输入框中获取到 const QString text ui-lineEdit-text(); ui-tableWidget-setHorizontalHeaderItem(colCount, new QTableWidgetItem(text)); } void Widget::on_pushButton_4_clicked() { //获取到选中的列号 int curCol ui-tableWidget-currentColumn(); //删除这一列 ui-tableWidget-removeColumn(curCol); }运行结果2.2.3 TableWidget 避坑指南表头设置setHorizontalHeaderLabels需在setColumnCount之后调用否则表头不生效单元格居中默认单元格文本左对齐需手动设置item-setTextAlignment(Qt::AlignCenter)行高列宽QHeaderView::Stretch表示自适应拉伸QHeaderView::Fixed表示固定尺寸编辑控制setEditTriggers(QAbstractItemView::NoEditTriggers)可禁用单元格编辑避免误操作数据获取通过item(row, col)获取单元格数据需判断 Item 是否为nullptr避免空指针崩溃。2.3 TreeWidget层级分明的树形控件QTreeWidget 是树形结构控件适用于展示层级化数据如文件目录、分类菜单、组织架构等支持父节点、子节点的嵌套展示支持展开 / 折叠操作。2.3.1 核心属性与 API属性 / 方法功能说明实用场景setHeaderLabel(const QString text)设置表头文本单列单列树形结构setColumnCount(int count)设置列数多列树形多列树形结构如文件名称 大小addTopLevelItem(QTreeWidgetItem* item)添加顶层节点初始化根节点QTreeWidgetItem* topLevelItem(int index)获取指定顶层节点操作顶层节点topLevelItemCount()获取顶层节点个数遍历顶层节点item-addChild(QTreeWidgetItem* child)为节点添加子节点构建层级结构item-setExpanded(bool expanded)设置节点是否展开默认展开 / 折叠节点currentItem()获取当前选中的节点操作选中节点itemExpanded(QTreeWidgetItem* item)节点展开时触发的信号展开节点时加载子数据核心数据载体QTreeWidgetItem每个节点对应一个 Item支持多列数据可通过setText(col, text)设置每列内容。2.3.1 基础树形结构先创建控件编写代码#include widget.h #include ui_widget.h Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //设置根节点的名字 ui-treeWidget-setHeaderLabel(动物); //新增顶层结点 QTreeWidgetItem* item1 new QTreeWidgetItem(); //每个结点都可以设置多个列此处为了简单就只设置一列 item1-setText(0, 猫); //添加到顶层结点中 ui-treeWidget-addTopLevelItem(item1); //新增顶层结点 QTreeWidgetItem* item2 new QTreeWidgetItem(); //每个结点都可以设置多个列此处为了简单就只设置一列 item2-setText(0, 狗); //添加到顶层结点中 ui-treeWidget-addTopLevelItem(item2); //新增顶层结点 QTreeWidgetItem* item3 new QTreeWidgetItem(); //每个结点都可以设置多个列此处为了简单就只设置一列 item3-setText(0, 鸟); //添加到顶层结点中 ui-treeWidget-addTopLevelItem(item3); //新增一些子结点 QTreeWidgetItem* item4 new QTreeWidgetItem(); item4-setText(0, 中华田园猫); item1-addChild(item4); QTreeWidgetItem* item5 new QTreeWidgetItem(); item5-setText(0, 布偶猫); item1-addChild(item5); QTreeWidgetItem* item6 new QTreeWidgetItem(); item6-setText(0, 暹罗猫); item1-addChild(item6); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_insertTopLevelItem_clicked() { //获取到输入框中的内容 const QString text ui-lineEdit-text(); //构造一个QTreeWidgetItem QTreeWidgetItem* item new QTreeWidgetItem(); item-setText(0, text); //添加到顶层结点中 ui-treeWidget-addTopLevelItem(item); } void Widget::on_pushButton_insertItem_clicked() { //获取到当前选中的结点 QTreeWidgetItem* currentItem ui-treeWidget-currentItem(); if(currentItem nullptr) { return; } //获取到输入框中的内容 const QString text ui-lineEdit-text(); //构造一个QTreeWidgetItem QTreeWidgetItem* item new QTreeWidgetItem(); item-setText(0, text); //插入到选中结点的子结点中 currentItem-addChild(item); } void Widget::on_pushButton_deleteItem_clicked() { //获取到当前选中的结点 QTreeWidgetItem* currentItem ui-treeWidget-currentItem(); if(currentItem nullptr) { return; } //删除选中的元素需要先获取到父元素通过父元素进行删除 QTreeWidgetItem* parent currentItem-parent(); if(parent nullptr) { //顶层元素 int index ui-treeWidget-indexOfTopLevelItem(currentItem); ui-treeWidget-takeTopLevelItem(index); } else { //普通元素 parent-removeChild(currentItem); } }运行结果2.3.2 TreeWidget 避坑指南节点层级顶层节点通过addTopLevelItem添加子节点通过parentItem-addChild添加路径获取通过递归遍历parent()可获取节点的完整路径节点删除子节点需通过父节点removeChild删除顶层节点需通过树形控件takeTopLevelItem删除多列设置setColumnCount需在设置表头前调用setText(col, text)设置对应列内容图标设置setIcon(col, icon)设置对应列的图标默认列索引为 0。三、容器类控件界面的有序组织与分组容器类控件本身不直接展示数据而是作为 “容器” 管理其他控件通过分组、分页等方式优化界面结构让复杂界面更易理解和操作。3.1 GroupBox控件分组的 “收纳盒”QGroupBox 是带标题的分组框适用于将相关控件归类展示如表单中的同一模块、选项组等支持边框显示、标题自定义还可设置为可勾选模式勾选后才启用组内控件。3.1.1 核心属性与 API属性 / 方法功能说明实用场景setTitle(const QString title)设置分组框标题标识分组用途setFlat(bool flat)设置是否为扁平模式无边框简洁界面风格setCheckable(bool checkable)设置是否可勾选控制组内控件启用 / 禁用setChecked(bool checked)设置勾选状态默认启用 / 禁用组内控件setAlignment(Qt::Alignment alignment)设置组内控件对齐方式优化组内布局3.1.2 基础用法表单分组先创建控件运行结果如下3.1.3 进阶用法扁平模式与对齐方式#include widget.h #include QGroupBox #include QPushButton #include QHBoxLayout #include QVBoxLayout Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); this-setWindowTitle(GroupBox进阶扁平模式与对齐); QVBoxLayout *mainLayout new QVBoxLayout(this); // 扁平模式分组框无边框 QGroupBox *flatGroup new QGroupBox(操作按钮, this); flatGroup-setFlat(true); // 扁平模式 QHBoxLayout *flatLayout new QHBoxLayout(flatGroup); flatLayout-addWidget(new QPushButton(新建, this)); flatLayout-addWidget(new QPushButton(打开, this)); flatLayout-addWidget(new QPushButton(保存, this)); flatLayout-addWidget(new QPushButton(删除, this)); // 右对齐分组框 QGroupBox *alignGroup new QGroupBox(选项设置, this); alignGroup-setAlignment(Qt::AlignRight); // 组内控件右对齐 QVBoxLayout *alignLayout new QVBoxLayout(alignGroup); alignLayout-addWidget(new QCheckBox(启用自动保存, this)); alignLayout-addWidget(new QCheckBox(显示状态栏, this)); alignLayout-addWidget(new QCheckBox(允许拖拽, this)); mainLayout-addWidget(flatGroup); mainLayout-addWidget(alignGroup); }3.1.4 GroupBox 避坑指南组内布局GroupBox 必须设置布局管理器如 QVBoxLayout否则内部控件无法正常显示勾选功能setCheckable(true)后组内控件默认随勾选状态启用 / 禁用无需手动控制扁平模式setFlat(true)会隐藏边框仅显示标题适用于简洁界面对齐方式setAlignment控制组内控件的整体对齐而非标题对齐。3.2 TabWidget多页面切换的 “导航栏”QTabWidget 是标签页控件适用于将不同功能模块放在不同标签页中如设置界面、编辑界面等通过切换标签页实现功能切换节省界面空间提升界面整洁度。3.2.1 核心属性与 API属性 / 方法功能说明实用场景addTab(QWidget* page, const QString label)添加标签页页面 标题新增功能模块insertTab(int index, QWidget* page, const QString label)在指定位置插入标签页调整标签页顺序removeTab(int index)删除指定标签页动态移除模块currentIndex()获取当前选中标签页的下标判断当前激活模块setCurrentIndex(int index)设置当前选中标签页手动切换模块setTabText(int index, const QString text)修改标签页标题动态更新标题setTabIcon(int index, const QIcon icon)设置标签页图标美化标签页setTabsCloseable(bool closeable)设置标签页是否可关闭支持动态关闭标签页currentChanged(int index)标签页切换时触发的信号切换模块时执行初始化3.2.2 基础用法功能模块切换先创建控件运行结果如下3.2.3 进阶用法标签页的增加与删除编辑.ui文件编写代码#include widget.h #include ui_widget.h #include QLabel #include QDebug Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui-setupUi(this); //先在每个标签页中添加一个Label QLabel* label1 new QLabel(ui-tab); label1-setText(标签页1); label1-resize(100, 50); QLabel* label2 new QLabel(ui-tab_2); label2-setText(标签页2); label2-resize(100, 50); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { //使用addTab方法创建新的标签页 //参数1 要指定一个QWidget //参数2 指定这个标签页的text标题,此处标题就叫做Tab 数字 int count ui-tabWidget-count(); //获取到标签页的数量 QWidget* w new QWidget(); ui-tabWidget-addTab(w, QString(Tab ) QString::number(count 1)); //添加一个QLabel显示内容 QLabel* label new QLabel(w); label-setText(QString(标签页) QString::number(count 1)); label-resize(100, 50); //设置新标签页被选中 ui-tabWidget-setCurrentIndex(count); } void Widget::on_pushButton_2_clicked() { //获取到当前选中的标签页的下标 int index ui-tabWidget-currentIndex(); //删除标签页 ui-tabWidget-removeTab(index); } void Widget::on_tabWidget_currentChanged(int index) { qDebug() 当前选中的标签页是 index; }运行结果如下3.2.4 TabWidget 避坑指南页面创建每个标签页必须是独立的 QWidget且需设置布局管理器否则控件无法正常排列关闭标签页setTabsCloseable(true)后通过tabCloseRequested信号处理关闭逻辑需手动调用removeTab动态标题通过setTabText可动态更新标签页标题适用于显示实时状态嵌套布局标签页内部可嵌套任意布局支持复杂界面设计切换初始化currentChanged信号在标签页切换时触发可用于初始化当前页面数据。总结多元素与容器类控件是 Qt 界面开发的核心工具掌握它们的使用后可轻松应对复杂数据展示和界面布局需求。如果本文对你有帮助欢迎点赞、收藏、转发如有疑问或建议欢迎在评论区留言交流