QT之可自由折叠和展开的布局

介绍和功能分析

        主要是实现控件的折叠和展开，类似抽屉控件，目前Qt自带的控件QToolBox具有这个功能，但是一次只能展开一个，所以针对自己的需求可以自己写一个类似的功能，这里实现的方法比较多，其实原理也比较简单，就是点一次隐藏，再点一次显示的效果。

实现方法

目前实现的方法有两种，原理基本相同，方法一是使用QPushButton结合SetVisible()函数来实现点击后隐藏和显示的效果。其UI布局如下：

方法一使用点击QPushButton按钮来实现隐藏和显示QWidget的效果，再在QPushButton前增加辅助图标就实现了展开和收起的实际效果，其效果如下图：

方法二中主要通过ToolBox进行调用，将传入的QWidget传入到ToolPage中，ToolPage自动填充到内容区，再将ToolPage添加到垂直布局中，ToolPage分为标题栏（QPushButton）和内容区（QWidget），点击QPushButton后,循环展开/折叠内容区。方法二与方法一实现原理相同，只是方法二对ToolBox进行了再次封装，然后通过ToolBox直接调用。其UI布局如下：

代码实现

首先重新写一个抽屉的类来创建控件相关功能：

LockerButton.h

 

#ifndef LOCKER_BUTTON_H
#define LOCKER_BUTTON_H#include <QWidget>
#include <QPushButton>class QLabel;class LockerButton : public QPushButton
{Q_OBJECT
public:explicit LockerButton(QWidget* parent = nullptr);// 设置按钮图标void SetImageLabel(const QPixmap &pixmap);// 设置按钮文字void SetTextLabel(QString text);// 返回图像label句柄QLabel* GetImageHandle();// 返回文字label句柄QLabel* GetTextHandle();private:// 按钮图标QLabel* m_imageLabel;// 按钮文字QLabel* m_textLabel;
};#endif // LOCKER_BUTTON_H

 

LockerButton类继承于PushButton类，主要进行控件的图标和文字设置。

LockerButton.cpp

 

#include "LockerButton.h"#include <QLabel>
#include <QVBoxLayout>
#include <QLineEdit>
#include <QDoubleValidator>LockerButton::LockerButton(QWidget* parent): QPushButton(parent)
{m_imageLabel = new QLabel;m_imageLabel->setFixedWidth(20);m_imageLabel->setScaledContents(true);m_imageLabel->setStyleSheet("QLabel{background-color:transparent;}");m_textLabel = new QLabel;m_textLabel->setStyleSheet("QLabel{background-color:transparent;}");QHBoxLayout* mainLayout = new QHBoxLayout;mainLayout->addWidget(m_imageLabel);mainLayout->addWidget(m_textLabel);mainLayout->setMargin(0);mainLayout->setSpacing(0);this->setLayout(mainLayout);
}void LockerButton::SetImageLabel(const QPixmap &pixmap)
{m_imageLabel->setPixmap(pixmap);
}void LockerButton::SetTextLabel(QString text)
{m_textLabel->setText(text);
}QLabel* LockerButton::GetImageHandle()
{return m_imageLabel;
}QLabel* LockerButton::GetTextHandle()
{return m_textLabel;
}

接下来是调用，参考网上大部分是通过代码去创建控件，这里我使用的是PushButton控件在ui上实现，在Form上拉一个PushButton控件，然后提升为LockerButton，如下图：

 

再接下来就是Widget的实现了

widget.h

 

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>namespace Ui {
class Widget;
}class Widget : public QWidget
{Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();private slots:void on_ckbPic_clicked(bool checked);void on_ckbVideo_clicked(bool checked);private:Ui::Widget *ui;void initUI();int m_PicList;int m_VideoList;
};#endif // WIDGET_H

widget.cpp

 

