Python UI设计学习笔记，第五课：左菜单toggle按钮的点击事件：展开和折叠左侧菜单，学习使用动画 `animation`，做出动态效果

最新推荐文章于 2024-04-29 20:14:02 发布
最新推荐文章于 2024-04-29 20:14:02 发布
阅读量911 收藏
点赞数
文章标签： python pyqt pyside 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012928587/article/details/124546754
版权

文章目录

第5课：左菜单toggle按钮的点击事件：展开和折叠左侧菜单，学习使用动画 animation，做出动态效果

  • 1、在main.py 中，定义按钮的响应事件
    • 获取ui中左菜单的宽度
    • 设计展开和缩回的目标宽度值变化逻辑：如果进入点击事件时，按钮是缩回状态，那么目标宽度就是展开时的宽度，反之就是缩回状态的宽度。
    • 借助 QPropertyAnimation 功能，定义一个属性更改动画
      • 开始值是当前菜单某个属性值（宽度）
      • 结束值是动画变化的目标值（目标宽度）
      • 设置持续时间（Duration）
      • 设置值缓慢变化的曲线类型（EasingCurve）
      • 开始动画
      • 效果
        在这里插入图片描述
HUIJIANG123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt实现窗口的折叠与展开(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-15 440
Qt实现窗口的折叠与展开(附完整源码)
Python3.x+Pyqt5实现界面左侧导航栏的抽屉效果和界面的分割器效果（折叠效果，QToolBox工具；分割器效果，QSplitter工具）；界面和业务分离案例01_自己写的，有UI界面源代码
higher80的博客
07-28 8234
1、代码下载地址：https://download.csdn.net/download/higher80/10569032 2、主要参考资料：PyQt5编程(32)：在窗口中布局组—QToolBox类，https://www.jianshu.com/p/a6c497155df0 3、主要用的工具：折叠效果，Pyqt或者说Qt的QToolBox工具；界面分割器效果，Pyqt或者说Qt的QSpli...
Python3.x+Pyqt5实现界面左侧导航栏的抽屉效果（折叠效果）；界面和业务分离案例01_自己写的，有UI界面源代码
07-28
Python3.x+Pyqt5实现界面左侧导航栏的抽屉效果（折叠效果）；界面和业务分离案例01_自己写的，有UI界面源代码
使用pyqt编写的页面导航框架
最新发布
summerriver1的博客
04-29 680
使用pyqt编写的页面导航框架
PySide6学习/教程/笔记（五）：实现一个好看的界面框架
strongants的博客
12-01 3632
自己制作的一个应用界面模板
PyQt5实现导航栏
zhwangye的博客
04-14 3475
pyqt5 stacked widget 顶部选项卡需求思路总结 需求 在做图形化界面开发的时候，我需要做顶部切换，类似网页中导航栏，如下图所示 下图是我的需求，在软件的顶部用 QPushButton控件和stacked widget实现导航栏功能 以下两幅图片是简单的demo，按btn1 -> 页面0，按btn2 -> 页面1 思路 创建一个存有按钮名字的list，如 ta...
Python UI设计学习笔记，第四课：构建左侧菜单，使用 `QPushButton`
JIA的博客
05-02 974
文章目录第4课：构建左侧菜单，使用 `QPushButton` 第4课：构建左侧菜单，使用 QPushButton 在第三课的基础上，继续在ui_main_window.py文件中，为 左侧菜单self.left_menu 画面增加UI控件。 思路总结如下，在左侧菜单frame画面中，增加垂直布局，然后在布局中依次增加顶部画面frame、底部画面frame、最底部标签label。 然后，在顶部/底部frame画面中，增加垂直布局，在布局中依次增加pushButton按钮。顶部与底部之间，增加spacer间
PyQt如何创建折叠菜单
wm9028的专栏
06-05 3344
使用PyQt、PySide2 创建折叠菜单 pytqt5 from PyQt5 import QtCore, QtGui, QtWidgets class CollapsibleBox(QtWidgets.QWidget): def __init__(self, title="", parent=None): super(CollapsibleBox, self).__init__(parent) self.toggle_button = QtWidgets.Q
pyqt实现导航栏，并且布局可隐藏
qq_44889142的博客
08-10 971
【代码】pyqt实现导航栏，并且布局可隐藏。
Python3.x+Pyqt5实现界面左侧树形导航栏
07-30
Python3.x+Pyqt5实现界面左侧树形导航栏；主要用到的工具是Pyqt5的QTreeWidget。
Python 小白从零开始 PyQt5 项目实战（7）折叠侧边栏的实现
热门推荐
youcans的博客
10-21 1万+
本系列面向 Python 小白，从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 折叠侧边栏是指可折叠的多级菜单式状态栏，位于于窗口的左右侧边，可以实现软件功能或目录的导航。 本文详细介绍用 QTreeWidget 部件实现目录结构的折叠侧边栏，与用 QToolBox 部件实现垂直菜单结构的折叠侧边栏，通过案例带小白建立两种典型的折叠侧边栏。 至此，我们已经完成了一个比较完整的应用程序的 UI 和程序框架。
Python使用tkinter库和GUI界面实现的卡通人物动作变化
04-27
基于Python使用tkinter库和GUI界面实现的一个卡通人物动作变化的代码，点击不同的按钮可以触发卡通人物不同的动作变化，
jQuery学习笔记之jQuery动画效果
12-10
基本动画代码： 代码如下:<...<head><title>Hello World jQuery!...//基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本//并且都提供了两个参数的重载，如show( speed,
jquery动画效果学习笔记（8种效果）
11-25
1、元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关，显示则隐藏，隐藏则显示 [removed] function f1(){ //隐藏 $("div")....
material-ui-toggle-icon:Material-UI的动画切换图标
05-03
安装npm i --save material-ui-toggle-icon用法该组件带有两个图标和一个布尔值，该布尔值告诉它是否显示onIcon或offIcon 。 当on改变时，图标被切换用的过渡。 import ToggleIcon from "material-ui-toggle-icon" ;...
faceRec-AC：访问控制仿真软件，学习如何使用face_recognition和dlib python库
02-20
人脸识别学习如何使用face_recognition和dlib python库。 软件菜单： 1. Listar Pessoas2. Registrar3. Start4. Deletar5. Salvar e Sair0. Dev ToolsDEV TOOLS1. Toggle Debugging2. Set Confianca3. Resetar log4....
Bootstrap学习笔记之js组件（4）
11-22
这次我们来看下js组件的使用，本篇文章会有点长，希望大家可以耐心看，相信收获会有不少。不少园友加我好友，表示喜欢我写文字的风格，简单明了，这里，再次谢谢你们的支持。一方面，自身技术有限，写的东西都比较...
PyQt实例：设计有折叠效果的左侧选项卡，且点击不同选项卡能进行不同界面的切换
我的ID是局长大人的博客
11-15 6472
声明：本文仅供学习用，旨在分享 首先先来看下效果图： 要实现上面的页面切换效果，需要用到一个控件QStackedWidget，叫做堆载窗口控件，QStackedWidget控件与QTabWidget类似，可以有效的显示窗口的控件。以下是代码： # -*- coding: utf-8 -*- from random import randint import sys from PyQt5.QtCo...
PyQt-PySide自定义伸缩菜单栏分享(包含使用教程)
qq_62095154的博客
02-13 1311
代码开源在bilibili 对应连接 PyQt-PySide自定义伸缩菜单栏(以及如何使用)_哔哩哔哩_bilibili 采用Qt动画动画框架完成
在若依系统中我想点击一个按钮然后左侧的菜单展开
06-08
在若依系统中，如果您想要点击一个按钮展开左侧菜单，可以通过以下步骤实现： 1. 在页面中添加一个按钮，并为其绑定一个点击事件。 2. 在点击事件中，通过 JavaScript 代码获取左侧菜单的 DOM 元素，并修改其 CSS 样式，使其展开显示。 具体实现方法可以参考以下代码： ```html <!-- 页面中的按钮 --> <button onclick="toggleMenu()">展开菜单</button> <!-- 左侧菜单 --> <div id="menu" style="display: none;"> <!-- 菜单内容 --> </div> <script> function toggleMenu() { var menu = document.getElementById("menu"); if (menu.style.display === "none") { menu.style.display = "block"; } else { menu.style.display = "none"; } } </script> ``` 在上述代码中，我们首先在页面中添加了一个按钮，并为其绑定了一个 `toggleMenu` 函数，用于展开或隐藏左侧菜单。在 `toggleMenu` 函数中，我们通过 `document.getElementById` 方法获取了左侧菜单的 DOM 元素，并根据其当前的 `display` 样式属性值来判断菜单是否已经展开。如果还未展开，则将其 `display` 样式属性设置为 `block`，使其显示出来；否则将其设置为 `none`，使其隐藏起来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值