本节对应的视频讲解：B_站_链_接

1. 属性和方法

QListWidget 有很多属性和方法，完整的可查看帮助文档。这里列出常用的属性和方法：

1.1 显示模式

列表框控件，支持两种显示模式：列表模式和图标模式

// 获取和设置显示模式
QListView::ViewMode viewMode() const
void setViewMode(QListView::ViewMode mode)

其中，QListView::ViewMode 是一个枚举，有两个取值：

QListView::ListMode 列表模式
QListView::IconMode 图标模式

该属性既可以在属性窗口中设置，也可以在代码中动态设置

1.2 交替背景色

设置相邻行交替显示不同的背景色，便于显示和浏览时的定位

// 获取和设置交替显示
bool alternatingRowColors() const
void setAlternatingRowColors(bool enable)

该属性既可以在属性窗口中设置，也可以在代码中动态设置

使能了交替显示的效果：

未使能交替显示的效果：

1.3 添加条目

既可以在 UI 设计师界面添加，也可以通过代码动态添加

UI 设计师界面添加：右键列表框控件，选择【编辑项目】，在打开的对话框中添加和删除条目

在代码中，动态添加条目：

// 在尾部添加
void addItem(const QString &label)
void addItem(QListWidgetItem *item)
void addItems(const QStringList &labels)// 在指定行之前添加
void insertItem(int row, QListWidgetItem *item)
void insertItem(int row, const QString &label)
void insertItems(int row, const QStringList &labels)

使用包含 QListWidgetItem 参数的函数，可以为条目指定图标

QListWidgetItem::QListWidgetItem(const QIcon &icon, const QString &text, QListWidget *parent = nullptr, int type = Type)

1.4 删除条目

列表框中的条目可以删除，以下以删除当前行为例：

// 方法一
QListWidgetItem* item = ui->lwProvince->currentItem();
ui->lwProvince->removeItemWidget(item);
delete item;// 方法二
int row = ui->lwProvince->currentRow();
QListWidgetItem* item = ui->lwProvince->takeItem(row);
delete item;

注意：需要手动 delete 掉条目

1.5 信号槽

当然了，列表控件的信号和槽有很多，大家需要用到其他信号槽时，直接去查看官方文档即可。

// 当条目被单击时，发射该信号
void itemClicked(QListWidgetItem *item);// 当条目被双击时，发射该信号
void itemDoubleClicked(QListWidgetItem *item);

2. 案例

本案例展示列表框的插入和删除操作、修改操作、显示模式

2.1 布局

在 UI 设计师界面，拖拽对应的控件，修改显示的文字、控件的 name，然后完成布局

2.2 代码实现

完整的项目，在本节视频的置顶评论下载即可

