Qt 多元素控件

news2024/9/8 23:59:16

Qt开发 多元素控件

Qt 中提供的多元素控件有:

  • QListWidget
  • QListView
  • QTableWidget
  • QTableView
  • QTreeWidget
  • QTreeView

xxWidget 和 xxView 之间的区别

以 QTableWidget 和 QTableView 为例.

  • QTableView 是基于 MVC 设计的控件. QTableView 自身不持有数据. 使用QTableView 的 时候需要用户创建⼀个 Model 对象 (比如 QStandardModel ), 并且把 Model 和 QTableView 关联起来. 后续修改 Model 中的数据就会影响 QTableView 的显示; 修改 QTableView 的显示也会影响到 Model 中的数据(双向绑定).
  • QTableWidget 则是 QTableView 的子类, 对 Model 进行了封装. 不需要用户手动创建 Model 对象, 直接就可以往 QTableWidget 中添加数据了.

List Widget

使用 QListWidget 能够显示一个纵向的列表. 形如

在这里插入图片描述

每个选项都可以被选中.

核心属性

属性说明
currentRow当前被选中的是第几行
count⼀共有多少行
sortingEnabled是否允许排序
isWrapping是否允许换行
itemAlignment元素的对齐方式
selectRectVisible被选中的元素矩形是否可见
spacing元素之间的间隔

核心方法

方法说明
addItem(const QString& label)
addItem(QListWidgetItem *item)		列表中添加元素
currentItem()返回 QListWidgetItem* 表示当前选中的元素
setCurrentItem(QListWidgetItem* item)设置选中哪个元素
setCurrentRow(int row)设置选中第几行的元素
insertItem(const QString& label, int row)
insertItem(QListWidgetItem *item, int row)		在指定的位置插入元素
item(int row)返回 QListWidgetItem* 表示第 row 行的元素
takeItem(int row)删除指定行的元素, 返回 QListWidgetItem* 表示是哪个元素被删除了

核心信号

信号说明
currentItemChanged(QListWidgetItem* current, QListWidgetItem* old)选中不同元素时会触发. 参数是当前选中的元素和之前选中的元素.
currentRowChanged(int)选中不同元素时会触发. 参数是当前选中元素的行数.
itemClicked(QListWidgetItem* item)点击某个元素时触发
itemDoubleClicked(QListWidgetItem* item)双击某个元素时触发
itemEntered(QListWidgetItem* item)鼠标进入元素时触发

在上述介绍中, 涉及到⼀个关键的类, QListWidgetItem .

这个类表示 QListWidget 中的⼀个元素.

核心方法如下, 本质上就是⼀个 “文本+图标” 构成的.

方法说明
setFont设置字体
setIcon设置图标
setHidden设置隐藏
setSizeHint设置尺寸
setSelected设置是否选中
setText设置文本
setTextAlignment设置文本对齐方式.

代码示例: 使用 ListWidget

(1) 在界面上创建一个 ListView，右键=>变形为=> Listwidget，再创建个lineEdit和两个按钮

注意: ListWidget 是 ListView 的子类, 功能比 ListView 更丰富. 咱们使用 ListWidget 即可

在这里插入图片描述

(2) 编写 widget.cpp, 在构造函数中添加初始元素

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");
}

(3) 编写 listWidget 的 slot 函数

此处需要判定 current 和 previous 非空. 初始情况下是没有元素选中的, 就导致这俩指针可能是 nullptr.

void Widget::on_listWidget_currentItemChanged(QListWidgetItem *current,
QListWidgetItem *previous)
{
	if (current != NULL && previous != NULL) {
		qDebug() << "当前选中: " << current->text() << "之前选中: " << previous->text();
	}
}

(4) 编写按钮的 slot 函数

void Widget::on_pushButton_clicked()
{
	// 获取到输⼊框的内容
	const QString& text = ui->lineEdit->text();
	if (text.isEmpty()) {
		return;	
	}
	ui->listWidget->addItem(text);
}

void Widget::on_pushButton_2_clicked()
{
	// 获取当前被选中的元素
	int row = ui->listWidget->currentRow();
	// 删除这⼀⾏
	ui->listWidget->takeItem(row);
}

(5) 执行程序,观察效果.可以新增元素,选中元素,删除元素

在这里插入图片描述

Table Widget

使用 QTableWidget 表示一个表格控件. ⼀个表格中包含若干行, 每一行又包含若干列. 表格中的每个单元格, 是一个 QTableWidgetItem 对象。

QTableWidget 核心方法

