Qt界面篇：Qt界面之侧边栏隐藏和滑出

已于 2023-08-21 08:51:58 修改
阅读量1.4w 收藏 124
点赞数 17
CC 4.0 BY-SA版权
分类专栏： QT实战 文章标签： qt ui Qt侧边栏
于 2022-08-23 14:24:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37251750/article/details/126484078
本文介绍了如何在Qt界面中实现侧边栏的隐藏和显示功能，通过使用QWidget、QPushButton控件，结合QPropertyAnimation动画效果，实现侧边栏滑动显示和隐藏的操作。

一、前言

  在实际的Qt界面布局设计中，特别是主界面中，经常会用到侧边栏的方式，然后在其中加入其他控件来复合使用，下面简单来实现一下Qt侧边栏的隐藏和显示，效果如下：
在这里插入图片描述

二、功能介绍

  界面控件很简单，主界面QWidget，侧边栏也用一个QWidget和一个按钮QPushbutton来进行组合。通过点击按钮来显示和隐藏侧边栏。主要用到的是控件的move()函数，配合QPropertyAnimation实现动画效果滑动显示隐藏。
在这里插入图片描述

三、源码

#include "widget.h"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Qt实现侧边栏显示和隐藏以及自定义提示框的编程
CyberXZ的博客
09-09 1067
接下来，我们将介绍如何创建自定义的提示框。我们可以使用类来显示标准的提示框，但如果我们希望自定义提示框的外观和行为，我们需要创建一个自定义的窗口部件。public:在上述代码中，我们创建了一个名为的自定义窗口部件，继承自QDialog。在构造函数中，我们创建了一个垂直布局管理器，并添加了一个QLabel用于显示提示信息。同时，我们还添加了一个"Close"按钮，点击该按钮将关闭提示框。在main函数中，我们创建了一个实例，并调用exec方法显示提示框。
Qt界面篇：Qt实现侧边栏显示隐藏以及自定义提示框
欧特GO
10-21 9031
最近在工作中需要实现一个Qt的侧边栏，通过按钮控制显示和隐藏，此外还要求实现自定义气泡提示框，最终参考网上知识进行了实现，效果如下： **1、窗口控件大小可以随窗体自由缩放； 2、侧边栏按钮可以控制侧边栏的显示隐藏； 3、侧边栏按钮可以控制侧边栏内容的切换； 4、实现自定义气泡提示框，提示框形状依据需求自绘； 5、鼠标悬停到按钮控件时候可以弹出自定义气泡提示框，移开时提示框消失。
Qt实现自定义侧边栏滑动
05-30
Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧边栏滑动Qt侧
QT开发实战之侧边栏与弹窗制作
m0_70788037的博客
10-15 1411
qt设置隐藏式侧边栏、点击按钮弹窗显示。
Qt 侧边栏滑出隐藏 丝滑版
linvisf的博客
08-12 1714
上一篇文章。这次写了一篇丝滑版侧边栏效果，增加了动画效果。
Qt 侧边栏隐藏和滑出 最简单实现
鲲梦
01-09 2852
【代码】Qt 侧边栏隐藏和滑出 最简单实现。
Qt界面设计——侧边栏隐藏和滑出
QtCompany的博客
08-03 1811
界面控件很简单，主界面QWidget，侧边栏也用一个QWidget和一个按钮QPushbutton来进行组合。通过点击按钮来显示和隐藏侧边栏。主要用到的是控件的move()函数，配合QPropertyAnimation实现动画效果滑动显示隐藏。动画滑出动画效果使用到的是QPropertyAnimation类的setEasingCurve()函数，通过设置函数参数来实现不同的动画效果，具体效果可以通过Qt Create的帮助文件查询到。Qt中动画效果的功能很强大，初次接触，还有很多功能需要去不断摸索，加油!
QT样式学习-侧边栏隐藏和滑出
最新发布
R_conqueror的博客
12-24 1301
最简单的方法，直接按钮实现侧边栏sideWidget的隐藏和出现，但显示和隐藏很突兀不够平滑，于是使用QT的动画框架实现线性滑出和隐藏。
Qt 实现侧边栏滑出菜单效果
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
10-26 2605
做了一个void MainWidget::resizeEvent(QResizeEvent *event)事件，根据MainWidget的尺寸，自适应m_animationWidget的高度。这两个widget需要重合。使用：新建一个MainWidget，将m_animationWidget父对象设置为this。动画效果：QPropertyAnimation类提供动画支持，改变geometry属性。最后安装事件过滤器：通过鼠标进入和离开事件，触发动画效果。这里做了两个widget，
QSideBar Qt侧边栏.zip
10-23
QSideBar Qt侧边栏.zip
Qt 侧边栏
GreenArrowMan-CSDN博客
10-23 8288
通过QToolButton来实现侧边栏，或者说侧边工具栏，可以通过接口直接自由添加按钮，可以设置工具按钮对应的QWidget，进而点击不同的按钮可以显示不同的QWidget。 实现代码： #ifndef QSIDEBAR_H #define QSIDEBAR_H #include #include #include #include #include class QSid
Qt--实现侧边栏
贝勒里恩的博客
12-09 8310
一、效果展示 二、原理详解 实现这个隐藏侧边栏的主要思想是侧边栏的显示和隐藏，显示和隐藏只需要移动Widget到可看见的区域（窗口区域）和不可看见的区域（窗口区域之外）即可。可以使用QPropertyAnimation属性动画，绑定Widget的geometry属性，实现显示和隐藏的动画效果，关键代码如下： MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) {
Qt实现侧边栏隐藏与呈现
qq_41663505的博客
10-26 1260
启动动画。
Qt实现侧边栏显示隐藏以及自定义提示框（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-18 875
Qt实现侧边栏显示隐藏以及自定义提示框（附完整源码）
关于Qt实现侧边栏隐藏与显示的效果
热门推荐
Tangmp3的博客
01-02 1万+
通过ToolButton来实现某控件的隐藏与显示，具体功能为点击toolbutton后，某widget（以tabWidget为例）隐藏于左侧，toolbutton位于（0，0）坐标处，显示的icon也进行切换；再次点击后，tabwidget展开，toolbutton还原。具体代码如下： b_hideme = true;//需要初始化，否则运行后第一次点击没反应，第二次点击才隐藏 connect
Qt实现侧边栏（右边）渐入渐出，类似抽屉
weixin_43419112的博客
08-09 4323
//sidewidget.h #ifndef SIDEWIDGET_H #define SIDEWIDGET_H #include <QWidget> #include <QTimer> namespace Ui { class SideWidget; } namespace Dcom { enum SpeedType { SLOW = 1,FAST = 2 }; ...
Qt侧边栏简易版
linvisf的博客
08-12 967
经常看到PC端或移动端软件有侧边栏，就想着也试着实现下。实现起来还是蛮简单的。思路：侧边栏隐藏和显示，按钮随之变化。点击按钮控制侧边栏隐藏和显示。
Qt实现侧边栏功能
propor的专栏
10-10 1722
Qt，侧边栏功能
Qt侧边栏渐变效果实现教程
- **Qt界面布局**：Qt提供多种方式来布局界面组件，包括使用布局管理器（如QHBoxLayout, QVBoxLayout）等，而实现侧边栏通常需要结合布局管理器和窗口部件（QWidget）。 - **动画和效果实现**：Qt通过...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

欧特克_Glodon

很高兴能帮助到您！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值