Qt | 实现动态创建多个 Tab 页，页中动态创建多个子部件

作者：YOLO.

2022-10-13
河北
本文字数：1750 字
阅读完需：约 6 分钟

示例运行效果：

动态创建 Tab 按钮和 Page 页，点击某一个 Tab 按钮，就会显示对应的 Page,Page 中动态创建了不同个数的 Item。

在 MainWindow 中创建一个 DownloadWidget,DownloadWidget 中有一个 DownloadForm。DownloadForm 中实现动态创建多个 Tab 页的功能。

上方的每一个 Tab 按钮为 DownloadTabButton，每一个按钮对应一个 QWidget 页面,QWidget 中只有一个 QListWidget 来管理页面内的所有 DownloadItem。

文件目录：

源码获取：源码下载地址（CSDN）

具体实现：

实现管理动态创建的 Tab 按钮

1.设置布局

ui->widget_tab_buttons->layout()->setSizeConstraint(QLayout::SetFixedSize);//设置从顶端开始显示

复制代码

这一组 TabButton 是动态创建在一个拥有水平布局的 QWidget 中的，我们需要将布局设置为从顶端开始显示，这样动态创建的 TabButton 无论创建多少个，都是从最左端开始排列。
同样的，对于垂直布局，设置这个属性可以保证动态创建的子部件可以在不居中从上向下排列。

2.添加 tab 按钮

DownloadTabButton *button = new DownloadTabButton(ui->widget_tab);button->setIndex(iPage);ui->widget_tab_buttons->layout()->addWidget(button);connect(button, SIGNAL(sigTabButtonSelected(int)),this, SLOT(slotTabButtonSelect(int)));

复制代码

在这里要注意为每一个 TabButton 设置一个索引值，通过索引值我们可以使 TabButton 和 Page 对应起来。
添加一个 TabButton 时，要调用布局的 addWidget()函数，将它添加到布局中。

3.通过索引值获取 tab 按钮的指针

QLayoutItem *child = ui->widget_tab_buttons->layout()->itemAt(index);if(child != nullptr){    DownloadTabButton *button = static_cast<DownloadTabButton *>(child->widget());    button->setCancel();}

复制代码

调用布局的 itemAt()函数，可以通过索引值获取对应的 TabButton 的指针。
将指针强制转换成 DownloadTabButton 类，就可以调用类的方法了。

4.删除 tab 按钮

QLayoutItem *child;while ((child = ui->widget_tab_buttons->layout()->itemAt(0)) != nullptr){    ui->widget_tab_buttons->layout()->removeItem(child);    delete child->widget();    delete child;    child = nullptr;}

复制代码

这里实现的是清空所有的 tab 按钮。可以类似的实现删除某一个 tab 按钮。
清空时要注意先调用布局的 removeItem()函数，将 TabButton 移出布局，然后再销毁 TabButton。

5.实现滚动条（本例中没有实现，可以自己添加）

ui->scrollArea->verticalScrollBar()->setValue(ui->scrollArea->verticalScrollBar()->minimum());

复制代码

当创建的 TabButton 太多，超出 Widget 的显示区域时，就需要用到滚动框。
将上面的 QWidget 添加到 scrollarea 里面就可以了,然后调用上面的代码，实现动态添加完成后，滚动条显示在最左端。

动态创建 page 页

这里的每一个 Page 页有一个 QWidget 类来实现，所有的 Page 都在一个 QstackWidget 中，page 中又包含一个 QListWidget 来管理所有的 Item。

1.创建 page 页

QWidget *page = new QWidget(ui->stackedWidget);QHBoxLayout *layout = new QHBoxLayout(page);layout->setContentsMargins(0, 0, 0, 0);layout->setSpacing(0);QListWidget *list = new QListWidget(page);list->setObjectName("listWidget");layout->addWidget(list);ui->stackedWidget->addWidget(page);

复制代码

2.删除 page 页

for(int i = ui->stackedWidget->count(); i>=0; i--){    QWidget* widget = ui->stackedWidget->widget(i);    ui->stackedWidget->removeWidget(widget);    if(widget != nullptr)    {        delete widget;        widget = nullptr;    }}

复制代码

这里实现的是清空所有的 page。
注意这里一定要进行倒序删除，否则会造成崩溃，也可以想上面删除 TabButton 时一样正序删除，每次都删除第一个。
同样的，要先调用 stackedWidget 中的 removeWidget()函数，将 page 移出 stackedWidget,然后再销毁 page。

3.设置某一页显示

ui->stackedWidget->setCurrentIndex(index);

复制代码

4.获取某一个 Page 里面的 listWidget

QWidget *page = ui->stackedWidget->widget(index);QListWidget *listWidget = page->findChild<QListWidget *>("listWidget");

复制代码

先通过 index 获取到 page，再通过 findChild()函数，来获取 page 中名为“listWidget”的子部件。
要使用 findChild 获取子部件，要先为子部件设置它的 objectName。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/a5aeea5946c779c011ba874bc】。未经作者许可，禁止转载。

YOLO.

关注

还未添加个人签名 2022-05-06 加入

还未添加个人简介

发布

暂无评论

创作场景

Qt | 实现动态创建多个 Tab 页，页中动态创建多个子部件

示例运行效果：

文件目录：

具体实现：

实现管理动态创建的 Tab 按钮

动态创建 page 页

YOLO.

评论