方法说明
item(int row, int column)根据行数列数获取指定的 QTableWidgetItem*
setItem(int row, int column, QTableWidget*)根据行数列数设置表格中的元素
currentItem()返回被选中的元素 QTableWidgetItem*
currentRow()返回被选中元素是第几行
currentColumn()返回被选中元素是第几列
row(QTableWidgetItem* )获取指定 item 是第几行
column(QTableWidgetItem* )获取指定 item 是第几列
rowCount()获取行数
columnCount()获取列数
insertRow(int row)在第 row 行处插入新行
insertColumn(int column)在第 column 列插入新列
removeRow(int row)删除第 row 行
removeColumn(int column)删除第 column 列
setHorizontalHeaderItem(int column, QTableWidget*)设置指定列的表头
setVerticalHeaderItem(int row, QTableWidget*)设置指定行的表头

QTableWidgetItem 核心信号

信号说明
cellClicked(int row, int column)点击单元格时触发
cellDoubleClicked(int row, int column)双击单元格时触发
cellEntered(int row, int column)鼠标进入单元格时触发
currentCellChanged(int row, int column, int previousRow, int previousColumn)选中不同单元格时触发

QTableWidgetItem 核心方法

方法说明
row()获取当前是第几行
column()获取当前是第几列
setText(const QString&)设置文本
setTextAlignment(int)设置文本对齐
setIcon(const QIcon&)设置图标
setSelected(bool)设置被选中
setSizeHints(const QSize&)设置尺寸
setFont(const QFont&)设置字体

代码示例：使用 QTableWidget

(1) 在界面上创建 QTableWidget 和 三个按钮, 一个输入框

在这里插入图片描述

(2) 编写 widget.cpp 构造函数, 构造表格中的初始数据

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
	ui->setupUi(this);
	// 创建 3 ⾏
	ui->tableWidget->insertRow(0);
	ui->tableWidget->insertRow(1);
	ui->tableWidget->insertRow(2);
	// 创建 3 列
	ui->tableWidget->insertColumn(0);
	ui->tableWidget->insertColumn(1);
	ui->tableWidget->insertColumn(2);
	// 给 3 列设定列名
	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("21"));
	ui->tableWidget->setItem(2, 0, new QTableWidgetItem("1003"));
	ui->tableWidget->setItem(2, 1, new QTableWidgetItem("王五"));
	ui->tableWidget->setItem(2, 2, new QTableWidgetItem("19"));
}

(3) 编写按钮的 slot 函数

void Widget::on_pushButton_addRow_clicked()
{
	// 1. 获取到⾏数
	int rowCount = ui->tableWidget->rowCount();
	// 2. 插⼊新行
	ui->tableWidget->insertRow(rowCount);
}

void Widget::on_pushButton_delRow_clicked()
{
	// 1. 获取选中的⾏号
	int curRow = ui->tableWidget->currentRow();
	// 2. 删除对应⾏
	ui->tableWidget->removeRow(curRow);
}

void Widget::on_pushButton_addCol_clicked()
{
	// 1. 获取到列数
	int colCount = ui->tableWidget->columnCount();
	// 2. 插⼊新列
	ui->tableWidget->insertColumn(colCount);
	// 3. 设置列名
	const QString& name = ui->lineEdit->text();
	ui->tableWidget->setHorizontalHeaderItem(colCount, newQTableWidgetItem(name));
}

void Widget::on_pushButton_delCol_clicked()
{
	// 1. 获取选中的列号
	int curCol = ui->tableWidget->currentColumn();
	// 2. 删除对应的列
	ui->tableWidget->removeColumn(curCol);
}

(4) 执行程序, 即可完成表格的基本操作.

在这里插入图片描述

默认情况下, 单元格中的内容直接就是可编辑的.

如果不想让用户编辑, 可以设置 ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers);

Tree Widget

使用 QTreeWidget 表示一个树形控件，里面的每个元素，都是一个 TreeWidgetItem，每个 QTreeWidgetItem 可以包含多个文本和图标，每个文本/图标为一个列.

可以给 QTreewidget 设置顶层节点(顶层节点可以有多个)，然后再给顶层节点添加子节点，从而构成树形结构

QTreeWidget 核心方法

