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打勾,这样就是实现完整的抽屉效果。
补充:Qt 实现抽屉效果
Qt 实现抽屉效果
1、实现效果和UI设计界面
2、工程目录
3、mainwindow.h
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QToolButton> #include <QPushButton> #include <vector> using namespace std; QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private: Ui::MainWindow *ui; /** * @brief 初始化 UI */ void initUI(); // 要折叠的内容 vector<QWidget*> widgetBodys; // 要用到的 toolButton vector<QToolButton*> toolButtons; // 折叠按钮 pushButton vector<QPushButton*> pushButtons; private slots: // 点击打开和关闭抽屉按钮 void on_btns_clicked(); }; #endif // MAINWINDOW_H
4、mainwindow.cpp
#include "mainwindow.h" #include "ui_mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); // 初始化 UI initUI(); } MainWindow::~MainWindow() { delete ui; } void MainWindow::initUI() { // 要折叠的内容 widgetBodys.push_back(ui->widgetOneBody); widgetBodys.push_back(ui->widgetTwoBody); widgetBodys.push_back(ui->widgetThreeBody); // 要用到的 toolButton toolButtons.push_back(ui->toolButtonOne); toolButtons.push_back(ui->toolButtonTwo); toolButtons.push_back(ui->toolButtonThree); // 折叠按钮 pushButton pushButtons.push_back(ui->pushButtonOne); pushButtons.push_back(ui->pushButtonTwo); pushButtons.push_back(ui->pushButtonThree); for(size_t i = 0;i < widgetBodys.size();++i) { // 设置 ToolButton 的样式 toolButtons[i]->setToolButtonStyle(Qt::ToolButtonTextBesideIcon); toolButtons[i]->setIcon(QIcon(QPixmap(":/res/functions.png"))); toolButtons[i]->setText(QString::fromLocal8Bit("常用功能")); // 设置抽屉按钮的样式,抽屉默认折叠 pushButtons[i]->setIcon(QIcon(QPixmap(":/res/close.png"))); // 设置抽屉默认折叠,一定记得在 UI 设计界面将 layoutTopMargin 和 layoutBottomMargin 设置为0 widgetBodys[i]->hide(); // 方便后面点击按钮时获取点击的哪个按钮 pushButtons[i]->setProperty("index",i); connect(pushButtons[i],&QPushButton::clicked,this,&MainWindow::on_btns_clicked); } } void MainWindow::on_btns_clicked() { // 获取点击的按钮 QPushButton *pushButton = qobject_cast<QPushButton*>(sender()); if(pushButton) { int index = pushButton->property("index").toInt(); if(widgetBodys[index]->isVisible()) {// 当前抽屉是展开的 // 关闭抽屉 widgetBodys[index]->hide(); // 按钮变为关闭状态 pushButton->setIcon(QIcon(QPixmap(":/res/close.png"))); } else {// 当前抽屉是关闭的 // 打开抽屉 widgetBodys[index]->show(); // 按钮变为打开状态 pushButton->setIcon(QIcon(QPixmap(":/res/open.png"))); } } }
到此这篇关于Qt利用布局,widget和ScrollArea实现抽屉效果的文章就介绍到这了,更多相关Qt抽屉效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
这篇文章主要介绍了Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法,需要的朋友可以参考下2016-08-08JavaScript中在光标处插入添加文本标签节点的详细方法
本文主要介绍了JavaScript中在光标处插入添加文本标签节点的详细方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
这篇文章主要介绍了BootStrap 智能表单实战系列(二)BootStrap支持的类型简介 的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧2016-06-06
最新评论