Qt第六十五章:自定义菜单栏的隐藏、弹出

目录

一、效果图

二、qtDesigner

三、ui文件如下:

四、代码


一、效果图

二、qtDesigner

原理是利用属性动画来控制QFrame的minimumWidth属性。

①先拖出相应的控件

②布局一下

③填上一些样式

相关QSS

css 复制代码
background-color: rgb(238, 242, 255);
border:2px solid rgb(255, 255, 255);
border-radius:15px
css 复制代码
QFrame{
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(243, 175, 189),  stop:1 rgb(155, 118, 218));
border-top-left-radius:30px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:30px;
}

三、ui文件如下:

XML 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QPushButton" name="pushButton">
     <property name="text">
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QFrame" name="frame">
     <property name="frameShape">
      <enum>QFrame::StyledPanel</enum>
     </property>
     <property name="frameShadow">
      <enum>QFrame::Raised</enum>
     </property>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <item>
       <widget class="QSplitter" name="splitter">
        <property name="orientation">
         <enum>Qt::Horizontal</enum>
        </property>
        <widget class="QLabel" name="label">
         <property name="styleSheet">
          <string notr="true">background-color: rgb(238, 242, 255);
border:2px solid rgb(255, 255, 255);
border-radius:15px</string>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_2">
         <property name="styleSheet">
          <string notr="true">background-color: rgb(238, 242, 255);
border:2px solid rgb(255, 255, 255);
border-radius:15px</string>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
       </widget>
      </item>
      <item>
       <widget class="QFrame" name="frame_2">
        <property name="maximumSize">
         <size>
          <width>0</width>
          <height>16777215</height>
         </size>
        </property>
        <property name="styleSheet">
         <string notr="true">QFrame{
background-color: qradialgradient(cx:0, cy:0, radius:1, fx:0.1, fy:0.1, stop:0 rgb(243, 175, 189),  stop:1 rgb(155, 118, 218));
border-top-left-radius:30px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:30px;
}</string>
        </property>
        <property name="frameShape">
         <enum>QFrame::StyledPanel</enum>
        </property>
        <property name="frameShadow">
         <enum>QFrame::Raised</enum>
        </property>
       </widget>
      </item>
     </layout>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

四、代码

使用uic工具将ui文件转成py文件

python 复制代码
import sys

from PySide6.QtCore import QPropertyAnimation, QEasingCurve, QParallelAnimationGroup
from PySide6.QtWidgets import *

from zzz.ui_home_03 import Ui_Form


# 继承UI类
class MainWindow(QWidget, Ui_Form):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)
        self.pushButton.clicked.connect(self.settingBox)

    def settingBox(self):
        widthRightBox = self.frame_2.width()
        maxExtend = 100
        standard = 0

        if widthRightBox == 0:
            widthExtended = maxExtend
        else:
            widthExtended = standard

        # 创建属性动画
        self.right_box = QPropertyAnimation(self.frame_2, b"minimumWidth")
        self.right_box.setDuration(500)
        self.right_box.setStartValue(widthRightBox)
        self.right_box.setEndValue(widthExtended)
        self.right_box.setEasingCurve(QEasingCurve.InOutQuart)
        self.right_box.start()

        # 动画组 如果是多个动画同时执行,则创建动画组。
        # self.group = QParallelAnimationGroup()
        # self.group.addAnimation(self.right_box)
        # self.group.start()

if __name__ == '__main__':
    app = QApplication()

    window = MainWindow()
    window.show()

    sys.exit(app.exec())
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui