0
0

Qt之列表的使用（QListView、QListWidget）

QListView

将存储在模型中的项显示为简单的非层次列表或图标集合

常用方法：
void setModel(QAbstractItemModel *model) //设置模型
void setMovement(Movement movement) //设置数据是否可以任意拖动 QListView::Static:用户无法移动项目 QListView::Free //用户可以自由移动项目 QListView::Snap 用户可以自由移动项目，移动时项目会捕捉到指定的网格
void setSpacing(int space) //设置数据间距
自定义QListView：
继承QAbstractListModel，自定义model
继承QStyledItemDelegate，自定义Delegate

QListWidget

是“简易版”的 QListView，创建和使用列表的方式更简单、门槛更低，只能创建结构简单的列表，如果要制作复杂的列表，应优先考虑 QListView
在数据多的时候，QListWidget性能会降低
QListWidgetItem的子类，用于实现自定义的item
常用方法：
void addItem(const QString &label);//添加项
void addItem(QListWidgetItem *item);
QListWidgetItem *currentItem() const;//当前项
QListWidgetItem *takeItem(int row);//获取后删除该项
void insertItem(int row, QListWidgetItem *item);
void insertItem(int row, const QString &label);

自定义QListWidget：
继承widget，自定义widget
通过setItemWidget设置

代码

widgetlist.h

  2. #ifndef WIDGETLIST_H
  3. #define WIDGETLIST_H
  5. #include <QWidget>
  6. #include <QStringListModel>
  7. #include "customlistview.h"
  9. namespace Ui {
  10. class WidgetList;
  11. }
  13. class WidgetList : public QWidget
  14. {
  15.     Q_OBJECT
  17. public:
  18.     explicit WidgetList(QWidget *parent = nullptr);
  19.     ~WidgetList();
  21.     //ListView
  22.     void initListView();
  23.     //自定义ListView
  24.     void initCustomListView();
  26.     //ListWidget
  27.     void initListWidget();
  28.     //自定义ListWidget
  29.     void initCustomListWidget();
  30.     void addCustomListWidgetItem(const QString& sName, const QString& sDes, const QString& sPic);
  32. protected:
  33.     void changeEvent(QEvent* event);
  35. private slots:
  36.     //ListView
  37.     void on_btn_listview_get_clicked();
  38.     void on_btn_listview_delete_clicked();
  39.     void on_btn_listview_set_clicked();
  40.     void on_btn_listview_add_clicked();
  42.     //ListWidget
  43.     void on_btn_listwidget_get_clicked();
  44.     void on_btn_listwidget_delete_clicked();
  45.     void on_btn_listwidget_set_clicked();
  46.     void on_btn_listwidget_add_clicked();
  48. private:
  49.     void retranslateUi();
  51. private:
  52.     QStringListModel *m_pModel; //该数据模型，只能用于字符串
  54.     //自定义ListView
  55.     CustomListViewModel *m_pCustomModel;
  56.     CustomListViewDelegate *m_pCusDelegate;
  57. private:
  58.     Ui::WidgetList *ui;
  59. };
  61. #endif // WidgetList_H

