创建一个自己的列表窗口

---

背景：

在QT的设计中，对于控件库提供的控件满足不了项目的需求，就像自定义一些控件，本文是自定义一个列表窗口。

效果展示

下面是本文的正文部分了，如果你也想创建一个炫酷的控件，跟着操作就可以了。

一、创建基本的QT模板：

1.创建mainwindow

2.创建VerticalTextDelegate

名称选择这个：VerticalTextDelegate

如果前面的步骤都正确，目录应该如上图所示，打开mainwindow.ui，插入一个listweight。

二： 插入图片：

准备放在列表窗口里面的图片，文件夹命名qrc，放在你创建的qt文件目录下

右键项目：添加现有文件：

选择打开，出现如下页面：

点击是即可

继续添加资源文件。

三：代码填充：

按照顺序和最上面一行填充代码：

// mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QListWidgetItem>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    void addListWidgetItem(const QString &iconPath, const QString &text);
};

#endif // MAINWINDOW_H

// verticaltextdelegate.h
#ifndef VERTICALTEXTDELEGATE_H
#define VERTICALTEXTDELEGATE_H

#include <QStyledItemDelegate>

class VerticalTextDelegate : public QStyledItemDelegate
{
    Q_OBJECT

public:
    explicit VerticalTextDelegate(QObject *parent = nullptr);
    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override;
};

#endif // VERTICALTEXTDELEGATE_H

// verticaltextdelegate.cpp
#include "verticaltextdelegate.h"
#include <QPainter>
#include <QApplication>
#include <QBrush>
#include <QRect>

VerticalTextDelegate::VerticalTextDelegate(QObject *parent) : QStyledItemDelegate(parent) {}

void VerticalTextDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const {
    QStyleOptionViewItem opt = option;
    initStyleOption(&opt, index);
    int x = opt.rect.left();
    int y = opt.rect.top();

    // 绘制图标
    const QIcon &icon = qvariant_cast<QIcon>(index.data(Qt::DecorationRole));
    QRect iconRect(x, y, opt.rect.height(), opt.rect.height());
    QPixmap pixmap = icon.pixmap(iconRect.size());
    painter->drawPixmap(iconRect, pixmap);

    // 绘制位于图标右侧的文本描述（姓名，年龄，性别）
    QString text = index.data(Qt::DisplayRole).toString();
    QStringList lines = text.split("\n");
    x = iconRect.right() + 10;
    int lineHeight = painter->fontMetrics().height();
    int textWidth = opt.rect.width() - x - 20; // 减去一些边距
    int extraSpace = 30; // 额外的间距

    // 姓名、年龄、性别
    foreach (const QString &line, lines) {
        QRect textRect(x, y, textWidth, lineHeight);
        painter->fillRect(textRect, QBrush(QColor(255, 255, 0))); // 黄色背景
        painter->drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter, line);
        y += lineHeight; // 移动到下一行文本的基线位置

        // 绘制文本行之间的空白处为黄色
        QRect spaceRect(x, y, textWidth, extraSpace);
        painter->fillRect(spaceRect, QBrush(QColor(255, 255, 0))); // 黄色填充
        y += extraSpace; // 增加额外的间距，为下一行文本做准备
    }
}

// mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "verticaltextdelegate.h"
#include <QIcon>
#include <QPixmap>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    ui->listWidget->setItemDelegate(new VerticalTextDelegate(ui->listWidget));

    // 设置图标大小
    int iconSize = 144;
    ui->listWidget->setIconSize(QSize(iconSize, iconSize));

    // 添加多个图片到列表
    addListWidgetItem(":/images/qrc/rabbit_leg1.png", "姓名: 张三\n年龄: 30\n性别: 男");
    addListWidgetItem(":/images/qrc/rabbit_leg2.png", "姓名: 李四\n年龄: 25\n性别: 女");
    addListWidgetItem(":/images/qrc/rabbit_leg3.png", "姓名: 李四\n年龄: 25\n性别: 女");
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::addListWidgetItem(const QString &iconPath, const QString &text)
{
    QListWidgetItem *item = new QListWidgetItem;
    QPixmap pixmap(iconPath);
    QIcon icon(pixmap.scaled(ui->listWidget->iconSize(), Qt::KeepAspectRatio, Qt::SmoothTransformation));
    item->setIcon(icon);
    item->setText(text);
    ui->listWidget->addItem(item);
}

QListWidget QScrollBar:vertical {  
        width: 30px;  
        background-color: white;  
    }  
  
    QListWidget QScrollBar::handle:vertical {  
        background-color: #ADD8E6;  
        min-height: 30px;  
    }  
  
    QListWidget QScrollBar::add-line:vertical {  
        border: 2px solid grey;  
        background-color: #32CC99;  
        height: 20px;  
        subcontrol-position: bottom;  
        subcontrol-origin: margin;  
    }  
  
    QListWidget QScrollBar::sub-line:vertical {  
        border: 2px solid grey;  
        background-color: #32CC99;  
        height: 20px;  
        subcontrol-position: top;  
        subcontrol-origin: margin;  
    }  

四：总结：

文章流程图：背景，设置框架，填充图片，填充代码，展示效果