Qt 模型视图 - QListWidget（1）

1 简要

QListWidget是一个便利的类，是用于显示列表的控件。它提供了一个类似于QListView所提供的列表视图，具有用于添加和删除项的经典的基于项的接口，QListWidget的内部模型由QListWidgetItem来管理。

• QListWidget的优势在于它易于使用，尤其是对于不熟悉模型-视图编程的开发人员来说，利用它可以快速构建一个列表窗口，并且可以支持多种操作，如复选框、图标等。
• QListView类相比之下更加灵活，它不需要使用QListWidget类的那些额外功能，因此更加轻量级，可以更方便地自定义实现。QListView可以使用QAbstractItemModel类或其子类作为数据模型，可以自定义项的展示方式和交互。

开发环境

• 系统：Window10
• Qt版本：5.14.2
• 编译器：MinGW_64

2 实现效果

3 实现步骤

3.1 创建一个自定义信息Item类

由于QListWidget类提供的函数只有添加QString、QListWidgetItem的项，无法满足自定义的需求。所以需要自定义一个继承自QWidget的信息类。并通过setItemWidget()函数将自己的类添加到Item里，这种方式的好处在于在Item里可以放很多不同的部件以及自定义布局等。

/**
 * @brief 自定义信息Item类
 */
class CustomizeItem : public QWidget
{
    Q_OBJECT
public:
    explicit CustomizeItem(QWidget *parent = nullptr);

    void setHeadPath(const QString &path);
    void setName(const QString &name);
    void setInfo(const QString &info);
    void setTime(const QString &time);

protected:
    bool eventFilter(QObject *watched, QEvent *event) override;
    void resizeEvent(QResizeEvent *event) override;
    void contextMenuEvent(QContextMenuEvent *event) override;

private:
    void initForm();

private:
    QWidget *m_head;        // 头像
    QLabel  *m_name;        // 名称
    QLabel  *m_info;        // 信息
    QLabel  *m_time;        // 时间
    QString m_headPath;     // 头像路径
    QMenu *m_menu;          // 右键菜单
};

再源文件里使用窗口的菜单策略来实现右键菜单，以及通过事件过滤器对头像进行绘制操作（也可以直接用样式表）。

// CustomizeItem构造
CustomizeItem::CustomizeItem(QWidget *parent) : QWidget(parent)
{
    initForm();
    setContextMenuPolicy(Qt::DefaultContextMenu);
}

// 重写事件处理器函数 contextMenuEvent()
void CustomizeItem::contextMenuEvent(QContextMenuEvent *event)
{
    Q_UNUSED(event)
    m_menu->exec(QCursor::pos()); // 右键菜单被模态显示出来了
}

// 绘制头像
bool CustomizeItem::eventFilter(QObject *watched, QEvent *event)
{
    if (watched == m_head) {
        if (event->type() == QEvent::Paint) {
            QPainter p(m_head);
            p.drawPixmap(m_head->rect(), QPixmap(m_headPath));
        }
    }
    return QWidget::eventFilter(watched, event);
}

3.2 在主窗口构造里添加

    for (int i = 0; i < 10; ++i) {
        CustomizeItem *item = new CustomizeItem(ui->listWidget);
//        item->setHeadPath(":/AlanYeager.jpg");
        item->setName("自定义Customize Item");
        item->setInfo("这是一个自定义Customize List Widget例子");
        item->setTime("04-26");

        QListWidgetItem *newItem = new QListWidgetItem;
        newItem->setSizeHint(QSize(ui->listWidget->width(), 70));
        ui->listWidget->insertItem(i, newItem);
        ui->listWidget->setItemWidget(newItem, item);
    }

3.3 样式表

QListWidget{
	background:white;
	color:black;
	border:none;
}
 
QListWidget::item{
	border:none;
}
 
QListWidget::item:hover{
    background:rgb(242,242,242)
}
 
QListWidget::item:selected{
	background:rgb(235,235,235);
}
 
QScrollBar:vertical {               
    background:transparent;
    width:9px;
    margin: 0px 0px 2px 0px;
}
 
QScrollBar::handle:vertical {
    background: rgb(215, 215, 215);
    min-height: 20px;
    border-radius: 3px;
}
 
QScrollBar::handle:vertical:hover{
    background:rgb(179, 179, 179);
}
 
QScrollBar::add-line:vertical {
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
 
QScrollBar::sub-line:vertical {
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

4 总结

• 所以如果只需要简单的列表展示，可以选择QListWidget类，适用于界面简单、功能单一的场景。
• 如果需要自定义的列表展示，并且需要处理复杂的交互和对数据源的操作，可以使用QListView类，适用于对灵活性和自定义能力要求较高的场景。
• 注：虽然QListWidget提供了更多的功能和易用性，但也因此更加消耗内存和资源，相比之下QListView会更加轻量级，因此在大数据量或频繁操作数据的场景中，应该选择QListView以提高效率。