widgetlist.cpp

  1. #include "widgetlist.h"
  2. #include "ui_widgetlist.h"
  3. #include "commondef.h"
  4. #include <QDateTime>
  5. #include <QStandardItem>
  7. #include "customlistwidgetitem.h"
  9. WidgetList::WidgetList(QWidget *parent) :
  10.     QWidget(parent),
  11.     ui(new Ui::WidgetList)
  12. {
  13.     ui->setupUi(this);
  14.     retranslateUi();
  16.     initListView();
  17.     initListWidget();
  19.     initCustomListView();
  20.     initCustomListWidget();
  21. }
  23. WidgetList::~WidgetList()
  24. {
  25.     delete ui;
  26. }
  28. /*************************
  29.  * QListView-初始化
  30.  * ***********************/
  31. void WidgetList::initListView()
  32. {
  33.     //1.创建数据显示列表
  34.     QStringList list;
  35.     for(int i = 0; i < 5; ++i)
  36.     {
  37.         list.append(QString("Item_%1").arg(i+1));
  38.     }
  40.     //2.使用数据列表创建数据显示模型
  41.     m_pModel = new QStringListModel(list);
  43.     //3.设置模型
  44.     ui->listView->setModel(m_pModel);
  45.     ui->listView->setMovement(QListView::Free);//设置数据可以自由拖动
  46.     ui->listView->setSpacing(2);//设置数据间隔
  47. }
  49. /*************************
  50.  * QListView-插入函数
  51.  * ***********************/
  52. void WidgetList::on_btn_listview_add_clicked()
  53. {
  54.     QString str = ui->lineEdit->text();
  55.     if(str.isEmpty())
  56.     {
  57.         MY_DEBUG << "The content of lineEdit is empty";
  58.         return;
  59.     }
  61.     //1.获取行数
  62.     int row = m_pModel->rowCount();
  63.     //2.插入新行
  64.     m_pModel->insertRow(row);
  65.     //3.获取插入行的索引index
  66.     QModelIndex index = m_pModel->index(row);
  67.     //4.通过index设置数据
  68.     m_pModel->setData(index, str);
  69.     //5.设置到当前index
  70.     ui->listView->setCurrentIndex(index);
  71. }
  73. /*************************
  74.  * QListView-删除函数
  75.  * ***********************/
  76. void WidgetList::on_btn_listview_delete_clicked()
  77. {
  78.     //1.获取当前的index
  79.     QModelIndex index = ui->listView->currentIndex();
  80.     if(-1 == index.row())
  81.     {
  82.         MY_DEBUG << "No Select One Item";
  83.         return;
  84.     }
  86.     //2.根据index删除行
  87.     m_pModel->removeRow(index.row());
  88. }
  90. /*************************
  91.  * QListView-修改函数
  92.  * ***********************/
  93. void WidgetList::on_btn_listview_set_clicked()
  94. {
  95.     QString str = ui->lineEdit->text();
  96.     if(str.isEmpty())
  97.     {
  98.         MY_DEBUG << "The content of lineEdit is empty";
  99.         return;
  100.     }
  102.     //1.获取当前的index
  103.     QModelIndex index = ui->listView->currentIndex();
  104.     if(-1 == index.row() || str.isEmpty())
  105.     {
  106.         return;
  107.     }
  109.     //2.通过index设置数据
  110.     m_pModel->setData(index, str);
  111. }
  113. /*************************
  114.  * QListView-获取函数
  115.  * ***********************/
  116. void WidgetList::on_btn_listview_get_clicked()
  117. {
  118.     //1.获取当前index
  119.     QModelIndex index = ui->listView->currentIndex();
  120.     if(-1 == index.row())
  121.     {
  122.         MY_DEBUG << "No Select One Item";
  123.         return;
  124.     }
  126.     //2.获取当前index的值
  127.     ui->lineEdit->setText(index.data(Qt::DisplayRole).toString());
  128. }
  130. /*************************
  131.  * QListView自定义-初始化
  132.  * ***********************/
  133. void WidgetList::initCustomListView()
  134. {
  135.    m_pCustomModel = new CustomListViewModel();
  136.    for (int i = 0; i < 5; ++i)
  137.    {
  138.        CUSTOM_DATA data;
  139.        data.m_bCheck = (i%2==0);
  140.        data.m_sDes = QString("Item_%1").arg(QString::number(i+1));
  141.        m_pCustomModel->insertData(data);
  142.    }
  144.    m_pCusDelegate = new CustomListViewDelegate();
  145.    ui->listView_2->setModel(m_pCustomModel);
  146.    ui->listView_2->setItemDelegate(m_pCusDelegate);
  147.    ui->listView_2->setMouseTracking(true);
  148. }
  149. /
  150. /*************************
  151.  * QListWidget-初始化
  152.  * ***********************/
  153. void WidgetList::initListWidget()
  154. {
  155.     for(int i = 0; i <5; ++i)
  156.     {
  157.         //1.使用addItem添加数据
  158.         ui->listWidget->addItem(tr("Item_") + QString::number(i+1));
  159.     }
  160. }
  162. /*************************
  163.  * QListWidget-添加函数
  164.  * ***********************/
  165. void WidgetList::on_btn_listwidget_add_clicked()
  166. {
  167.     QString str = ui->lineEdit_2->text();
  168.     if(str.isEmpty())
  169.     {
  170.         MY_DEBUG << "The content of lineEdit is empty";
  171.         return;
  172.     }
  174.     ui->listWidget->addItem(str);
  175. }
  177. /*************************
  178.  * QListWidget-删除函数
  179.  * ***********************/
  180. void WidgetList::on_btn_listwidget_delete_clicked()
  181. {
  182.     //1.判断当前项currentItem()
  183.     if(ui->listWidget->currentItem() != Q_NULLPTR)
  184.     {
  185.         //2.使用takeItem删除当前行
  186.         QListWidgetItem* Item = ui->listWidget->takeItem(ui->listWidget->currentRow());
  187.         delete Item;
  188.     }
  189. }
  191. /*************************
  192.  * QListWidget-修改函数
  193.  * ***********************/
  194. void WidgetList::on_btn_listwidget_set_clicked()
  195. {
  196.     QString str = ui->lineEdit_2->text();
  197.     if(str.isEmpty())
  198.     {
  199.         MY_DEBUG << "The content of lineEdit is empty";
  200.         return;
  201.     }
  203.     //1.判断当前项currentItem()
  204.     if(ui->listWidget->currentItem() != Q_NULLPTR)
  205.     {
  206.         //2.设置当前项内容
  207.         ui->listWidget->currentItem()->setText(str);
  208.     }
  209. }
  211. /*************************
  212.  * QListWidget-获取函数
  213.  * ***********************/
  214. void WidgetList::on_btn_listwidget_get_clicked()
  215. {
  216.     //1.判断当前项currentItem()
  217.     if(ui->listWidget->currentItem() != Q_NULLPTR)
  218.     {
  219.         //2.获取当前项数据
  220.         QListWidgetItem* Item = ui->listWidget->currentItem();
  221.         ui->lineEdit_2->setText(Item->data(Qt::DisplayRole).toString());
  222.     }
  223. }
  225. /*************************
  226.  * QListWidget自定义-初始化
  227.  * ***********************/
  228. void WidgetList::initCustomListWidget()
  229. {
  230.     ui->listWidget_2->setResizeMode(QListView::Adjust);
  231.     ui->listWidget_2->setViewMode(QListView::IconMode);
  233.     for(int i = 0; i < 5; ++i)
  234.     {
  235.         addCustomListWidgetItem(QString("Item_%1").arg(i+1),
  236.                                 QString("Item_Des_%1").arg(i+1),
  237.                                 QString(":/Resource/Image/WidgetList/person.jpg"));
  239.     }
  240. }
  242. /*************************
  243.  * QListWidget自定义-添加
  244.  * ***********************/
  245. void WidgetList::addCustomListWidgetItem(const QString &sName, const QString &sDes, const QString &sPic)
  246. {
  247.     //1.设置CustomItem数据
  248.     CustomListWidgetItem *pCustomItem = new CustomListWidgetItem(this);
  249.     pCustomItem->SetData(sName, sDes, sPic);
  251.     //2.添加QListWidgetItem
  252.     QListWidgetItem* pItem = new QListWidgetItem();
  253.     pItem->setSizeHint(QSize(350, 40));
  254.     ui->listWidget_2->addItem(pItem);
  256.     //3.通过setItemWidget设置Item
  257.     ui->listWidget_2->setItemWidget(pItem, pCustomItem);
  258. }
  259. /
  261. /*************************
  262.  * 语言翻译处理
  263.  * ***********************/
  264. void WidgetList::changeEvent(QEvent *event)
  265. {
  266.     switch(event->type())
  267.     {
  268.         case QEvent::LanguageChange:
  269.             retranslateUi();
  270.             break;
  271.         default:
  272.             QWidget::changeEvent(event);
  273.     }
  274. }
  276. void WidgetList::retranslateUi()
  277. {
  278.     ui->label->setText(tr("Use List View"));
  279.     ui->label_2->setText(tr("Use List Widget"));
  280.     ui->label_3->setText(tr("Use Custom List View"));
  281.     ui->label_4->setText(tr("Use Custom List Widget"));
  283.     ui->btn_listview_add->setText(tr("Add"));
  284.     ui->btn_listview_set->setText(tr("Set"));
  285.     ui->btn_listview_delete->setText(tr("Delete"));
  286.     ui->btn_listview_get->setText(tr("Get"));
  288.     ui->btn_listwidget_add->setText(tr("Add"));
  289.     ui->btn_listwidget_set->setText(tr("Set"));
  290.     ui->btn_listwidget_delete->setText(tr("Delete"));
  291.     ui->btn_listwidget_get->setText(tr("Get"));
  292. }