#pragma execution_character_set("utf-8")
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);initUI();
}Widget::~Widget()
{delete ui;
}void Widget::initUI()
{this->resize(300, 600);m_PicList = 0;m_VideoList = 0;ui->btnPic->SetTextLabel("图像");ui->btnPic->SetImageLabel(QPixmap(":/image/Collapse.png"));ui->btnPic->setStyleSheet("#btnPic{background-color:transparent}""#btnPic:hover{background-color:rgba(195,195,195,0.4)}""#btnPic:pressed{background-color:rgba(127,127,127,0.4)}");ui->btnVideo->SetTextLabel("视频");ui->btnVideo->SetImageLabel(QPixmap(":/image/Collapse.png"));ui->btnVideo->setStyleSheet("#btnVideo{background-color:transparent}""#btnVideo:hover{background-color:rgba(195,195,195,0.4)}""#btnVideo:pressed{background-color:rgba(127,127,127,0.4)}");QLabel* PicLabel = ui->btnPic->GetTextHandle();PicLabel->setStyleSheet("QLabel{color:rgba(183,71,42,1)}");PicLabel->setFont(QFont("图像", 10, QFont::Black));QLabel* VideoLabel = ui->btnVideo->GetTextHandle();VideoLabel->setStyleSheet("QLabel{color:rgba(183,71,42,1)}");VideoLabel->setFont(QFont("视频", 10, QFont::Black));ui->widget_Pic->setVisible(false);ui->widget_Video->setVisible(false);ui->btnPic->setEnabled(false);ui->btnVideo->setEnabled(false);connect(ui->btnPic, &LockerButton::clicked, [this](bool) {if (m_PicList % 2){ui->btnPic->SetImageLabel(QPixmap(":/image/Collapse.png"));//m_sizeList偶数屏蔽Size列表界面，奇数显示Size列表界面ui->widget_Pic->setVisible(false);}else{ui->btnPic->SetImageLabel(QPixmap(":/image/Expand.png"));ui->widget_Pic->setVisible(true);}m_PicList++; });connect(ui->btnVideo, &LockerButton::clicked, [this](bool) {if (m_VideoList % 2){ui->btnVideo->SetImageLabel(QPixmap(":/image/Collapse.png"));ui->widget_Video->setVisible(false);}else{ui->btnVideo->SetImageLabel(QPixmap(":/image/Expand.png"));ui->widget_Video->setVisible(true);}m_VideoList++; });
}void Widget::on_ckbPic_clicked(bool checked)
{if(checked){qDebug()<<"复选框被选中";ui->btnPic->setEnabled(true);m_PicList++;ui->widget_Pic->setVisible(true);ui->btnPic->SetImageLabel(QPixmap(":/image/Expand.png"));}else{qDebug()<<"复选框被取消";ui->btnPic->setEnabled(false);m_PicList++;ui->widget_Pic->setVisible(false);ui->btnPic->SetImageLabel(QPixmap(":/image/Collapse.png"));}
}void Widget::on_ckbVideo_clicked(bool checked)
{if(checked){qDebug()<<"复选框被选中";ui->btnVideo->setEnabled(true);m_VideoList++;ui->widget_Video->setVisible(true);ui->btnVideo->SetImageLabel(QPixmap(":/image/Expand.png"));}else{qDebug()<<"复选框被取消";ui->btnVideo->setEnabled(false);m_VideoList++;ui->widget_Video->setVisible(false);ui->btnVideo->SetImageLabel(QPixmap(":/image/Collapse.png"));}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/126975.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据分析篇-数据认知分析

数据分析篇-数据认知分析

一简介 数据认知分析&#xff0c;实际是对数据的整体结构和分布特征进行分析&#xff0c;是对整个数据外在的认识&#xff0c;也是数据分析的第一步。对于数据认知的分析&#xff0c;一般会考虑分散性、位置特性、变量的相关性等&#xff0c;一般会考虑平均数、方差、极差、峰…
阅读更多...
【Vue面试题六】为什么Vue中的 v-if 和 v-for 不建议一起用？

【Vue面试题六】为什么Vue中的 v-if 和 v-for 不建议一起用？

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;v-if和v-for的优先级是什…
阅读更多...
【计算机网络-自顶向下方法】应用层（HTTP、FTP）

【计算机网络-自顶向下方法】应用层（HTTP、FTP）

目录 1. Principles of network applications创建一个网络应用1.1 网络应用架构1.1.1 客户-服务器架构1.1.2 P2P架构1.1.3 两种架构的比较 1.2 不同终端上的进程通信1.3 应用需要什么样的传输服务1.4 因特网能够提供的传输服务1.5 应用层协议1.6 小结 2. Web and HTTPWeb应用画…
阅读更多...
vue element编辑功能

vue element编辑功能

1.编辑页面和添加页面一致 所以 就不用单独去写新的编辑静态页面 2-1&#xff1a;编辑事件 // 编辑handleEdit(index, row) {console.log(index, row);// 存储当前行的数据 --vuex---跳转到另外一个界面--获取vuex行数据this.changeRowData()// 跳转编辑界面---this.$router.pu…
阅读更多...
selenium查找网页如何处理网站资源一直加载非常卡或者失败的情况

selenium查找网页如何处理网站资源一直加载非常卡或者失败的情况

selenium查找网页如何处理网站资源一直加载失败的情况 selenium获取一个网页&#xff0c;某个网页的资源卡了很久还没有加载成功&#xff0c;如何放弃这个卡的数据&#xff0c;继续往下走 有2钟方式。通常可以采用下面的方式一来处理这种情况 方式一、WebDriverWait 这种方式…
阅读更多...
企业如何防止内部人员泄密（如何防止员工泄露商业秘密）

企业如何防止内部人员泄密（如何防止员工泄露商业秘密）

在当今的信息化社会&#xff0c;数据安全和保密已经成为了企业运营的重要环节。尤其是对于一些高度敏感的商业信息&#xff0c;如何防止内部人员的泄露成为了一个重要问题。本文将详细介绍五种有效的防止内部人员泄露的方法。 1. 制定严格的保密协议 制定严格的保密协议是防止…
阅读更多...
【java计算机毕设】留守儿童管理系统 javaweb springMvc ssm mysql vue html 送文档+ppt

【java计算机毕设】留守儿童管理系统 javaweb springMvc ssm mysql vue html 送文档+ppt

目录 1.项目视频演示 2.项目功能截图 3.项目简介 4.项目源码获取地址 1.项目视频演示 【java计算机毕设】留守儿童管理系统 javaweb springMvc ssm mysql vue html 送文档ppt 2.项目功能截图 3.项目简介 后端&#xff1a;springMvc 前端&#xff1a;vue&#xff0c;html 数…
阅读更多...
雷达散射截面（RCS）相关概念

雷达散射截面（RCS）相关概念

一、雷达散射截面（RCS） RCS被指定为直径为1.128 m的完美导电球体的倍数。该球体的可见表面为1 m，但仅具有较小的反向散射有效面积。因此，更好的反射表面可以具有比其几何尺寸大得多的RCS。 雷达截面积 二、简单目标的RCS 简单目标的RCS如下表所示： 三、瑞利、米氏和光学…
阅读更多...
比较常见的在线项目管理系统有哪些？

比较常见的在线项目管理系统有哪些？

在线项目管理系统作为一个适用于各领域任务管理、工时收集、团队协作与即时沟通的企业级在线项目管理解决方案&#xff0c;可以为用户同时协调和管理数以百计的项目和团队成员&#xff0c;而软件所具有的成熟&#xff0c;可靠和友好特性&#xff0c;将不再让用户在易用性和功能…
阅读更多...
【maven】idea中基于maven-webapp骨架创建的web.xml问题

【maven】idea中基于maven-webapp骨架创建的web.xml问题

IDEA中基于maven-webapp骨架创建的web工程&#xff0c;默认的web.xml是这样的。 <!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name…
阅读更多...
17哈希表-简单遍历

17哈希表-简单遍历

目录 LeetCode之路——383. 赎金信 分析&#xff1a; 解法一&#xff1a;哈希表 解法二&#xff1a;数组 LeetCode之路——383. 赎金信 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&…
阅读更多...
zookeeper选举机制

zookeeper选举机制

全新集群选举 zookeeper 全新集群选举机制网上资料很多说法很模糊&#xff0c;仔细思考了一下&#xff0c;应该是这样 得到票数最多的机器>机器总数半数 具体启动过程中的哪个节点成为 leader 与 zoo.cfg 中配置的节点数有关&#xff0c;下面以3个举例 选举过程如下 server…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023