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

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

article 2024/9/20 19:52:15

代码

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中。