customlistview.h

  1. #ifndef CUSTOMLISTVIEW_H
  2. #define CUSTOMLISTVIEW_H
  4. #include <QAbstractListModel>
  5. #include <QStyledItemDelegate>
  6. #include <QListView>
  7. #include <QPainter>
  8. #include <QMouseEvent>
  10. //自定义数据
  11. typedef struct CUSTOM_DATA_T
  12. {
  13.     bool m_bCheck;
  14.     QString m_sDes;
  15. }CUSTOM_DATA;
  17. Q_DECLARE_METATYPE(CUSTOM_DATA)
  19. //自定义模型
  20. class CustomListViewModel : public QAbstractListModel
  21. {
  22.     Q_OBJECT
  24. public:
  25.     CustomListViewModel();
  26.     ~CustomListViewModel();
  28.     //插入数据
  29.     void insertData(CUSTOM_DATA data);
  30.     //获取总行数
  31.     int rowCount(const QModelIndex &parent) const;
  32.     //获取当前行数据
  33.     QVariant data(const QModelIndex &index, int role) const;
  34.     //设置当前行数据
  35.     bool setData(const QModelIndex &index, const QVariant &value, int role);
  37. private:
  38.     QList<CUSTOM_DATA> m_ListData;
  39. };
  41. //自定义模型视图-用于数据项目的显示和编辑
  42. class CustomListViewDelegate : public QStyledItemDelegate
  43. {
  44.     Q_OBJECT
  46. public:
  47.     CustomListViewDelegate();
  48.     ~CustomListViewDelegate();
  50.     //描绘画面显示
  51.     void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
  53.     //处理鼠标事件
  54.     bool editorEvent(QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option, const QModelIndex &index);
  55. };
  57. #endif // CUSTOMLISTVIEW_H

