赞
踩
目录
原理是利用属性动画来控制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;
- }
- <?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())

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。