QT的Listwidget控件

一、简介

Qt 中用于项（Item）处理的组件有两类，一类是 Item Views，包括 QListView、QTreeView、 QTableView、QColumnView 等；另一类是 Item Widgets，包括 QListWidget、QTreeWidget 和 QTable Widget。QListWidget其实是QListView的遍历类，QListView 是基于模型/视图（Model/View)结构，视图（View)与模型数据（Model Data)关联实现数据的显示和编辑；而QListWidget 可直接对每一项直接操作，所以对于一些简单的界面显示，可采用QListWidget ，如果对于一些复杂的显示，实现数据和界面显示分离，可采用QListView 。

二 列表模式实例

在使用过程中，我们大部分是使用代码来实现的

void Widget::InitListWidget()
{
  listWidget = new QListWidget(this);

  QListWidgetItem* pItem1 = new QListWidgetItem(QIcon(":/resources/kits.png"), "Kits");
  QListWidgetItem* pItem2 = new QListWidgetItem(QIcon(":/resources/env.png"), u8"环境");
  QListWidgetItem* pItem3 = new QListWidgetItem(QIcon(":/resources/editor.png"), u8"编辑器");
  QListWidgetItem* pItem4 = new QListWidgetItem(QIcon(":/resources/vim.png"), "FakeVim");
  QListWidgetItem* pItem5 = new QListWidgetItem(QIcon(":/resources/help.png"), u8"帮助");

  listWidget->addItem(pItem1);
  listWidget->addItem(pItem2);
  listWidget->addItem(pItem3);
  listWidget->addItem(pItem4);
  listWidget->addItem(pItem5);

  listWidget->setFixedHeight(600);
  listWidget->setFixedWidth(300);

  initRightMenu();

  //设置菜单策略，必须设置，不然无法显示菜单
  listWidget->setContextMenuPolicy(Qt::CustomContextMenu);

  //连接信号槽
  connect(listWidget, &QListWidget::customContextMenuRequested,
      this, &Widget::on_PopupRightMenu);
}

上面的代码只是实现ListWidget的初始化，在代码中添加了右键菜单。

private slots:
    void on_PopupRightMenu(const QPoint& pos);

右键菜单的初始化：

void Widget::on_PopupRightMenu(const QPoint& pos)
{
    QListWidgetItem* pItem = listWidget->itemAt(pos);
    if (!pItem)
    {
        return;
    }

    m_pRightMenu->exec(QCursor::pos());
}
void Widget::initRightMenu()
{

    m_pRightMenu = new QMenu(this);

      QAction* pAc1 = new QAction(u8"动作1", this);
      QAction* pAc2 = new QAction(u8"动作2", this);
      QAction* pAc3 = new QAction(u8"动作3", this);
      QAction* pAc4 = new QAction(u8"删除", this);

      m_pRightMenu->addAction(pAc1);
      m_pRightMenu->addAction(pAc2);
      m_pRightMenu->addAction(pAc3);
      m_pRightMenu->addAction(pAc4);

      connect(pAc1, &QAction::triggered, [=] {
          QMessageBox::information(this, "title", "ac1");
          });

      connect(pAc4, &QAction::triggered, [=] {

          QListWidgetItem* item = listWidget->currentItem();
          listWidget->removeItemWidget(item);
          delete item;
          });

}

常用设置

插入自定义控件

QListWidgetItem *item = new QListWidgetItem;
//创建自定义widget
QCustomWidget *customWidget = new QCustomWidget(this);
/*当前自定义控件的功能设置，这里不一一展示，每个人的要求不一样*/
customWidget->show(); //必须要写show哟~
//将自定义widget插入到列表中
ui.listWidget->addItem(item);
ui.listWidget->setItemWidget(item, customWidget);

文本对齐方式

QString qsContent = QStringLiteral("插入一条数据内容");
QListWidgetItem *item = new QListWidgetItem;
item->setText(qsContent);
/*以下是重点！！！*/
item->setTextAlignment(Qt::AlignLeft|Qt::AlignVenter);
ui.listWidget->addItem(item);

添加复选框方案一