customlistview.cpp

  1. #include "customlistview.h"
  2. #include "commondef.h"
  4. CustomListViewModel::CustomListViewModel()
  5. {
  6. }
  8. CustomListViewModel::~CustomListViewModel()
  9. {
  10. }
  12. /*************************
  13.  * CustomListViewModel-插入数据
  14.  * ***********************/
  15. void CustomListViewModel::insertData(CUSTOM_DATA data)
  16. {
  17.     m_ListData.push_back(data);
  18. }
  20. /*************************
  21.  * CustomListViewModel-获取总行数
  22.  * ***********************/
  23. int CustomListViewModel::rowCount(const QModelIndex &parent) const
  24. {
  25.     return m_ListData.size();
  26. }
  28. /*************************
  29.  * CustomListViewModel-获取当前行数据
  30.  * ***********************/
  31. QVariant CustomListViewModel::data(const QModelIndex &index, int role) const
  32. {
  33.     QVariant ret;
  34.     int row = index.row();
  36.     if(row >= m_ListData.size() || (!index.isValid()))
  37.     {
  38.         return QVariant();
  39.     }
  41.     CUSTOM_DATA tmpData = m_ListData.at(row);
  42.     // 下面的role要和setData中的role一一对应；
  43.     switch(role)
  44.     {
  45.         case Qt::UserRole+1:
  46.             ret = tmpData.m_bCheck;
  47.             break;
  48.         case Qt::UserRole+2:
  49.             ret = tmpData.m_sDes;
  50.             break;
  51.         default :
  52.             break;
  53.     }
  54.     return ret;
  55. }
  57. /*************************
  58.  * CustomListViewModel-设置当前行数据
  59.  * ***********************/
  60. bool CustomListViewModel::setData(const QModelIndex &index, const QVariant &value, int role)
  61. {
  62.     bool bRet = false;
  63.     int nRow = index.row();
  65.     if(nRow >= m_ListData.size() || (!index.isValid()))
  66.     {
  67.         return false;
  68.     }
  70.     CUSTOM_DATA tmpData = m_ListData.at(nRow);
  72.     switch(role)
  73.     {
  74.         case Qt::UserRole+1:
  75.             tmpData.m_bCheck = value.toBool();
  76.             bRet = true;
  77.             break;
  78.         case Qt::UserRole+2:
  79.             tmpData.m_sDes = value.toString();
  80.             bRet = true;
  81.             break;
  82.         default :
  83.             break;
  84.     }
  86.     m_ListData.replace(nRow, tmpData);
  87.     return bRet;
  88. }
  90. CustomListViewDelegate::CustomListViewDelegate()
  91. {
  92. }
  94. CustomListViewDelegate::~CustomListViewDelegate()
  95. {
  96. }
  98. /*************************
  99.  * CustomListViewDelegate-绘制事件，用于显示
  100.  * ***********************/
  101. void CustomListViewDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
  102. {
  103.     QRect rect = option.rect;
  105.     //取数据
  106.     bool bCheck = index.data(Qt::UserRole+1).toBool();
  107.     QString sDes = index.data(Qt::UserRole+2).toString();
  109.     QStyleOptionViewItem viewoption(option);
  110.     initStyleOption(&viewoption, index);
  111.     if(option.state.testFlag(QStyle::State_HasFocus))
  112.     {
  113.         viewoption.state = viewoption.state^QStyle::State_HasFocus;
  114.     }
  115.     QStyledItemDelegate::paint(painter, viewoption, index);
  117.     //绘制checkbox
  118.     {
  119.         QRect checboxRec(rect.left() + 10, rect.top() + (rect.height()-14)/2, 14, 14);
  120.         if(bCheck)
  121.         {
  122.             QPixmap pix(":/Resource/Image/MainForm/select.png");
  123.             painter->drawPixmap(checboxRec, pix);
  124.         }
  125.         else
  126.         {
  127.             QPixmap pix(":/Resource/Image/MainForm/select_checked.png");
  128.             painter->drawPixmap(checboxRec, pix);
  129.         }
  130.     }
  132.     //绘制文本
  133.     {
  134.         painter->save();
  136.         //设置字体,颜色
  137.         QFont font;
  138.         font.setFamily("Microsoft YaHei");
  139.         font.setPixelSize(12);
  140.         painter->setFont(font);
  142.         QRect txtRec(rect.left() + 40, rect.top(), rect.width()-100, rect.height());
  143.         painter->drawText(txtRec, Qt::AlignLeft, sDes);
  145.         painter->restore();
  146.     }
  147. }
  149. /*************************
  150.  * CustomListViewDelegate-编辑事件
  151.  * ***********************/
  152. bool CustomListViewDelegate::editorEvent(QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option, const QModelIndex &index)
  153. {
  154.     QRect rect = option.rect;
  156.     //获取checkbox的rect
  157.     QRect checboxRec(rect.left() + 10, rect.top() + (rect.height()-14)/2, 14, 14);
  159.     //按钮点击事件，点击坐标是否在rect内
  160.     QMouseEvent *mevent = static_cast<QMouseEvent*>(event);
  161.     if(checboxRec.contains(mevent->pos()) && event->type() == QEvent::MouseButtonPress)
  162.     {
  163.         bool value = model->data(index, Qt::UserRole+1).toBool();
  164.         model->setData(index, !value, Qt::UserRole+1);
  165.         model->dataChanged(index, index);
  167.         //此处可以添加自定义信号，即使checbox点击信号；
  168.         MY_DEBUG << "Edit";
  169.     }
  171.     return QStyledItemDelegate::editorEvent(event, model, option, index);
  172. }

