前言
Qt 自帶的工具提示樣式不太好看,就算加了樣式表也時不時會失效,同時工具提示沒有陰影,看起來就更難受了。所以本篇部落格將會介紹自定義工具提示的方法,效果如下圖所示:
實現過程
工具提示其實就是一個帶了標籤的視窗,為了給工具提示加上陰影,只要給視窗設定 QGraphicsShadowEffect
即可。同時 QToolTip
彈出之後不會一直卡在介面上,一段時間後就會消失,所以我們應該給自定義的工具提示加上一個 QTimer
,時間溢位之後就隱藏工具提示。
# coding:utf-8
from PyQt5.QtCore import QFile, QPropertyAnimation, QTimer, Qt
from PyQt5.QtGui import QColor
from PyQt5.QtWidgets import (QApplication, QFrame, QGraphicsDropShadowEffect,
QHBoxLayout, QLabel)
class ToolTip(QFrame):
def __init__(self, text='', parent=None):
super().__init__(parent=parent)
self.__text = text
self.__duration = 1000
self.timer = QTimer(self)
self.hBox = QHBoxLayout(self)
self.label = QLabel(text, self)
self.ani = QPropertyAnimation(self, b'windowOpacity', self)
# set layout
self.hBox.addWidget(self.label)
self.hBox.setContentsMargins(10, 7, 10, 7)
# add shadow
self.shadowEffect = QGraphicsDropShadowEffect(self)
self.shadowEffect.setBlurRadius(32)
self.shadowEffect.setColor(QColor(0, 0, 0, 60))
self.shadowEffect.setOffset(0, 5)
self.setGraphicsEffect(self.shadowEffect)
self.timer.setSingleShot(True)
self.timer.timeout.connect(self.hide)
# set style
self.setAttribute(Qt.WA_StyledBackground)
self.setDarkTheme(False)
self.__setQss()
def text(self):
return self.__text
def setText(self, text: str):
""" set text on tooltip """
self.__text = text
self.label.setText(text)
self.label.adjustSize()
self.adjustSize()
def duration(self):
return self.__duration
def setDuration(self, duration: int):
""" set tooltip duration in milliseconds """
self.__duration = abs(duration)
def __setQss(self):
""" set style sheet """
f = QFile("resource/tooltip.qss")
f.open(QFile.ReadOnly)
self.setStyleSheet(str(f.readAll(), encoding='utf-8'))
f.close()
self.label.adjustSize()
self.adjustSize()
def setDarkTheme(self, dark=False):
""" set dark theme """
dark = 'true' if dark else 'false'
self.setProperty('dark', dark)
self.label.setProperty('dark', dark)
self.setStyle(QApplication.style())
def showEvent(self, e):
self.timer.stop()
self.timer.start(self.__duration)
super().showEvent(e)
def hideEvent(self, e):
self.timer.stop()
super().hideEvent(e)
工具提示繼承自 QFrame
的原因是我們需要設定邊框樣式,樣式表如下所示,支援亮暗兩種主題:
ToolTip[dark="false"] {
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 5px;
background-color: rgb(243, 243, 243);
}
ToolTip[dark="true"] {
border: 1px solid rgb(28, 28, 28);
border-radius: 5px;
background-color: rgb(43, 43, 43);
}
QLabel {
background-color: transparent;
font: 15px 'Segoe UI', 'Microsoft YaHei';
}
QLabel[dark="false"] {
color: black;
}
QLabel[dark="true"] {
color: white;
}
測試
下述程式碼的執行效果就是動圖中所示的樣子,只要給想要設定工具提示的部件安裝上事件過濾器,就能將 QToolTip
替換成自定義的工具提示:
# coding:utf-8
import sys
from PyQt5.QtCore import QEvent, QPoint
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout
from tool_tip import ToolTip
class Demo(QWidget):
def __init__(self):
super().__init__()
self.hBox = QHBoxLayout(self)
self.button1 = QPushButton('キラキラ', self)
self.button2 = QPushButton('食べた愛', self)
self._toolTip = ToolTip(parent=self)
# self._toolTip.setDarkTheme(True)
self.button1.setToolTip('aiko - キラキラ ✨')
self.button2.setToolTip('aiko - 食べた愛 ?')
self.button1.setToolTipDuration(1000)
self.button2.setToolTipDuration(5000)
self.button1.installEventFilter(self)
self.button2.installEventFilter(self)
self.hBox.setContentsMargins(30, 30, 30, 30)
self.hBox.setSpacing(20)
self.hBox.addWidget(self.button1)
self.hBox.addWidget(self.button2)
self.resize(600, 300)
self._toolTip.hide()
with open('resource/demo.qss', encoding='utf-8') as f:
self.setStyleSheet(f.read())
def eventFilter(self, obj, e: QEvent):
if obj is self:
return super().eventFilter(obj, e)
tip = self._toolTip
if e.type() == QEvent.Enter:
tip.setText(obj.toolTip())
tip.setDuration(obj.toolTipDuration())
pos = obj.mapTo(self, QPoint(0, 0))
x = pos.x() + obj.width()//2 - tip.width()//2
y = pos.y() - 5 - tip.height()
# adjust postion to prevent tooltips from appearing outside the window
x = min(max(5, x), self.width() - tip.width() - 5)
y = min(max(5, y), self.height() - tip.height() - 5)
tip.move(x, y)
tip.show()
elif e.type() == QEvent.Leave:
tip.hide()
elif e.type() == QEvent.ToolTip:
return True
return super().eventFilter(obj, e)
if __name__ == '__main__':
app = QApplication(sys.argv)
w = Demo()
w.show()
app.exec_()
用到的樣式檔案如下:
QWidget{
background-color: white;
}
QPushButton {
background-color: rgb(204, 204, 204);
padding: 10px 64px 10px 64px;
font: 19px 'Microsoft YaHei';
border: transparent;
border-radius: 4px;
}
QPushButton:pressed:hover {
background-color: rgb(153, 153, 153);
}
QPushButton:hover {
background-color: rgb(230, 230, 230);
}
QPushButton:disabled {
background-color: rgb(204, 204, 204);
color: rgb(122, 122, 122);
}
後記
自定義工具提示的方法已經介紹完了,更多好康的自定義小部件參見 GitHub 倉庫 https://github.com/zhiyiYo/PyQt-Fluent-Widgets,以上~~