QString qsContent = QStringLiteral("插入一条数据内容");
QListWidgetItem *item = new QListWidgetItem;
item->setText(qsContent);
item->setTextAlignment(Qt::AlignLeft|Qt::AlignVenter);
/*以下是重点！！！*/
item->setCheckState(Qt::Unchecked); //设置未选中状态
ui.listWidget->addItem(item);

何获取选中的效果呢？

void QLearnListWidget::OnListWidgetltemChanged(QListWidgetltem *item)
{
  //获取当前item的状态
  Qt::CheckState state = item->checkState0
if (state == Qt::Unchecked)
{
   //未被选中item->setCheckState(Qt::Checked);
}
else if (state == Qt::Checked)
{
   //选中后取消选中item->setCheckState(Qt::Unchecked)
}
}

优点：快捷方便获取
缺点：无法对内部的QCheckBox进行风格设置

嵌入QCheckBox控件 方案二

QString qsContent = QStringLiteral("插入一条数据内容");
QListWidgetItem *item = new QListWidgetItem;
QCheckBox *check = new QCheckBox(qsContent, ui.listWidget);
check->show();
ui.listWidget->addItem(item);
ui.listWidget->setItemWidget(item, check);

需要注意的是：必须先进行addItem，再setItemWidget。否则无法显示文本内容。
优点：可以任意修改checkbox的风格。
缺点：当点击到空白区域时，无法响应QListWidget的消息。因为该条目内被QCheckBox包围，只能对QCheckBox消息处理。
排序

   ui->listWidget->setSortingEnabled(true);//生效排序
    ui->listWidget->sortItems(Qt::DescendingOrder); //降序

显示方式

ui->listWidget->setViewMode(QListView::IconMode);

缩略图模式实现

代码实现如下：

void Widget::InitPicwidget()
{
    listWidget = new QListWidget(this);
    //自定义菜单策略
    listWidget->setContextMenuPolicy(Qt::CustomContextMenu);
    //设置视图显示方式为图标模式（图标在上，文字在下）
    listWidget->setViewMode(QListView::IconMode);
    //设置可以选择多项
    listWidget->setSelectionMode(QAbstractItemView::ExtendedSelection);
    //设置背景颜色,使每个子项之间的间距有颜色区别
    //ui->listWidget->setStyleSheet("background:transparent;");
    //设置无边框
    listWidget->setFrameShape(QFrame::NoFrame);
    //设置子项不能被拖拽
    listWidget->setDragEnabled(false);
    //设置子项每个图标的大小
    listWidget->setIconSize(QSize(200,200));
    //设置每个子项的大小固定
    listWidget->setUniformItemSizes(true);
    //设置QLisView大小改变时，图标的调整模式，默认是固定的，可以改成自动调整
    listWidget->setResizeMode(QListView::Adjust);
    //设置每个子项之间的间距
    listWidget->setSpacing(10);

    //设置样式，直接在函数中设置
    listWidget->setStyleSheet("QListWidget{border:1px solid gray; color:black;background:transparent;}"
                              "QListWidget::Item{padding-top:20px; padding-bottom:4px; }"
                              "QListWidget::Item:hover{background:skyblue; }"
                              "QListWidget::item:selected{background:lightgray; color:red; }"
                              "QListWidget::item:selected:!active{border-width:0px; background:lightgreen; }"
                              );
    listWidget->setFixedHeight(600);
    listWidget->setFixedWidth(300);
    // 插入数据
    for(int i=0; i<15; i++)
    {
        //创建子项，将图片作为icon，文件名作为文字描述
        QListWidgetItem *item = new QListWidgetItem;


        item->setIcon(QIcon(":/resources/kits.png"));
        //item->setSizeHint(QSize(100,50));
        //文件名作为子项的文字描述

        item->setText("Test_1");
        //设置文字对齐方向，水平居中
        item->setTextAlignment(Qt::AlignHCenter);

        //将item子项插入 listwidget控件中，或者在new子项的时候传入父控件相当于添加item
        listWidget->addItem(item);
    }
}

总结

从上面两种实现方式，大概是我们日常工作中使用的方法，当然上面只是简单的实现，如果真正要在正在的项目中实现还有一定距离，但这里我们在这里抛个砖吧。

代码实现