目录

原理是利用属性动画来控制QFrame的minimumWidth属性。
①先拖出相应的控件

②布局一下
③填上一些样式

相关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;
- }
- "1.0" encoding="UTF-8"?>
- <ui version="4.0">
- <class>Formclass>
- <widget class="QWidget" name="Form">
- <property name="geometry">
- <rect>
- <x>0x>
- <y>0y>
- <width>400width>
- <height>300height>
- rect>
- property>
- <property name="windowTitle">
- <string>Formstring>
- property>
- <layout class="QVBoxLayout" name="verticalLayout">
- <item>
- <widget class="QPushButton" name="pushButton">
- <property name="text">
- <string>PushButtonstring>
- property>
- widget>
- item>
- <item>
- <widget class="QFrame" name="frame">
- <property name="frameShape">
- <enum>QFrame::StyledPanelenum>
- property>
- <property name="frameShadow">
- <enum>QFrame::Raisedenum>
- property>
- <layout class="QHBoxLayout" name="horizontalLayout">
- <item>
- <widget class="QSplitter" name="splitter">
- <property name="orientation">
- <enum>Qt::Horizontalenum>
- 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:15pxstring>
- property>
- <property name="text">
- <string>TextLabelstring>
- 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:15pxstring>
- property>
- <property name="text">
- <string>TextLabelstring>
- property>
- widget>
- widget>
- item>
- <item>
- <widget class="QFrame" name="frame_2">
- <property name="maximumSize">
- <size>
- <width>0width>
- <height>16777215height>
- 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::StyledPanelenum>
- property>
- <property name="frameShadow">
- <enum>QFrame::Raisedenum>
- 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())