方法说明
clear清空所有子节点
addTopLevelItem(QTreeWidgetItem* item)新增顶层节点
topLevelItem(int index)获取指定下标的顶层节点.
topLevelItemCount()获取顶层节点个数
indexOfTopLevelItem(QTreeWidgetItem* item)查询指定节点是顶层节点中的下标
takeTopLevelItem(int index)删除指定的顶层节点. 返回 QTreeWidgetItem* 表示被删除的元素
currentItem()获取到当前选中的节点, 返回 QTreeWidgetItem*
setCurrentItem(QTreeWidgetItem* item)选中指定节点
setExpanded(bool)展开/关闭节点
setHeaderLabel(const QString& text)设置 TreeWidget 的 header 名称.

QTreeWidget 核心信号

信号说明
currentItemChanged(QTreeWidgetItem* current, QTreeWidgetItem* old)切换选中元素时触发
itemClicked(QTreeWidgetItem* item, int col)点击元素时触发
itemDoubleClicked(QTreeWidgetItem* item, int col)双击元素时触发
itemEntered(QTreeWidgetItem* item, int col)鼠标进入时触发
itemExpanded(QTreeWidgetItem* item)元素被展开时触发
itemCollapsend(QTreeWidgetItem* item)元素被折叠时触发

QTreeWidgetItem 核心属性

属性说明
text持有的文本
textAlignment文本对齐方式
icon持有的图标
font字体
hidden是否隐藏
disabled是否禁用
expand是否展开
sizeHint尺寸大小
selected是否选中

QTreeWidgetItem 核心方法

方法说明
addChild(QTreeWidgetItem* child)新增子节点
childCount()子节点的个数
child(int index)获取指定下标的子节点. 返回 QTreeWidgetItem*
takeChild(int index)删除对应下标的子节点
removeChild(QTreeWidgetItem* child)删除对应的子节点
parent()获取该元素的父节点

代码示例：使用 QTreeWidget

(1) 在界面上创建一个 TreeView，右键=>变形为=> Treewidget ,再创建一个 lineEdit 和两个按钮

在这里插入图片描述

(2) 编写代码, 构造初始数据

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);
}

(3) 编写代码, 实现按钮的 slot 函数

//添加到顶层节点中
void Widget::on_pushButton_clicked()
{
	// 获取输⼊框内容
	const QString& text = ui->lineEdit->text();
	if (text.isEmpty()) {
		return;
	}
	// 添加到顶层节点中
	QTreeWidgetItem* item = new QTreeWidgetItem();
	item->setText(0, text);
	ui->treeWidget->addTopLevelItem(item);
}
//添加到选中节点
void Widget::on_pushButton_2_clicked()
{
	// 获取输⼊框内容
	const QString& text = ui->lineEdit->text();
	if (text.isEmpty()) {
		return;
	}
	// 获取到当前选中的节点
	QTreeWidgetItem* currentItem = ui->treeWidget->currentItem();
	if (currentItem == NULL) {
		return;
	}
	// 构造新的 item
	QTreeWidgetItem* newItem = new QTreeWidgetItem();
	newItem->setText(0, text);
	// 添加 item 到选中节点
	currentItem->addChild(newItem);
	// 展开⽗节点
	currentItem->setExpanded(true);
}

//删除选中元素
void Widget::on_pushButton_3_clicked()
{
	// 获取到当前选中的节点
	QTreeWidgetItem* currentItem = ui->treeWidget->currentItem();
	if (currentItem == NULL) {
		return;
	}
	// 获取当前节点的⽗节点
	QTreeWidgetItem* parent = currentItem->parent();
	if (parent == NULL) {
		// 顶层节点
		int index = ui->treeWidget->indexOfTopLevelItem(currentItem);
		ui->treeWidget->takeTopLevelItem(index);
	} else {
		// ⾮顶层节点
		parent->removeChild(currentItem);
	}
}

(4) 执行程序, 可以针对树形框进行编辑.

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1533042.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Prometheus 配置Basic auth认证

Prometheus 配置Basic auth认证

官方配置说明&#xff1a; Basic auth | Prometheus 一、生成密码加密串 Prometheus于2.24版本&#xff08;包括2.24&#xff09;之后提供Basic Auth功能进行加密访问&#xff0c;在浏览器登录UI的时候需要输入用户密码&#xff0c;访问Prometheus api的时候也需要加上用户密…
阅读更多...
Qt 鼠标滚轮示例

Qt 鼠标滚轮示例

1.声明 void wheelEvent(QWheelEvent *event) override;2.实现&#xff08;方便复制、测试起见用静态变量&#xff09; #include <mutex> void MainWindow::wheelEvent(QWheelEvent *event) {static QLabel *label new QLabel("Zoom Level: 100%", this);st…
阅读更多...
Cesium for UE-01-虚幻引擎的下载安装及插件配置

