QT——使用QListWidget、QListWidgetItem、QWidget实现自定义管理列表
作者：小 琛
欢迎转载，请标明出处
文章目录
-
- 需求场景
- 思路描述
- Qt模块
-
- QListWidget
- QListWidgetItem
- 自定义QWidget配合QListWidget
- 例子：实现一个json文件管理窗口
需求场景
因工作需要，开发一个文件管理窗口，要让使用者可以对若干文件进行一系列操作。本文着重讲述ui实现，如何作出一个漂亮的列表
思路描述
这里仅描述思路，如果你对Qt并不熟悉，大致了解一下即可，后文会描述具体用法
- 利用Qt提供的类：QListWidget、QListWidgetItem，其中QListWidget为列表类，QListWidgetItem可以理解为每一项的数据类
- 原生的QListWidget一定不能满足我们的需求，因此我们构建一个类继承自QListWidget，在子类中重新定义ui风格
- 在2中，我们做到了自定义列表，但列表内的具体每一项内容仍然是原生的，因此我们可以自定义一个QWidget，这个widget可以根据我们具体的场景绘制，在插入的时候，使用我们的自定义QWidget作为每一项内容
- QListWidgetItem是列表插入必不可少的，并且我们制作列表时，一定会用到一些数据，也可以用它来存储
Qt模块
QListWidget
QListWidget是一个列表控件，可以显示一个可滚动的列表，列表项可以是纯文本、图标或者自定义控件。QListWidget使用QListWidgetItem来表示列表项，每个QListWidgetItem可以设置列表项的文本、图标和状态。
下面是一些QListWidget的常见用法：
- 添加列表项
可以使用addItem()方法添加一个列表项，可以设置列表项的文本和图标：
QListWidget *listWidget = new QListWidget(this);
// 添加纯文本列表项
listWidget->addItem("Item 1");
// 添加带图标的列表项
QListWidgetItem *item2 = new QListWidgetItem(QIcon(":/images/icon.png"), "Item 2");
listWidget->addItem(item2);
// 添加自定义控件
QLabel *label = new QLabel("Item 3");
QListWidgetItem *item3 = new QListWidgetItem();
listWidget->addItem(item3);
listWidget->setItemWidget(item3, label);
- 获取当前选中的列表项
可以使用currentItem()方法获取当前选中的列表项：
QListWidgetItem *item = listWidget->currentItem();
if (item) {
qDebug() << "Selected item: " << item->text();
}
- 设置列表项的状态
可以使用setCheckState()方法设置列表项的状态，使得列表项可以被选中或未选中：
QListWidgetItem *item = new QListWidgetItem("Item 1");
item->setFlags(item->flags() | Qt::ItemIsUserCheckable); // 开启用户可选中的标志
item->setCheckState(Qt::Unchecked); // 初始为未选中状态
listWidget->addItem(item);
- 删除列表项
可以使用takeItem()方法删除一个列表项：
QListWidgetItem *item = listWidget->currentItem();
if (item) {
listWidget->takeItem(listWidget->row(item)); // 删除当前选中的列表项
}
QListWidgetItem
QListWidgetItem是QListWidget中的列表项，每个QListWidget中的列表项都是一个QListWidgetItem对象。QListWidgetItem包含了列表项的文本、图标、状态等信息，可以通过QListWidgetItem的方法来设置和获取这些信息。
下面是一些常见的QListWidgetItem的用法：
- 设置列表项的文本和图标
可以使用setText()方法和setIcon()方法设置列表项的文本和图标：
QListWidgetItem *item = new QListWidgetItem();
item->setText("Item 1");
item->setIcon(QIcon(":/images/icon.png"));
listWidget->addItem(item);
- 获取列表项的文本和图标
可以使用text()方法和icon()方法获取列表项的文本和图标：
QListWidgetItem *item = listWidget->currentItem();
if (item) {
QString text = item->text();
QIcon icon = item->icon();
}
- 设置列表项的状态
可以使用setCheckState()方法设置列表项的状态，使得列表项可以被选中或未选中：
QListWidgetItem *item = new QListWidgetItem();
item->setFlags(item->flags() | Qt::ItemIsUserCheckable); // 开启用户可选中的标志
item->setCheckState(Qt::Unchecked); // 初始为未选中状态
listWidget->addItem(item);
- 获取列表项的状态
可以使用checkState()方法获取列表项的状态，返回值为Qt::CheckState枚举类型，表示列表项的选中状态：
QListWidgetItem *item = listWidget->currentItem();
if (item) {
Qt::CheckState state = item->checkState();
}
- 自定义列表项
可以使用QListWidgetItem的方法setItemWidget()方法设置自定义控件作为列表项：
QLabel *label = new QLabel("Custom Item");
QListWidgetItem *item = new QListWidgetItem();
listWidget->addItem(item);
listWidget->setItemWidget(item, label);
自定义QWidget配合QListWidget
在使用QListWidget时，有时需要自定义列表项的内容，此时可以使用QWidget作为列表项的内容。QWidget可以是任何自定义控件，例如QPushButton、QLabel等。也就是说，你可以自定义一个任意构建的widget，将其作为列表的每一项内容。
例子：实现一个json文件管理窗口
文件构造：
JsonListWidget.h+JsonListWidget.cpp
JsonListWidgetItem.h+JsonListWidgetItem.cpp
JsonItemWidget.h+JsonItemWidget.cpp
注意的点：
- 下面的例子，并不能直接运行，因为包含了很多我自定义的控件，仅限于了解整个结构
- 整个设计：JsonItemWidget是我的自定义widget，里面包含了我定义每一项的具体内容，其中的控件被触发时绑定信号，JsonItemWidget再绑定widget中的信号，实现事件的抛；JsonListWidget是列表项，修改了很多属性来实现我想要的ui效果；JsonListWidgetItem是自定义的Item，其中预留了operate >，该接口可以完成自定义排序功能；插入的时候，调用setItemWidget接口完成
JsonListWidget.h
#pragma once
#include JsonListWidget.cpp
#include "JsonListWidget.h"
#include "JsonListItem.h"
#include "NemuColor.h"
#include "AppUtil.h"
#include JsonItemWidget.h
#pragma once
#include JsonItemWidget.cpp
#include "JsonListItem.h"
#include "../../common/RecorderPushButton.h"
#include "../../common/RecorderTextLabel.h"
#include "nemu-ui-lib/control/NemuImage.h"
#include "nemu-ui-lib/control/NemuRichText.h"
#include "nemu-ui-lib/control/NemuCheckBox.h"
#include "nemu-ui-lib/control/NemuLine.h"
#include "nemu-ui-lib/control/NemuLineEdit.h"
#include "nemu-ui-lib/font/NemuFont.h"
#include "nemu-ui-lib/color/NemuColor.h"
#include %2
")
.arg(getGrey2().name(QColor::HexArgb))
.arg(date);
dateLabel_->updateText(dateHtmlText);
dateLabel_->setFixedWidth(dateLabel_->adaptiveWidth(date, getFont12()));
}
void JsonListItem::setJsonTime(const QString& time) {
time_ = time;
const auto dateHtmlText = QString("%2
")
.arg(NemuUiLib::NemuColor::getGrey2().name(QColor::HexArgb))
.arg(time);
timeLabel_->updateText(dateHtmlText);
timeLabel_->setFixedWidth(timeLabel_->adaptiveWidth(time, getFont12()));
}
void JsonListItem::setJsonScreen(const QString& screen) {
screen_ = screen;
const auto screenHtmlText = QString("%2
")
.arg(getGrey2().name(QColor::HexArgb))
.arg(screen_);
screenLabel_->updateText(screenHtmlText);
screenLabel_->setFixedWidth(timeLabel_->adaptiveWidth(screen, getFont12()));
}
void JsonListItem::setModifyTime(quint64 time) {}
void JsonListItem::enterEvent(QEvent* event) {
QWidget::enterEvent(event);
}
void JsonListItem::leaveEvent(QEvent* event) {
if (renameEdit_ && renameEdit_->isVisible()) {
if (!renameEdit_->hasFocus()) {
renameEdit_->setVisible(false);
elidedName(nameLabel_, name_);
}
}
QWidget::leaveEvent(event);
}
void JsonListItem::focusOutEvent(QFocusEvent* event) {
if (renameEdit_) {
renameEdit_->setVisible(false);
}
QWidget::focusOutEvent(event);
}
void JsonListItem::showNameLabel() {
renameEdit_->setVisible(false);
elidedName(nameLabel_, name_);
}
void JsonListItem::showRenameEdit() {
nameLabel_->clear();
auto pos = nameLabel_->geometry();
ensureRenameEdit();
QSize sz = renameEdit_->size();
renameEdit_->setGeometry(pos.x() + 40, pos.y() + 18, sz.width(), sz.height());
renameEdit_->setText(name_);
renameEdit_->setVisible(true);
}
bool JsonListItem::eventFilter(QObject* object, QEvent* event) {
if (object == renameEdit_) {
if (event->type() == QEvent::FocusOut && !mouseEntered_) {
showNameLabel();
}
} else if (object == this) {
if (event->type() == QEvent::Enter) {
mouseEntered_ = true;
if (renameEdit_ && renameEdit_->isVisible()) {
if (!renameEdit_->hasFocus()) {
showNameLabel();
}
} else {
showRenameEdit();
}
} else if (event->type() == QEvent::Leave) {
mouseEntered_ = false;
if (renameEdit_ && !renameEdit_->hasFocus()) {
showNameLabel();
}
}
} else if (object != renameEdit_) {
if (renameEdit_ && !renameEdit_->hasFocus()) {
showNameLabel();
}
}
return QWidget::eventFilter(object, event);
}
void JsonListItem::ensureRenameEdit() {
if (renameEdit_) {
return;
}
renameEdit_ = new QLineEdit(this);
renameEdit_->setContextMenuPolicy(Qt::NoContextMenu);
renameEdit_->setMaxLength(40);
renameEdit_->setValidator(
new QRegularExpressionValidator(QRegularExpression("^((?!\\\\|\\/|:|\\*|\\?|\"|<|>|\\|).)*$"), this));
renameEdit_->setFixedSize(300, 24);
renameEdit_->setFont(NemuUiLib::NemuFont::getFont12());
renameEdit_->installEventFilter(this);
renameEdit_->setStyleSheet(
QString("QLineEdit{border-width:1px; border-style:solid; border-color:%1; padding-left:8px; padding-right:8px;"
"background-color: %1; color: %2; border-radius:2px;}"
"QLineEdit:hover{border-width:1px; border-style:solid; border-color:%3; background-color:%3;}"
"QLineEdit:focus{border-width:1px; border-style:solid; border-color:%4; background-color:%5; }")
.arg(getFill1().name(QColor::HexArgb))
.arg(getWhite1().name(QColor::HexArgb))
.arg(getFill2().name(QColor::HexArgb))
.arg(getBrand1().name(QColor::HexArgb))
.arg(getFill5().name(QColor::HexArgb)));
connect(renameEdit_, &QLineEdit::editingFinished, this, [this]() {
QString newName = renameEdit_->text();
if (!newName.isEmpty() && newName != name_) {
emit sigNameChanged(name_, newName);
}
});
connect(renameEdit_, &QLineEdit::returnPressed, this, [this]() {
QString newName = renameEdit_->text();
if (!newName.isEmpty() && newName != name_) {
emit sigNameChanged(name_, newName);
}
renameEdit_->setVisible(false);
elidedName(nameLabel_, name_);
});
}
void JsonListItem::elidedName(QLabel* label, const QString& name) {
QFontMetrics fontWidth(label->font());
int contentWidth = label->width() - label->document()->documentMargin() * 2;
label->setText(fontWidth.elidedText(name, Qt::ElideRight, contentWidth));
label->setFixedHeight(24);
}
JsonListWidgetItem.h
#pragma once
#include JsonListWidgetItem.cpp
#include "JsonWidgetItem.h"
#include "JsonWidget.h"
#include