QStringList iconStringList = {":/icon/apple.ico",":/icon/banana.ico",":/icon/orange.ico",":/icon/peach.ico",":/icon/strawberry.ico"
};Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 默认是列表模式mBtnGroup = new QButtonGroup(this);mBtnGroup->addButton(ui->rbListMode, 0);mBtnGroup->addButton(ui->rbIconMode, 1);connect(ui->rbListMode, &QRadioButton::clicked, this, &Widget::onRadioButtonClicked);connect(ui->rbIconMode, &QRadioButton::clicked, this, &Widget::onRadioButtonClicked);ui->rbListMode->setChecked(true);ui->lwProvince->setViewMode(QListView::ListMode);// 条目单击和双击的信号槽connect(ui->lwProvince, &QListWidget::itemClicked, this, &Widget::onItemClicked);connect(ui->lwProvince, &QListWidget::itemDoubleClicked, this, &Widget::onItemDoubleClicked);// add/insert/deleteconnect(ui->btnAdd, &QPushButton::clicked, this, &Widget::onBtnAddClicked);connect(ui->btnInsert, &QPushButton::clicked, this, &Widget::onBtnInsertClicked);connect(ui->btnDelete, &QPushButton::clicked, this, &Widget::onBtnDeleteClicked);
}Widget::~Widget()
{delete ui;
}// 切换显示模式：列表模式、图标模式
void Widget::onRadioButtonClicked()
{int checkedId = mBtnGroup->checkedId();if(checkedId == 0) {ui->lwProvince->setViewMode(QListView::ListMode);} else if(checkedId == 1) {ui->lwProvince->setViewMode(QListView::IconMode);}
}// 条目单击时，显示到文本框
void Widget::onItemClicked(QListWidgetItem *item)
{ui->leCurrentItem->setText(item->text());
}// 双击条目时，变为可编辑模式
void Widget::onItemDoubleClicked(QListWidgetItem *item)
{item->setFlags(Qt::ItemIsEditable | Qt::ItemIsSelectable | Qt::ItemIsEnabled);
}// 在最后插入
void Widget::onBtnAddClicked()
{int iconIndex = QRandomGenerator::global()->generate()%5; //产生5以内的随机数 0-4qDebug() << iconIndex;QIcon icon(iconStringList[iconIndex]);QString text = ui->leInput->text();QListWidgetItem* item = new QListWidgetItem(icon, text);ui->lwProvince->addItem(item);
}// 在当前行之前插入
void Widget::onBtnInsertClicked()
{int iconIndex = QRandomGenerator::global()->generate()%5; // 产生5以内的随机数 0-4QIcon icon(iconStringList[iconIndex]);QString text = ui->leInput->text();QListWidgetItem* item = new QListWidgetItem(icon, text);int currentRow = ui->lwProvince->currentRow();ui->lwProvince->insertItem(currentRow, item);
}// 删除选定的条目
void Widget::onBtnDeleteClicked()
{#if 0// 方法一QListWidgetItem* item = ui->lwProvince->currentItem();ui->lwProvince->removeItemWidget(item);delete item;
#else// 方法二int row = ui->lwProvince->currentRow();QListWidgetItem* item = ui->lwProvince->takeItem(row);delete item;
#endif
}

3. 图标模式-拓展

当设置为图标模式后，由于文字长度不同，会导致每一项对不齐。

3.1 图标不对齐的问题

如下，“内蒙古自治区” 和 “新疆维吾尔自治区”，很显然比其他省份的名字长很多，这样显示出来的效果就无法对齐图标，如下：

针对这个问题，有如下两种解决方法

3.2 设置属性

此时可以设置 gridSize 让图标对齐

设置 gridSize 中的宽度后，图标对齐了。但是由于宽度设置的较小，文字没有完全显示，如下：

此时，可以继续调大宽度。比如将以上的宽度调整为 150 ，此时文字就可以显示完整了，如下：

此时的效果就基本可以接受了

但是，试想这么一种情况，如果文本特别长的话，图标之间的水平间距就会很大，这样界面就不美观了

此时，可以做如下设置：

还是保持 gridSize 中的宽度为 100 不变，然后将高度改的大一点，并勾选 wordWrap 属性

这样很长的文本就可以自动换行显示了

此时的效果就比较美观了，如下：

3.3 代码中手动换行

除了以上让长文本自动换行以外，还可以在添加列表项时，在我们认为合适的位置换行，如下：

QIcon   icon(":/icon/apple.ico");
QString text = "宁夏回族";
text.append("\r\n");
text.append("自治区");
QListWidgetItem *item = new QListWidgetItem(icon, text);
ui->lwProvince->addItem(item);

此时效果如下：

“宁夏回族自治区” 是我们在代码中人为地换行的，“自治区” 三个字另起一行这样比系统的换行，更加合理

比如上边系统自动换行时，“内蒙古自治区”，将 “区” 字另起一行，显然不太合理

本节对应的视频讲解：B_站_链_接
https://www.bilibili.com/video/BV1gd4y1Q7Bw

【QT开发笔记-基础篇】| 第二章常用控件 | 2.11 列表框 QListWidget相关推荐