customlistwidgetitem.h

  1. #ifndef CUSTOMLISTWIDGETITEM_H
  2. #define CUSTOMLISTWIDGETITEM_H
  4. #include <QWidget>
  6. namespace Ui {
  7. class CustomListWidgetItem;
  8. }
  10. //自定义ListWidgetItem
  11. class CustomListWidgetItem : public QWidget
  12. {
  13.     Q_OBJECT
  15. public:
  16.     explicit CustomListWidgetItem(QWidget *parent = nullptr);
  17.     ~CustomListWidgetItem();
  19.     //设置数据
  20.     void SetData(const QString& sName, const QString& sDes, const QString& sPic);
  22. private:
  23.     Ui::CustomListWidgetItem *ui;
  24. };
  26. #endif // CUSTOMLISTWIDGETITEM_H

customlistwidgetitem.cpp

  1. #include "customlistwidgetitem.h"
  2. #include "ui_customlistwidgetitem.h"
  4. CustomListWidgetItem::CustomListWidgetItem(QWidget *parent) :
  5.     QWidget(parent),
  6.     ui(new Ui::CustomListWidgetItem)
  7. {
  8.     ui->setupUi(this);
  9. }
  11. CustomListWidgetItem::~CustomListWidgetItem()
  12. {
  13.     delete ui;
  14. }
  16. void CustomListWidgetItem::SetData(const QString &sName, const QString &sDes, const QString &sPic)
  17. {
  18.     ui->label_name->setText(sName);
  19.     ui->label_des->setText(sDes);
  21.     QPixmap pic(sPic);
  22.     int nWidth = ui->label_pic->width();
  23.     int nHeight = ui->label_pic->height();
  25.     //饱满填充
  26.     QPixmap pic_fit = pic.scaled(nWidth, nHeight, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
  27.     ui->label_pic->setPixmap(pic_fit);
  28. }

实现效果

在这里插入图片描述

工程下载地址：

https://download.csdn.net/download/linyibin_123/86512679

标签： qt ui 开发语言
本文转载自: https://blog.csdn.net/linyibin_123/article/details/126773179
版权归原作者 浅笑一斤 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Qt之列表的使用（QListView、QListWidget）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。