Cesium for UE-01-虚幻引擎的下载安装及插件配置

学习Cesium for UE的过程笔记 下载UE 下载 下载完成后&#xff0c;点击运行&#xff0c;执行安装 安装完成后需要下载epic game 下载完成&#xff0c;需要登录 没有账号的自行注册&#xff0c;或者选一个有账号的平台登录即可 选择虚幻引擎&#xff0c;再点击库 可以看到下…
阅读更多...
Cronos zkEVM 基于 Covalent Network（CQT）数据可用性 API，推动其 Layer2 DeFi 生态更好地发展

Cronos zkEVM 基于 Covalent Network（CQT）数据可用性 API，推动其 Layer2 DeFi 生态更好地发展

在一项旨在显著改善 DeFi 生态的战略举措中&#xff0c;Cronos 与 Covalent Network&#xff08;CQT&#xff09;携手合作&#xff0c;以期待 Cronos zkEVM 的推出。这一整合&#xff0c;预计将进一步降低以太坊生态系统的交易成本、提升交易速度&#xff0c;并带来更好的交易体…
阅读更多...
全面：vue.config.js 的完整配置

全面：vue.config.js 的完整配置

vue.config.js是Vue项目的配置文件&#xff0c;用于配置项目的构建、打包和开发环境等。 在Vue CLI 3.0之后&#xff0c;项目的配置文件从原来的build和config目录下的多个配置文件&#xff0c;合并成了一个vue.config.js文件。这个文件可以放在项目的根目录下&#xff0c;用于…
阅读更多...
FPGA学习_Xilinx7系列FPGA基本结构

FPGA学习_Xilinx7系列FPGA基本结构

文章目录 前言一、7系列FPGA介绍1.1、芯片编号 二、基本组成单元2.1、可编程逻辑块CLB&#xff08;Configable Logic Block&#xff09;2.2、可编程输入输出单元&#xff08;IOB&#xff09;2.3、嵌入式块RAM&#xff08;Block RAM&#xff09;2.4、底层内嵌功能单元2.5、内嵌专…
阅读更多...
变配电站配电监控解决方案--变电站综合自动化系统

变配电站配电监控解决方案--变电站综合自动化系统

变电站综合自动化系统 Acrel-1000变电站综合自动化监控系统是我司根据电力系统自动化及无人值守的要求&#xff0c;总结国内外的研究和生产的先进经验专门研制出的新一代电力监控系统。本系统具有保护、遥测、遥信、遥脉、遥调、遥控功能&#xff0c;可实现无人或少人值守功能…
阅读更多...
基于SpringBoot的街道办管理系统

基于SpringBoot的街道办管理系统

摘 要 随着世界经济信息化、全球化的到来和互联网的飞速发展&#xff0c;推动了各行业的改革。若想达到安全&#xff0c;快捷的目的&#xff0c;就需要拥有信息化的组织和管理模式&#xff0c;建立一套合理、动态的、交互友好的、高效的街道办管理系统。当前的信息管理存在工作…
阅读更多...
NodeJS 集群模块: 为App创建集群实例

NodeJS 集群模块: 为App创建集群实例

NodeJS 集群模块: 为App创建集群实例 目录 NodeJS 集群模块: 为App创建集群实例Node.js 集群介绍：终极扩展策略使用集群模块开始扩展 Node.js扩展 Node.js 的两种集群策略使用集群受益的 Node.js 应用程序示例没有集群的 Node.js：不可伸缩的原则集群操作：一个扩展的 Node.js…
阅读更多...
Redis的分片机制

Redis的分片机制

Redis的分片机制 Redis是一个开源的内存数据结构存储系统&#xff0c;它支持键值对的存储方式。Redis的分片机制允许将数据在多个节点上进行分布式存储和处理&#xff0c;从而提高系统的性能和可扩展性。 Redis的分片机制是通过一致性哈希算法实现的。一致性哈希算法将所有的ke…
阅读更多...
vue2 脚手架

vue2 脚手架

安装 文档&#xff1a;https://cli.vuejs.org/zh/ 第一步&#xff1a;全局安装&#xff08;仅第一次执行&#xff09; npm install -g vue/cli 或 yarn global add vue/cli 备注&#xff1a;如果出现下载缓慢&#xff1a;请配置npm 淘宝镜像&#xff1a; npm config set regis…
阅读更多...
EFcore的实体类配置

EFcore的实体类配置

