Qt界面设计--侧边栏隐藏和滑出
2023-03-20 15:30:25 时间
在日常项目中,界面布局上经常使用到侧边栏的方式,在侧边栏放置控件进行复合使用,可以实现子功能界面的隐藏和滑出,效果展示如下:![](https://img2023.cnblogs.com/blog/2139213/202301/2139213-20230113162750605-1854974554.gif)
![](https://img2023.cnblogs.com/blog/2139213/202301/2139213-20230113162750605-1854974554.gif)
界面控件很简单,主界面QWidget,侧边栏也用一个QWidget和一个按钮QPushbutton来进行组合。通过点击按钮来显示和隐藏侧边栏。主要用到的是控件的move()函数,配合QPropertyAnimation实现动画效果滑动显示隐藏。动画滑出动画效果使用到的是QPropertyAnimation类的setEasingCurve()函数,通过设置函数参数来实现不同的动画效果,具体效果可以通过Qt Create的帮助文件查询到。
mainwindow.h源码:
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QPropertyAnimation> namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); private: Ui::MainWindow *ui; QPropertyAnimation *m_propertyAnimation; QPropertyAnimation *m_propertyAnimation2; bool m_bSideflag = false;private slots: void on_pushButton_clicked(); }; #endif // MAINWINDOW_H
mainwindow.cpp源码:
#include "mainwindow.h" #include "ui_mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); ui->widget_side->move(-ui->widget_side->width(),0);// 左侧停靠 ui->pushButton->move(-1,ui->widget_side->height()/2); m_propertyAnimation = new QPropertyAnimation(ui->widget_side,"geometry"); m_propertyAnimation->setEasingCurve(QEasingCurve::InOutSine); m_propertyAnimation->setDuration(800); m_propertyAnimation2 = new QPropertyAnimation(ui->pushButton,"geometry"); m_propertyAnimation2->setEasingCurve(QEasingCurve::InOutSine); m_propertyAnimation2->setDuration(800); } MainWindow::~MainWindow() { delete ui; }void MainWindow::on_pushButton_clicked() { //显示侧边栏 if(!m_bSideflag) { m_propertyAnimation->setStartValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height())); m_propertyAnimation->setEndValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height())); m_propertyAnimation->start(); m_propertyAnimation2->setStartValue(QRect(-1,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height())); m_propertyAnimation2->setEndValue(QRect(ui->widget_side->width()-2,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height())); m_propertyAnimation2->start(); ui->pushButton->setText("<<"); m_bSideflag = !m_bSideflag; } else { m_propertyAnimation->setStartValue(QRect(0,0,ui->widget_side->width(),ui->widget_side->height())); m_propertyAnimation->setEndValue(QRect(-this->rect().width(),0,ui->widget_side->width(),ui->widget_side->height())); m_propertyAnimation->start(); m_propertyAnimation2->setStartValue(QRect(ui->widget_side->width()-2,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height())); m_propertyAnimation2->setEndValue(QRect(-1,ui->widget_side->height()/2-ui->pushButton->height()/2,ui->pushButton->width(),ui->pushButton->height())); m_propertyAnimation2->start(); ui->pushButton->setText(">>"); m_bSideflag = !m_bSideflag; } }
Qt中动画效果的功能很强大,初次接触,还有很多功能需要去不断摸索,加油!
优化思路:
新增一个qwidget容器,将菜单栏和按钮控件放置到qwidget容器里面,可以实现两者动态效果的一致性,以下是实现的最终效果图:
相关文章
- 手工清理缓存导致缓存雪崩
- SharpSpray:一款功能强大的活动目录密码喷射安全工具
- Sqlmap2021 -- Cookie注入
- 黑客在昆士兰供水系统驻留9个月未被发现
- Linux安装xwindow图形界面
- Go GC 二三事
- Sqlmap2021 -- Referer注入
- react + zarm + react-captcha-code + classnames 实现登录注册页面
- [GXYCTF2019]BabysqliV3.0题解
- 要想破解验证码,就得从了解开始!
- react + zarm 实现底部导航栏
- SpringBoot Actuator — 埋点和监控
- 操作系统 进程调度-银行家算法实验报告
- 【TcaplusDB知识库】条件过滤说明与更新
- Sqlmap中代理及其他常用参数
- 人工智能+游戏 会带来什么
- 实用编程 | Python+Matplotlib制作超高分辨率动态气象/海洋要素可视化动图
- 【TcaplusDB知识库】Client工具的功能介绍
- 游戏是人工智能研究的理想场景
- 人工智能为游戏带来提升