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

ゝ一世哀愁。 2024-03-27 19:22 11阅读 0赞

**目录**

一、效果图

二、qtDesigner

三、ui文件如下：

四、代码

--------------------

#### 一、效果图 ####

![477d323552544cb0a19e7c73b1b95919.gif][]

#### 二、qtDesigner ####

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

①先拖出相应的控件

![4d235b581f194fab89ab5e3430feb3c4.gif][]

②布局一下

![47539f06ae8c44e8a7272bf973a1f222.gif][] ③填上一些样式

![f5abe742ac674214893b51fc099a995d.gif][]

![4c86c119bf07426e87bff055ac2908b3.gif][]

相关QSS

background-color: rgb(238, 242, 255);
    border:2px solid rgb(255, 255, 255);
    border-radius:15px

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 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文件

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())

[477d323552544cb0a19e7c73b1b95919.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e5ea9d83dc2c4a8c9d53a8cbf0d612a4.png
[4d235b581f194fab89ab5e3430feb3c4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d421198528c74e06b3eb6af182d42a47.png
[47539f06ae8c44e8a7272bf973a1f222.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/cc7a48bf04244d7987913f0112c55db9.png
[f5abe742ac674214893b51fc099a995d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a6e18c99fd8c41b5a6bb57574310fa90.png
[4c86c119bf07426e87bff055ac2908b3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/038bc2870aa54e8dbec270ff963d4320.png