多元素控件
一、QListWidget
QListWidget列表框，主要用于展示一系列项目的列表，每个项目是一个QListWidgetItem列表项对象。
QListWidget 通过 addItem, insertItem, removeItem 等方法来操作列表项。
每个列表项(QListWidgetItem)可以设置文本及图标。
1、基本使用步骤
（1）包含头文件
包含 QListWidget 的头文件。
#include <QListWidget>
（2）创建实例
创建一个 QListWidget 对象。
QListWidget *listWidget = new QListWidget(this);
（3）添加项
通过 addItem 方法添加文本项或使用 new QListWidgetItem 创建带有自定义数据的项。
listWidget->addItem(new QListWidgetItem("项1"));
listWidget->addItem("项2");
1. listWidget->addItem(new QListWidgetItem("项1"));
-
你自己 new 一个
QListWidgetItem对象，然后传进去。 -
这个对象不止能保存文本
"项1"，还可以设置 图标、字体、颜色、状态 等等属性。auto *item = new QListWidgetItem("项1"); item->setIcon(QIcon("icon.png")); item->setTextColor(Qt::red); listWidget->addItem(item); -
适合 需要更复杂定制的列表项。
2. listWidget->addItem("项2");
-
这是
addItem的 重载函数，直接传一个QString。 -
内部会自动帮你创建一个
QListWidgetItem，只设置了文本，别的都用默认。
👉 相当于：listWidget->addItem(new QListWidgetItem("项2"));但是没有机会提前自定义它。
（4）自定义项
可以为项设置图标、背景色、字体等。
QListWidgetItem *item = new QListWidgetItem(QIcon("icon.png"), "带图标的项");
item->setBackgroundColor(Qt::lightGray);
listWidget->addItem(item);
（5）响应点击事件
连接 itemClicked 信号到槽函数，用户点击列表项时执行操作。
connect(listWidget, &QListWidget::itemClicked, this, &MyClass::onItemClicked);
示例：
#include <QApplication> // Qt 程序的入口类，负责应用程序的初始化与事件循环
#include <QListWidget> // 列表控件类（QListWidget）
#include <QMessageBox> // 消息框类，用于弹出提示窗口
#include <QIcon> // 图标类，用于在控件中显示小图标
// 自定义 Example 窗口类，继承 QWidget
class Example : public QWidget {
Q_OBJECT // Qt 的宏，启用信号与槽机制
public:
// 构造函数
Example(QWidget *parent = nullptr) : QWidget(parent) {
QVBoxLayout *layout = new QVBoxLayout(this); // 创建一个垂直布局，并设置到当前窗口
QListWidget *listWidget = new QListWidget; // 创建一个列表控件
// 添加一个带图标和文字的列表项
listWidget->addItem(new QListWidgetItem(QIcon("icon1.png"), "项1"));
// 添加一个只有文字的列表项
listWidget->addItem("项2");
listWidget->addItem("项3");
// 连接信号和槽：当某个列表项被点击时，调用 Example::onItemClicked()
connect(listWidget, &QListWidget::itemClicked, this, &Example::onItemClicked);
// 把列表控件加到窗口布局里
layout->addWidget(listWidget);
}
private slots:
// 槽函数：当列表项被点击时执行
void onItemClicked(QListWidgetItem *item) {
// 弹出提示框，显示点击的项的文字
QMessageBox::information(this, "已选择", QString("选择了: %1").arg(item->text()));
}
};
// 主函数
int main(int argc, char *argv[]) {
QApplication app(argc, argv); // 应用程序对象
Example example; // 创建 Example 窗口
example.show(); // 显示窗口
return app.exec(); // 进入事件循环
}
-
QListWidget 就是一个“列表框”，里面可以放很多“项 (item)”。
-
你可以往里面加：
- 文字项（
listWidget->addItem("项2")） - 带图标的项（
QListWidgetItem(QIcon("icon1.png"), "项1")）
- 文字项（
-
当用户点击列表里的某个 item（项/条目） 时，会触发
itemClicked信号。 -
onItemClicked槽函数接收到这个信号后，就能知道用户点了哪一项，并弹窗提示。
2、可视化设计
使用QListWidget、QStackWidget以及QSS样式完成如下案例：
（1）拖拽List Widget，依次增加列表项
（2）对QListWidget设置背景去除边框，并调整字体大小，将所有列表菜单字体，一次性全部字体大小调成12。
QListWidget选中右键，改变样式表，输入以下内容：
QListWidget {
background-color: rgb(240, 243, 248); //加背景色
border: 0; //去除边框
font-size: 18px;
}
（3）调整每个列表菜单高度
改变item高度，还有每个按钮圆角样式表。
QListWidget::item {
height: 60px;
border-radius: 5px;
}
（4）设置鼠标划过和选中效果
/* 鼠标悬停在 QListWidget 的某个条目上时的样式 */
QListWidget::Item:hover {
background-color: rgb(229, 237, 248); /* 悬停时，背景颜色变浅蓝 */
}
/* QListWidget 的某个条目被选中时的样式 */
QListWidget::Item:selected {
background-color: rgb(204, 223, 248); /* 选中时，背景颜色变深一点的蓝色 */
color: rgb(0, 112, 249); /* 选中时，文字颜色变为蓝色 */
}
（5）解决选中后的虚线框问题
选中列表框整体，右键，改变样式表，增加如下：
/*去除选择项的边框*/
QWidget:focus{
outline: none;
}
（6）添加图标
首先为项目添加图片资源，然后按照如下操作添加列表项的图标。
（7）和堆栈窗体类QStackedWidget结合起来，实现翻页切换功能
拖出控件QStackedWidget，默认是2个页，在箭头所示位置右键，插入页，当前页之后，这里再需要插入2个页，总共4个页。
（8）QStackedWidget和QListWidget关联
将左边控件鼠标拖住不放，此时指向右边，会弹出如下提示，按绿色箭头选择接口
上一步确定后，可看到左边指向了右边，并且最下方有自动生成的 信号和槽；
此时直接编译运行，功能已经完成了。
也可以在代码中使用connect 函数链接
connect(ui->listWidget,&QListWidget::currentRowChanged,ui->stackedWidget,&QStackedWidget::setCurrentIndex);
-
connect(...)- Qt 的 信号与槽连接函数，用来把一个信号绑定到一个槽函数。
- 当信号发出时，槽函数就会被自动调用。
-
ui->listWidget- 信号的发送者（Sender），这里是列表控件
QListWidget。
- 信号的发送者（Sender），这里是列表控件
-
&QListWidget::currentRowChanged- 这是 信号，当列表的当前行（选中行）发生变化时触发。
- 参数类型：
int（变化后的行号，从 0 开始）。
-
ui->stackedWidget- 槽的接收者（Receiver），这里是
QStackedWidget，堆叠控件。
- 槽的接收者（Receiver），这里是
-
&QStackedWidget::setCurrentIndex- 槽函数，用来切换堆叠控件显示哪一页。
- 参数类型：
int（要显示的页索引）。
🔑 整体意思
- 当你在
listWidget里选中不同的行时（currentRowChanged 信号触发）， - 就会自动调用
stackedWidget->setCurrentIndex(int)， - 根据选中的行号切换到对应的页面。
✅ 效果：
- 列表第 0 行 → 显示堆叠控件第 0 页
- 列表第 1 行 → 显示堆叠控件第 1 页
（9）也可以换几个页面加入QListQwidget中
ui->stackedWidget->insertWidget(2,new Page_1); //下标从0开始
ui->stackedWidget->insertWidget(3,new Page_2);
insertWidget是 动态添加页面 的方法，可以在任意位置加入新页面。- 每个页面都是
QWidget子类，可以自定义界面。 - 下标从 0 开始，方便和
QListWidget的行号对应，实现点击列表切换页面。
二、QTabWidget
QTabWidget 选项卡组件，通过标签页的形式来组织和切换不同的界面内容，包含一个选项卡栏（QTabBar）和一个页面区域，通过点击不同的选项卡来查看不同的内容页面。
工作原理类似于QStackedLayout，其中只有一个当前选中的页面（即可见页面）是可见的，而其他页面则不可见，可以通过点击顶部的标签来切换显示不同的页面。
1、基本使用步骤
（1）包含头文件: 首先需要包含 QTabWidget 的头文件。
#include <QTabWidget>
（2）创建 QTabWidget 实例: 创建一个 QTabWidget 对象
QTabWidget *tabWidget = new QTabWidget(this);
（3）添加标签页: 通过 addTab() 方法添加新的标签页，传入一个 QWidget 对象作为页面内容，以及一个字符串作为标签的标题。
QTabWidget *tabWidget = new QTabWidget(this); // 创建选项卡控件 QTabWidget，父控件为当前窗口
QWidget *page1 = new QWidget; // 创建第一个页面 Page1（空 QWidget）
QLabel *label1 = new QLabel("页面1", page1); // 在 page1 上放一个 QLabel，显示文字“页面1”
tabWidget->addTab(page1,"选项卡1"); // 将 page1 添加到 tabWidget，并设置标签文字为“选项卡1”
QWidget *page2 = new QWidget; // 创建第二个页面 Page2
QLabel *label2 = new QLabel("页面2", page2); // 在 page2 上放一个 QLabel，显示文字“页面2”
tabWidget->addTab(page2, "选项卡2"); // 将 page2 添加到 tabWidget，并设置标签文字为“选项卡2”
QVBoxLayout *layout = new QVBoxLayout; // 创建垂直布局管理器
layout->addWidget(tabWidget); // 将 tabWidget 加入布局
this->setLayout(layout); // 将布局设置给当前窗口，使控件显示
🌟 总结（通俗理解）
- QTabWidget 就是 Qt 的选项卡控件，可以同时放多个页面，每次只显示一个。
- 每个页面 是一个
QWidget，可以在上面放各种控件（如QLabel、QPushButton等）。 addTab(QWidget*, "标签文字")→ 将页面加入选项卡，并设置显示的标签名字。- 使用布局（
QVBoxLayout）把QTabWidget放到窗口里，让它能显示和自动调整大小。
✅ 效果：
- 窗口显示一个选项卡控件
- 有两个选项卡：
- 选项卡1 → 显示“页面1”标签
- 选项卡2 → 显示“页面2”标签
- 点击不同选项卡会切换显示对应页面
2、可视化设计
直接拖拽出控件
添加tab页及命名
后续还可以手动插入tab页
tab->insertTab(3, new QLabel("dd"), "Tab 4"); // 在下标 3 的位置插入一个新选项卡，页面是 QLabel("dd")，标签文字为 "Tab 4"
// 参数说明：
// 参数1：下标 index，从 0 开始，表示插入的位置
// 参数2：QWidget* widget，要显示的页面控件，这里是一个 QLabel
// 参数3：QString label，要显示在选项卡上的文字
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
