我已经在PyQt5中研究了一个小项目,我想尝试使用样式表使其看起来更好一些。为了进行测试,我将an example from W3Schools复制到了一个新项目中,只是看它是否可以工作。该示例是一个按钮,背景从白色逐渐变为绿色。一切工作都在进行,除了衰落而不是衰落,过渡是瞬间发生的。我的问题是如何获得淡入淡出效果?我也很好奇如何才能获得相同的过渡效果,但可以使用按钮的其他方面(例如大小或形状)。
我进行了很多搜索,但是发现的所有相关内容都超出了我的知识范围。我所知道的是,我可能必须编写代码而不是使用样式表,但是我不确定如何做到这一点。我当时想我可以做一个不断改变颜色的功能,但我也认为可能有更好的方法可以做到这一点。
这是我转换.ui文件时生成的代码。
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_Dialog(object):
def setupUi(self, Dialog):
Dialog.setObjectName("Dialog")
Dialog.resize(400, 300)
self.pushButton = QtWidgets.QPushButton(Dialog)
self.pushButton.setGeometry(QtCore.QRect(10, 10, 381, 281))
self.pushButton.setMouseTracking(False)
self.pushButton.setAutoFillBackground(False)
self.pushButton.setStyleSheet(".QPushButton{\n"
"background-color: #4CAF50;\n"
"border: none;\n"
"color: white;\n"
"padding: 16px 32px;\n"
"text-align: center;\n"
"text-decoration: none;\n"
"display: inline-block;\n"
"font-size: 16px;\n"
"margin: 4px 2px;\n"
"transition-duration: 0.4s;\n"
"cursor: pointer;\n"
"}\n"
"\n"
"#pushButton{\n"
"background-color: white;\n"
"color: black;\n"
"border: 2px solid #4CAF50;\n"
"}\n"
"\n"
"#pushButton:hover{\n"
"background-color: #4CAF50;\n"
"color: white;\n"
"}")
self.pushButton.setObjectName("pushButton")
self.retranslateUi(Dialog)
QtCore.QMetaObject.connectSlotsByName(Dialog)
def retranslateUi(self, Dialog):
_translate = QtCore.QCoreApplication.translate
Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
self.pushButton.setText(_translate("Dialog", "Click Here"))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
Dialog = QtWidgets.QDialog()
ui = Ui_Dialog()
ui.setupUi(Dialog)
Dialog.show()
sys.exit(app.exec_())
这是样式表中的内容,但更具可读性。
.QPushButton{
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
#pushButton{
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
#pushButton:hover{
background-color: #4CAF50;
color: white;
}
这里是按钮的图片。
悬停之前
及之后
如果从终端/ CMD执行OP代码,则会获得以下警告:
Unknown property display
Unknown property transition-duration
Unknown property cursor
...
而且您为什么指出这些属性是未知的?由于Qt样式表不是CSS,因此QSS基于CSS2.1,并且属性代码有限(有关更多信息,请参见here),因此该标准中未定义诸如显示,过渡持续时间和光标之类的属性,因此它不起作用。
如果要制作动画,应使用一些QXAnimation,在这种情况下,我将使用开始在QVariantAnimation
和QVariantAnimation
方法中运行的enterEvent()
:
enterEvent()