discuz做的网站怎么修改,龙岩58同城,网页生成快捷方式带图标,吴江区城乡建设局网站在大规模列表控件的显示需求中#xff0c;必须解决2个问题才能获得较好的性能#xff1a;
第一就是数据存在哪里#xff0c; 避免出现数据的副本。第二就是如何展示Item#xff0c;如何复用或避免创建大量的Item控件。
在QListView体系里#xff0c;QAbstractListModel解…在大规模列表控件的显示需求中必须解决2个问题才能获得较好的性能
第一就是数据存在哪里 避免出现数据的副本。第二就是如何展示Item如何复用或避免创建大量的Item控件。
在QListView体系里QAbstractListModel解决的是“数据存哪”解决的是第一个问题而QAbstractItemDelegate解决的是数据“如何展示”解决的是第二个问题。
因此在大规模列表的编写代码中高效的数据存储和高效的数据UI展示需要用到这两个类。接下来我们通过三个例子循序渐进地介绍QListView使读者掌握QListView的使用技巧和设计思想。
示例 1: 使用 QListWidget 的基本用法
QListWidget 是一个方便的控件它内部管理了一个项目列表并提供了一些简单的接口来添加、删除和修改这些项目。但没有对数据存储和数据展示进行过多的优化这种方式适合于简单的应用场景其中列表的大小不会很大因为每个项目都会被存储为一个 QListWidgetItem 对象。
#include QApplication
#include QListWidgetint main(int argc, char *argv[]) {QApplication app(argc, argv); QListWidget* listWidget new QListWidget;for (int i 0; i 100; i) {listWidget-addItem(QString(项目 %1).arg(i));}listWidget-show(); return app.exec();
}尽管这种方式使用起来非常简单但它并不适合处理大量数据。因为 QListWidget 会为每个项目创建一个 QListWidgetItem 对象这将导致大量的内存消耗。
示例 2: 使用 QListView 和 QAbstractItemDelegate解决数据存哪的问题
在这个示例中我们将直接从 QAbstractListModel 派生一个Model类而不是使用 addItem构造大量的ItemData。这样我们就无需存储这些数据。这个方法在处理具有可预知数据模式的大量数据时特别有用因为它避免了冗余的数据存储和内存开销。
首先我们定义一个 SyntheticListModel 类它继承自 QAbstractListModel。这个模型将根据索引动态生成数据项
#include QAbstractListModel
#include QVariant
#include QModelIndexclass SyntheticListModel : public QAbstractListModel {Q_OBJECTpublic:SyntheticListModel(int numItems, QObject *parent nullptr): QAbstractListModel(parent), m_numItems(numItems) {}int rowCount(const QModelIndex parent QModelIndex()) const override {// 在顶层返回项的数量否则返回0因为这是一个列表没有子项return parent.isValid() ? 0 : m_numItems;}QVariant data(const QModelIndex index, int role Qt::DisplayRole) const override {if (index.isValid() index.row() m_numItems) {if (role Qt::DisplayRole) {// 根据行号动态生成数据return QString(项目 %1).arg(index.row());}// 可以根据需要添加其他角色的处理}return QVariant(); // 无效索引或角色时返回无效的QVariant}private:int m_numItems; // 列表中项目的数量
};然后我们创建一个简单的 QStyledItemDelegate这个委托可以根据需要自定义项的显示方式
#include QStyledItemDelegate
#include QPainterclass SimpleDelegate : public QStyledItemDelegate {Q_OBJECTpublic:using QStyledItemDelegate::QStyledItemDelegate; // 继承构造函数// 重写 paint 方法以自定义项目显示方式void paint(QPainter *painter, const QStyleOptionViewItem option, const QModelIndex index) const override {// 调用基类的 paint 方法进行默认的绘制QStyledItemDelegate::paint(painter, option, index);// 可以添加额外的绘制代码如绘制边框、背景等}// 如果需要可以重写 createEditor、setEditorData、setModelData 等方法以自定义编辑行为
};最后我们在 main 函数中创建 QListView并将其与我们的自定义模型和委托相连接
#include QApplication
#include QListViewint main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建列表视图QListView listView;// 创建模型这里我们创建了 100000 个假数据项SyntheticListModel model(100000);// 创建委托SimpleDelegate delegate;// 将模型和委托设置到列表视图listView.setModel(model);listView.setItemDelegate(delegate);listView.show();return app.exec();
}在这个示例中我们展示了如何使用 QListView 和自定义的 QAbstractListModel 来动态生成数据而不需要在内存中维护一份数据存储的副本。在实际业务中数据可以直接从业务模块中获取这样避免出现数据的两个副本。SimpleDelegate 负责定制列表项的视觉呈现但在这个简化的例子中我们仅使用了默认的绘制逻辑。如果需要更复杂的项显示或编辑功能可以在委托中进一步扩展 paint 和其他相关方法。这些内容我们在示例3中展现。
示例 3: 使用 QListView 和自定义 QAbstractListModel解决数据如何展示问题
实例2中没有展开SimpleDelegate 的实现在实际开发场景中界面展示的需求往往更加复杂特别是QListView的View模型采用的是paint函数来呈现和其他图形界面框架如AndroidFramework构造一个QWidget*控件的形式不同paint的形式用起来更复杂但性能天花板更高。
下面是一个使用自定义模型 LargeListModel 和委托 SimpleDelegate 的例子。在这个示例中我们将创建一个自定义的 QAbstractListModel 类名为 LargeListModel它将处理大量数据项。此外我们还将扩展 SimpleDelegate 类来自定义 QListView 中项的视觉呈现。这个委托将负责绘制项的背景、文本和一些装饰元素从而提供更丰富的用户界面。
首先我们定义 LargeListModel 类该类派生自 QAbstractListModel
#include QAbstractListModelclass LargeListModel : public QAbstractListModel {Q_OBJECT
public:explicit LargeListModel(int numItems, QObject *parent nullptr): QAbstractListModel(parent), m_numItems(numItems) {}int rowCount(const QModelIndex parent QModelIndex()) const override {return parent.isValid() ? 0 : m_numItems;}QVariant data(const QModelIndex index, int role Qt::DisplayRole) const override {if (!index.isValid() || index.row() m_numItems)return QVariant();switch (role) {case Qt::DisplayRole:// 动态生成显示的数据return QStringLiteral(Item %1).arg(index.row());// 这里可以根据需要添加对其他角色的处理default:return QVariant();}}private:int m_numItems; // 数据项的数量
};接下来我们将自定义 SimpleDelegate 类以便在 QListView 中渲染更复杂的项
#include QStyledItemDelegate
#include QPainterclass SimpleDelegate : public QStyledItemDelegate {
public:using QStyledItemDelegate::QStyledItemDelegate; // 继承构造函数void paint(QPainter *painter, const QStyleOptionViewItem option, const QModelIndex index) const override {// 保存当前的绘图状态painter-save();// 绘制项的背景if (option.state QStyle::State_Selected) {painter-fillRect(option.rect, option.palette.highlight());} else {painter-fillRect(option.rect, option.palette.base());}// 绘制自定义内容例如文本QString text index.data(Qt::DisplayRole).toString();painter-drawText(option.rect, Qt::AlignLeft | Qt::AlignVCenter, text);// 还原绘图状态painter-restore();}// 如果需要项的大小不是默认值可以重写 sizeHint 方法QSize sizeHint(const QStyleOptionViewItem option, const QModelIndex index) const override {return QSize(option.rect.width(), 50); // 设置项的高度为50}
};最后我们在 main 函数中创建 QListView设置自定义的模型和委托并显示它们
#include QApplication
#include QListViewint main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建自定义模型和委托LargeListModel *model new LargeListModel(100000); // 假设有 10 万个数据项SimpleDelegate *delegate new SimpleDelegate();// 创建并设置 QListViewQListView listView;listView.setModel(model);listView.setItemDelegate(delegate);// 设置其他视图属性如果需要listView.setSelectionMode(QAbstractItemView::SingleSelection);listView.setAlternatingRowColors(true); // 设置交替行颜色listView.show();return app.exec();
}在这个示例中LargeListModel 负责提供数据项而 SimpleDelegate 负责自定义每个项的绘制。这种方法使得处理大量数据项时能够保持高性能同时提供了丰富的视觉呈现和用户交互能力。通过委托的 paint 方法我们可以绘制文本、图标、背景或任何其他图形元素来增强用户界面的视觉效果。通过重写 sizeHint 方法我们可以为每个项定制大小以适应不同的内容和设计需求。
这种模型-视图-委托的方法为高效地处理和展示大型数据集提供了灵活的解决方案使得开发者可以在保持应用程序性能的同时实现复杂且具有吸引力的用户界面。
进一步优化处理大量动态数据
以上示例已经展示了如何使用 QListView 和自定义模型以及委托来处理静态数据。但在实际应用中我们可能需要处理动态变化的数据集其中项目可能会被添加、移除或更新。为了保持UI的响应性和数据的一致性我们需要在模型中正确地处理这些变化。
数据添加示例
假设我们的 LargeListModel 需要动态添加数据我们可以在模型中实现添加数据的逻辑并通知视图更新
class LargeListModel : public QAbstractListModel {// ...省略已有代码public:// ...省略已有代码// 添加新项的方法void addItem(const QString title) {const int index itemCount;beginInsertRows(QModelIndex(), index, index);titles.append(title);checkedItems.insert(index, false);itemCount;endInsertRows();}// ...省略已有代码
};// 使用示例
int main(int argc, char *argv[]) {QApplication app(argc, argv);// ...省略已有代码LargeListModel* model new LargeListModel(0); // 初始时没有数据// ...省略已有代码// 动态添加数据for (int i 0; i 100000; i) {model-addItem(QString(动态项目 %1).arg(i));}// ...省略已有代码return app.exec();
}在这个例子中我们通过 addItem 方法在模型中添加新的数据项。在添加数据之前和之后我们分别调用 beginInsertRows 和 endInsertRows 方法这样 QListView 就会自动更新显示新添加的数据。
数据更新示例
如果我们需要更新现有数据我们同样需要确保视图能够得到通知
class LargeListModel : public QAbstractListModel {// ...省略已有代码public:// ...省略已有代码// 更新某项的方法void updateItem(int index, const QString newTitle) {if(index 0 index itemCount) {titles[index] newTitle;QModelIndex modelIndex createIndex(index, 0);emit dataChanged(modelIndex, modelIndex);}}// ...省略已有代码
};在这里我们通过 updateItem 方法更新一条数据并通过 dataChanged 信号告知视图特定项的数据已经改变。createIndex 方法用来创建一个指向已更新项的 QModelIndex 对象这是发出 dataChanged 信号所必需的。
性能注意事项
处理大量数据时以下是一些提高性能的常见做法
使用 beginInsertRows 和 endInsertRows或对应的删除和更新版本时请确保避免同时进行大量的单独插入或删除操作因为这会导致视图频繁更新从而降低性能。相反应该批量插入或删除。避免在 data 方法中执行耗时的计算。如果需要可以将数据缓存或使用后台线程来准备数据。如果列表项的大小是固定的使用 setUniformItemSizes(true) 可以提高滚动和渲染的性能。如果数据的读取是昂贵的操作考虑实现延迟加载或数据分页这样只有当数据真正需要显示时才读取。 一个更复杂的完整例子
刚刚我们循序渐进地了解了QListView高性能大规模列表的设计思想和实现步骤接下来我们实现一个稍微复杂的例子这个例子在列表的每一项中增加了一个复选框和一个按钮表示这是一个复杂列表项的呈现。
#include QApplication
#include QCheckBox
#include QListView
#include QPainter
#include QPushButton
#include QStandardItemModel
#include QStyledItemDelegate
#include QAbstractListModel
#include QHash
#include QVariantclass LargeListModel : public QAbstractListModel {
public:LargeListModel(int numItems, QObject* parent nullptr): QAbstractListModel(parent), itemCount(numItems) {titles.resize(itemCount); // 初始化标题数组for (int i 0; i itemCount; i) {titles[i] QString(标题文本 %1).arg(i); // 生成初始标题文本}}int rowCount(const QModelIndex parent QModelIndex()) const override {if (parent.isValid()) {return 0;}return itemCount;}QVariant data(const QModelIndex index, int role Qt::DisplayRole) const override {if (!index.isValid() || index.row() itemCount || index.row() 0) {return QVariant();}switch (role) {case Qt::DisplayRole:return titles.at(index.row());case Qt::CheckStateRole:{auto it checkedItems.find(index.row());if (it ! checkedItems.end()) {return QVariant(it.value() ? Qt::Checked : Qt::Unchecked);}return QVariant(Qt::Unchecked);}case Qt::EditRole: // 处理编辑角色return titles[index.row()];default:return QVariant();}}bool setData(const QModelIndex index, const QVariant value, int role Qt::EditRole) override {if (!index.isValid() || index.row() itemCount || index.row() 0)return false;switch (role) {case Qt::CheckStateRole:// 更新 checkedItems记录复选框的状态checkedItems[index.row()] (value.toBool());emit dataChanged(index, index, { role });return true;case Qt::EditRole:// 更新标题文本titles[index.row()] value.toString();emit dataChanged(index, index, { role });return true;default:return false;}}Qt::ItemFlags flags(const QModelIndex index) const override {if (!index.isValid())return Qt::NoItemFlags;// 添加 Qt::ItemIsEditable 以支持编辑return Qt::ItemIsEnabled | Qt::ItemIsSelectable | Qt::ItemIsUserCheckable | Qt::ItemIsEditable;}private:int itemCount;mutable QHashint, bool checkedItems; // 存储复选框的状态QVectorQString titles; // 存储标题文本
};// 自定义委托来绘制和处理列表项
class CustomDelegate : public QStyledItemDelegate {
public:CustomDelegate(QObject* parent nullptr) : QStyledItemDelegate(parent) {}// 绘制列表项void paint(QPainter* painter, const QStyleOptionViewItem option, const QModelIndex index) const override {QStyleOptionButton buttonOption;QRect buttonRect QRect(option.rect.right() - 80, option.rect.y() 1, 78, option.rect.height() - 2);buttonOption.rect buttonRect;QStyleOptionButton checkboxOption;QRect checkboxRect QRect(option.rect.x() 5, option.rect.y() 5, option.rect.height() - 10, option.rect.height() - 10);checkboxOption.rect checkboxRect;checkboxOption.state | QStyle::State_Enabled;if (index.data(Qt::CheckStateRole).toBool()) {checkboxOption.state | QStyle::State_On;} else {checkboxOption.state | QStyle::State_Off;}painter-save();if (option.state QStyle::State_MouseOver) {painter-fillRect(option.rect, option.palette.light());}// 根据是否有鼠标悬停绘制高亮背景if (option.state QStyle::State_MouseOver) {QRect highlightRect option.rect;painter-fillRect(highlightRect, option.palette.highlight());}// 绘制复选框QApplication::style()-drawControl(QStyle::CE_CheckBox, checkboxOption, painter);// 绘制按钮buttonOption.text 按钮;QApplication::style()-drawControl(QStyle::CE_PushButton, buttonOption, painter);// 绘制文本QRect textRect option.rect.adjusted(checkboxRect.width() 10, 0, -buttonRect.width() - 10, 0);painter-drawText(textRect, Qt::AlignVCenter, index.data().toString());painter-restore();}// 处理事件如复选框的点击bool editorEvent(QEvent* event, QAbstractItemModel* model, const QStyleOptionViewItem option, const QModelIndex index) override {if (event-type() QEvent::MouseButtonRelease) {QMouseEvent* mouseEvent static_castQMouseEvent*(event);QRect buttonRect QRect(option.rect.right() - 80, option.rect.y() 5, 70, option.rect.height() - 10);QRect checkboxRect QRect(option.rect.x() 5, option.rect.y() 5, option.rect.height() - 10, option.rect.height() - 10);if (buttonRect.contains(mouseEvent-pos())) {// 按钮被点击qDebug() 按钮点击项 index.row();} else if (checkboxRect.contains(mouseEvent-pos())) {// 切换复选框状态bool checked !index.data(Qt::CheckStateRole).toBool();model-setData(index, checked ? Qt::Checked : Qt::Unchecked, Qt::CheckStateRole);qDebug() 勾选checkbox项 index.row();}return true; // 事件已处理}return QStyledItemDelegate::editorEvent(event, model, option, index);}// 提供项的大小提示QSize sizeHint(const QStyleOptionViewItem option, const QModelIndex index) const override {return QSize(option.rect.width(), 34); // 调整为所需的大小}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);QListView* listView new QListView;auto insertCount 100000;// 构造展示10w条数据CustomDelegate* delegate new CustomDelegate(listView);listView-setModel(new LargeListModel(insertCount));listView-setItemDelegate(delegate);// 优化性能listView-setUniformItemSizes(true);listView-setSelectionMode(QAbstractItemView::SingleSelection);listView-show();return app.exec();
}展示效果
结语
通过遵循上述模式和性能最佳实践可以更好地创建强大的、响应迅速的 Qt 应用程序。
简而言之在QListView体系里QAbstractListModel解决的是“数据存哪”而QAbstractItemDelegate解决的是数据“如何展示”。这种模型/视图和委托的架构是 Qt 高效数据处理的基石使得复杂的UI设计和数据操作变得可管理和可扩展。