【QT开发笔记-基础篇】| 第二章常用控件 | 2.12 表格控件 QTableWidget
本节对应的视频讲解:B_站_链_接 QTableWidget 是 Qt 中的表格控件,可以行列的形式来展示数据 1. 属性和方法 QTableWidget 有很多属性和方法,完整的可查看帮助文档. 在 ...
【QT开发笔记-基础篇】| 第二章常用控件 | 2.2 按钮 QPushButton
本节对应的视频讲解:B_站_视_频 https://www.bilibili.com/video/BV1zG411s7LG QPushButton 是 Qt 中的按钮,通常用于响应用户的点击,然后执行 ...
【QT开发笔记-基础篇】| 第二章常用控件 | 2.3 标签 QLabel
本节对应的视频讲解:B_站_链_接 https://www.bilibili.com/video/BV1wB4y1B7b7 QLabel 是 Qt 中的标签类,通常用于显示提示性的文本,也可以显示图像 ...
【QT开发笔记-基础篇】| 第二章常用控件 | 2.9 滑动条 QSlider
本节对应的视频讲解:B_站_链_接 https://www.bilibili.com/video/BV1BT411g791 QSlider 是滑动条控件,滑动条可以在一个范围内拖动,并将其位置转换为整 ...
【QT开发笔记-基础篇】| 第五章绘图QPainter | 5.1 效果演示、技术点
本节对应的视频讲解:B_站_视_频 https://www.bilibili.com/video/BV14P4y197pi Qt 中绘图用到的类是 QPainter,可以实现点.线.矩形.圆形.多边形 ...
【QT开发笔记-基础篇】| 第一章 QT入门 | 1.2 搭建Qt开发环境
本节对应的视频讲解:B_站_链_接 https://www.bilibili.com/video/BV1Pr4y1x7fh Qt 开发主要有两种开发环境 Qt Creator 它是 Qt 官方提供的开 ...
【QT开发笔记-基础篇】| 第一章 QT入门 | 1.1 为什么要学习Qt
本节对应的视频讲解:B_站_链_接 https://www.bilibili.com/video/BV1334y1776z Qt 是一个跨平台的 C++ 图形用户界面应用程序框架 Qt 为应用程序开发 ...
【QT开发笔记-基础篇】| 第一章 QT入门 | 1.4 项目构建流程
本节对应的视频讲解:B_站_链_接 https://www.bilibili.com/video/BV1cW4y1y7Lw 在上一节课中,我们新建了第一个 Qt 工程,其中包括 5 个文件: Hell ...
【QT开发笔记-基础篇】| 第五章绘图QPainter | 5.2 界面布局
本节对应的视频讲解:B_站_视_频 https://www.bilibili.com/video/BV1fR4y1k7Kt 上节课,初步展示了本章要实现的效果.本节课开始,就从零新建工程,把效果一一实 ...

【QT开发笔记-基础篇】| 第二章常用控件 | 2.11 列表框 QListWidget

本节对应的视频讲解：B_站_链_接

1. 属性和方法

1.1 显示模式

1.2 交替背景色

1.3 添加条目

1.4 删除条目

1.5 信号槽

2. 案例

2.1 布局

2.2 代码实现

3. 图标模式-拓展

3.1 图标不对齐的问题

3.2 设置属性

3.3 代码中手动换行

【QT开发笔记-基础篇】| 第二章常用控件 | 2.11 列表框 QListWidget相关推荐

最新文章

热门文章

【QT开发笔记-基础篇】| 第二章 常用控件 | 2.11 列表框 QListWidget

本节对应的视频讲解：B_站_链_接

1. 属性和方法

1.1 显示模式

1.2 交替背景色

1.3 添加条目

1.4 删除条目

1.5 信号槽

2. 案例

2.1 布局

2.2 代码实现

3. 图标模式-拓展

3.1 图标不对齐的问题

3.2 设置属性

3.3 代码中手动换行

【QT开发笔记-基础篇】| 第二章 常用控件 | 2.11 列表框 QListWidget相关推荐

最新文章

热门文章

【QT开发笔记-基础篇】| 第二章常用控件 | 2.11 列表框 QListWidget

【QT开发笔记-基础篇】| 第二章常用控件 | 2.11 列表框 QListWidget相关推荐