ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【二十一】【QT开发应用】ListWiddget图标模式 [打印本页]

---

作者: 不到断气不罢休    时间: 5 天前
标题: 【二十一】【QT开发应用】ListWiddget图标模式
代码

1. demo13_listwidget::demo13_listwidget(QWidget* parent)
2.         : QWidget(parent) {
3.         ui.setupUi(this);
5.         resize(600, 500);
7.         QVBoxLayout* pMainVLayout = new QVBoxLayout(this);
9.         QListWidget* pListWidget = new QListWidget(this);
12.         pListWidget->setViewMode(QListView::IconMode);
13.         pListWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
14.         pListWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
16.         QString qss = "QListWidget{border:none; background:rgb(251,251,251);} \
17.         QListWidget::item{background:blue;  \
18.         margin-left:20px;  \
19.         margin-top:10px; \
20.     }";
21.         pListWidget->setStyleSheet(qss);
24.         int vScrollBarWidth = 30;
26.         pListWidget->setFixedWidth(180 * 3 + vScrollBarWidth + 1);
27.         for (int i = 0; i < 15; i++) {
28.                 QIcon icon(":/demo13_listwidget/resources/editor.png");
29.                 QString name = QString(u8"用户%1").arg(QString::number(i));
31.                 QListWidgetItem* pItem = new QListWidgetItem(icon, name);
32.                
33.                 pItem->setSizeHint(QSize(180, 180));
34.                 pListWidget->addItem(pItem);
37.         }
39.         pMainVLayout->addWidget(pListWidget);
41. }

复制代码

调整窗口大小

1. resize(600, 500);

复制代码

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

创建垂直布局

1. QVBoxLayout* pMainVLayout = new QVBoxLayout(this);

复制代码

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

创建QListWidget

1. QListWidget* pListWidget = new QListWidget(this);

复制代码

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

设置ListWedget为图标模式

1. pListWidget->setViewMode(QListView::IconMode);

复制代码

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

设置滚动条计谋

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

复制代码

• 设置滚动条计谋：
  
  
  
  • 水平滚动条始终关闭（Qt::ScrollBarAlwaysOff）。
    
  • 垂直滚动条根据需要表现（Qt::ScrollBarAsNeeded）。
    
  
  

定义样式表

1. QString qss = "QListWidget{border:none; background:rgb(251,251,251);} \
2.     QListWidget::item{background:blue;  \
3.     margin-left:20px;  \
4.     margin-top:10px; \
5. }";
6. 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固定宽度

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

复制代码

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

循环添加ListWidgetItem

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

复制代码

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

添加ListWidget到布局中

1. pMainVLayout->addWidget(pListWidget);

复制代码

• 将pListWidget添加到主垂直布局中，使其在窗口中表现。
  

步伐运行效果

结尾

末了，感谢您阅读我的文章，希望这些内容能够对您有所启发和帮助。如果您有任何问题或想要分享您的观点，请随时在批评区留言。
同时，不要忘记订阅我的博客以获取更多风趣的内容。在未来的文章中，我将继续探讨这个话题的不同方面，为您呈现更多深度和看法。
谢谢您的支持，期待与您在下一篇文章中再次相遇！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4