1 约定配置 约定大于配置&#xff0c;框架默认了许多实体类配置的规则&#xff0c;在约定规则不满足要求时&#xff0c;可以显示地定义规则 1 数据库表明在不指定的情况下&#xff0c;默认使用的是数据库上下文类【DBContext】中DbSet 的属性名&#xff1b; 2 数据库表列的名字…
阅读更多...
大数据开发--02.环境准备

大数据开发--02.环境准备

一.准备三台linux虚拟机 1.分别取名node1,node2,node3 2.配置静态ip 这里以node1为例&#xff0c;配置静态ip地址&#xff0c;其他node2.node3一样 配置完成之后别忘记 systemctl restart network 3.在各自的/etc/hosts文件中编辑三个Ip地址 三台都要配置&#xff0c; 4.然…
阅读更多...
使用Dockerfile打包java项目生成镜像部署到Linux

使用Dockerfile打包java项目生成镜像部署到Linux

1、Dockerfile 介绍 如果说容器就是“小板房”&#xff0c;镜像就是“样板间”。那么&#xff0c;要造出这个“样板间”&#xff0c;就必然要有一个“施工图纸”&#xff0c;由它来规定如何建造地基、铺设水电、开窗搭门等动作。这个“施工图纸”就是“Dockerfile”。 比起容…
阅读更多...
【MySql实战--日志系统：一条SQL更新语句是如何执行的？】

【MySql实战--日志系统：一条SQL更新语句是如何执行的？】

前面我们系统了解了一个查询语句的执行流程&#xff0c;并介绍了执行过程中涉及的处理模块。相信你还记得&#xff0c;一条查询语句的执行过程一般是经过连接器、分析器、优化器、执行器等功能模块&#xff0c;最后到达存储引擎。 那么&#xff0c;一条更新语句的执行流程又是怎…
阅读更多...
Apache Superset

Apache Superset

前言 最近在准备一个小的项目&#xff0c;需要对 Hive 的数据进行展示&#xff0c;所以想到了把 Hive 的数据导出到 MySQL 然后用 Superset 进行展示。 Superset 1.1 Superset概述 Apache Superset是一个现代的数据探索和可视化平台。它功能强大且十分易用&#xff0c;可对接…
阅读更多...
基于WTR096-28SS芯片方案的宠物喂食器实现智能化喂食功能

基于WTR096-28SS芯片方案的宠物喂食器实现智能化喂食功能

一、简介 本方案宠物喂食器采用了WTR096-28SS芯片方案来实现智能化的喂食功能。该方案结合了先进的技术和设计理念&#xff0c;提供了便捷、智能和个性化的宠物喂食解决方案。 该宠物喂食器具备定时、定量喂食功能&#xff0c;可以根据主人设定的时间和食物量&#xff0c;自动…
阅读更多...
AI大模型与ChatGPT：开启智慧科研新篇章丨ChatGPT在地学、GIS、气象、农业、生态、环境科学等领域应用

AI大模型与ChatGPT：开启智慧科研新篇章丨ChatGPT在地学、GIS、气象、农业、生态、环境科学等领域应用

目录 专题一 开启大模型 专题二 基于ChatGPT大模型提问框架 专题三 基于ChatGPT大模型的论文助手 专题四 基于ChatGPT大模型的数据清洗 专题五 基于ChatGPT大模型的统计分析 专题六 基于ChatGPT的经典统计模型 专题七 基于ChatGPT大模型的机器学习 专题八 ChatGPT的二次…
阅读更多...
stm32f103c8t6学习笔记（学习B站up江科大自化协）-ADC

stm32f103c8t6学习笔记（学习B站up江科大自化协）-ADC

ADC简介 ADC&#xff0c;英文全称是Analog to Digital Convert&#xff0c;意为模拟数字转换器&#xff0c;简称模数转换器&#xff0c;或者叫AD转换器&#xff0c;STM32主要是数字电路&#xff0c;数字电路只有高低电平&#xff0c;没有几V电压的概念&#xff0c;如果想读取电…
阅读更多...
AI大模型额外学习一：斯坦福AI西部世界小镇笔记（包括部署和源码分析）

AI大模型额外学习一：斯坦福AI西部世界小镇笔记（包括部署和源码分析）

文章目录 一、简单介绍1&#xff09;项目代码介绍2&#xff09;重新播放模拟3&#xff09;适当修改分叉模拟 二、部署斯坦福小镇Demo1&#xff09;准备工作2&#xff09;解决遇到的bug3&#xff09;启动服务器和前端 三、源码剖析1&#xff09;主题顺序 github链接 一、简单介…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023