Qt利用布局,widget和ScrollArea实现抽屉效果

简介: Qt利用布局,widget和ScrollArea实现抽屉效果

在这里插入图片描述


利用布局,widget和ScrollArea实现的抽屉效果如下:
在这里插入图片描述

思路就是将scrollArea设定为垂直布局,然后加入按钮和widget,当鼠标点击按钮后,隐藏widget,利用垂直布局,做到自然伸缩,然后为什么要使用scrollArea做容器,因为scrollArea可以实现当容器空间不足,出现进度条进行列表滑动,下面一步一步来实现。


首先拖拽一个scrollArea,并拖拽几个按钮和widget放进scrollArea,并将scrollArea设定为垂直布局
在这里插入图片描述
为按钮添加槽,当按钮被点击时,widget执行setVisible(false)函数,widget被隐藏,利用布局自动排列,可以看到widget好像被合起。

bool iswiedet_1=true;

void MainWindow::on_pushButton_5_clicked()
{
    if(iswiedet_1==true)
    {
        ui->widget_2->setVisible(false);
        iswiedet_1=false;
        return;
    }
    ui->widget_2->setVisible(true);
    iswiedet_1=true;
}

到此就,就实现了如下效果:
在这里插入图片描述
现在,我们就可以在对应的widget添加我们需要的控件,但是目前还缺少一种东西,就是当列表铺满窗体,自动出现滑动条,ScrollArea可以帮助我们,将以上控件拖到ScrollArea里面,并将ScrollArea设置垂直布局,并将widgetResizable打勾,这样就是实现完整的抽屉效果。

在这里插入图片描述


相关文章
|
4天前
【qt】 QGridLayout布局管理器怎么用?
【qt】 QGridLayout布局管理器怎么用?
10 0
|
11天前
|
存储
【Qt 学习笔记】Qt常用控件 | 多元素控件 | Table Widget的说明及介绍
【Qt 学习笔记】Qt常用控件 | 多元素控件 | Table Widget的说明及介绍
15 3
|
11天前
|
索引
【Qt 学习笔记】Qt常用控件 | 多元素控件 | List Widget的说明及介绍
【Qt 学习笔记】Qt常用控件 | 多元素控件 | List Widget的说明及介绍
29 3
|
11天前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
24 2
|
11天前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 表单布局Form Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 表单布局Form Layout
24 2
|
11天前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
16 2
|
11天前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout
22 2
|
11天前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 垂直布局Vertical Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 垂直布局Vertical Layout
32 2
|
11天前
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
16 2
|
11天前
|
数据可视化 API
【Qt 学习笔记】Qt常用控件 | 多元素控件 | Tree Widget的说明及介绍
【Qt 学习笔记】Qt常用控件 | 多元素控件 | Tree Widget的说明及介绍
12 2