当前位置：首页 > news >正文

【二十一】【QT开发应用】ListWiddget图标模式

news 2025/2/22 16:28:45

代码

demo13_listwidget::demo13_listwidget(QWidget* parent): QWidget(parent) {ui.setupUi(this);resize(600, 500);QVBoxLayout* pMainVLayout = new QVBoxLayout(this);QListWidget* pListWidget = new QListWidget(this);pListWidget->setViewMode(QListView::IconMode);pListWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);pListWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);QString qss = "QListWidget{border:none; background:rgb(251,251,251);} \QListWidget::item{background:blue;  \margin-left:20px;  \margin-top:10px; \}";pListWidget->setStyleSheet(qss);int vScrollBarWidth = 30;pListWidget->setFixedWidth(180 * 3 + vScrollBarWidth + 1);for (int i = 0; i < 15; i++) {QIcon icon(":/demo13_listwidget/resources/editor.png");QString name = QString(u8"用户%1").arg(QString::number(i));QListWidgetItem* pItem = new QListWidgetItem(icon, name);pItem->setSizeHint(QSize(180, 180));pListWidget->addItem(pItem);}pMainVLayout->addWidget(pListWidget);}

调整窗口大小

resize(600, 500);

调整窗口大小为600x500像素。

创建垂直布局

QVBoxLayout* pMainVLayout = new QVBoxLayout(this);

创建一个垂直布局（QVBoxLayout），并将其设置为当前窗口的主布局，用于管理子部件的排列方式。

创建`QListWidget`

QListWidget* pListWidget = new QListWidget(this);

创建一个新的QListWidget，用于显示带有图标和文本的项目列表，并将其作为当前窗口的子部件。

设置`ListWedget`为图标模式

pListWidget->setViewMode(QListView::IconMode);

设置QListWidget的显示模式为QListView::IconMode，即以图标的方式显示每个列表项，而不是默认的文本列表模式。

设置滚动条策略

pListWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
pListWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);

设置滚动条策略：
- 水平滚动条始终关闭（Qt::ScrollBarAlwaysOff）。
- 垂直滚动条根据需要显示（Qt::ScrollBarAsNeeded）。

定义样式表

QString qss = "QListWidget{border:none; background:rgb(251,251,251);} \QListWidget::item{background:blue;  \margin-left:20px;  \margin-top:10px; \
}";
pListWidget->setStyleSheet(qss);

定义了一个样式表（QSS）来定制QListWidget的外观：
- QListWidget{border:none; background:rgb(251,251,251);}：移除边框，设置背景颜色为浅灰（rgb(251,251,251)）。
- QListWidget::item{background:blue; margin-left:20px; margin-top:10px;}：每个项目的背景色为蓝色，并设置左边距为20像素，顶部边距为10像素。

设置`ListWidget`固定宽度

int vScrollBarWidth = 30;
pListWidget->setFixedWidth(180 * 3 + vScrollBarWidth + 1);

设置了垂直滚动条的宽度为30像素。
pListWidget->setFixedWidth(180 * 3 + vScrollBarWidth + 1);：将QListWidget的宽度固定为显示三列图标的宽度（每列宽度180像素），加上滚动条的宽度和1像素的边距。

循环添加`ListWidgetItem`

for (int i = 0; i < 15; i++) {QIcon icon(":/demo13_listwidget/resources/editor.png");QString name = QString(u8"用户%1").arg(QString::number(i));QListWidgetItem* pItem = new QListWidgetItem(icon, name);pItem->setSizeHint(QSize(180, 180));pListWidget->addItem(pItem);
}

创建一个循环，用来向QListWidget中添加15个带有图标和文本的列表项：
- 每个列表项使用同一个图标（resources/editor.png）和文本（用户0到用户14）。
- pItem->setSizeHint(QSize(180, 180));：设置每个列表项的大小为180x180像素。
- pListWidget->addItem(pItem);：将每个创建的项目添加到QListWidget中。