目录
一、效果图
二、qtDesigner
三、ui文件如下:
四、代码
原理是利用属性动画来控制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;
}
Form
0
0
400
300
Form
-
PushButton
-
QFrame::StyledPanel
QFrame::Raised
-
Qt::Horizontal
background-color: rgb(238, 242, 255);
border:2px solid rgb(255, 255, 255);
border-radius:15px
TextLabel
background-color: rgb(238, 242, 255);
border:2px solid rgb(255, 255, 255);
border-radius:15px
TextLabel
-
0
16777215
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;
}
QFrame::StyledPanel
QFrame::Raised
使用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())