PyQt实现自定义提示框（带三角形）

淡淡的烟草味﹌ 2022-10-06 01:58 281阅读 0赞

PopupWidget.py

from PyQt5.QtCore import *
    from PyQt5.QtGui import *
    from PyQt5.QtWidgets import *
    
    class PopupWidget(QWidget):
        """
        direction 方向 0上 1下 2左 3右
        triangleOffset 小三角起始位置，默认为widget中间位置
        triangleWidth 小三角宽度，默认10
        triangleHeight 小三角高度，默认10
        """
        def __init__(self, direction=1, triangleOffset = None,triangleWidth = 10,triangleHeight = 10,parent=None):
            super(PopupWidget, self).__init__(parent)
            self.direction = direction
            self.triangleWidth = triangleWidth
            self.triangleHeight = triangleHeight
            self.setWindowFlags(Qt.Dialog | Qt.FramelessWindowHint)
            self.setAttribute(Qt.WA_TranslucentBackground)
            self.setStyleSheet("background-color: cyan;border-radius: 10px")
            # 宽高必须固定死，否则窗口会发生偏移
            self.setFixedSize(270, 210)
    
            pLabel = QLabel("功能介绍...")
            layout = QHBoxLayout(self)
            layout.addWidget(pLabel)
    
            if direction == 0:
                layout.setContentsMargins(0, 0, 0, self.triangleHeight)
                if triangleOffset:
                    self.triangleOffset = triangleOffset
                else:
                    self.triangleOffset = (self.width() - self.triangleWidth) / 2
            elif direction == 1:
                layout.setContentsMargins(0, self.triangleHeight, 0,0)
                if triangleOffset:
                    self.triangleOffset = triangleOffset
                else:
                    self.triangleOffset = (self.width() - self.triangleWidth) / 2
            elif direction == 2:
                layout.setContentsMargins(0, 0, self.triangleHeight, 0)
                if triangleOffset:
                    self.triangleOffset = triangleOffset
                else:
                    self.triangleOffset = (self.height() - self.triangleHeight) / 2
            elif direction == 3:
                layout.setContentsMargins(self.triangleHeight, 0, 0, 0)
                if triangleOffset:
                    self.triangleOffset = triangleOffset
                else:
                    self.triangleOffset = (self.height() - self.triangleHeight) / 2
    
        def paintEvent(self, event):
            painter = QPainter(self)
            painter.setRenderHint(QPainter.Antialiasing)
            painter.setPen(Qt.NoPen)
            painter.setBrush(QColor(255, 0, 0))
    
            # 小三角区域;
            trianglePolygon = QPolygonF()
    
            if self.direction == 0:
                trianglePolygon.append(QPoint(self.triangleOffset, self.height() - self.triangleHeight))
                trianglePolygon.append(QPoint(self.triangleOffset + self.triangleWidth / 2, self.height()))
                trianglePolygon.append(QPoint(self.triangleOffset + self.triangleWidth, self.height() - self.triangleHeight))
            elif self.direction == 1:
                trianglePolygon.append(QPoint(self.triangleOffset, self.triangleHeight))
                trianglePolygon.append(QPoint(self.triangleOffset + self.triangleWidth / 2, 0))
                trianglePolygon.append(QPoint(self.triangleOffset + self.triangleWidth, self.triangleHeight))
            elif self.direction == 2:
                trianglePolygon.append(QPoint(self.width() - self.triangleHeight, self.triangleOffset))
                trianglePolygon.append(QPoint(self.width(), self.triangleOffset+self.triangleWidth / 2))
                trianglePolygon.append(QPoint(self.width() - self.triangleHeight, self.triangleOffset + self.triangleWidth))
            elif self.direction == 3:
                trianglePolygon.append(QPoint(self.triangleHeight, self.triangleOffset))
                trianglePolygon.append(QPoint(0, self.triangleOffset+self.triangleWidth/2))
                trianglePolygon.append(QPoint(self.triangleHeight, self.triangleOffset+self.triangleWidth))
    
            painter.drawPolygon(trianglePolygon)
    
            super(PopupWidget, self).paintEvent(event)

PopupWidgetButton.py

from PyQt5.QtCore import *
    from PyQt5.QtWidgets import *
    from popupDemo3.PopupWidget import PopupWidget
    
    topDirection = 0
    bottomDirection = 1
    leftDirection = 2
    rightDirection = 3
    
    class PopupWidgetButton(QWidget):
        # 类数组，只能通过类名访问
        __popWidgets = []
        
        '''
        direction 方向
        displayTime 显示时间，默认0
        '''
        def __init__(self,direction=bottomDirection,displayTime=0,parent=None):
            super(PopupWidgetButton, self).__init__(parent)
            self.direction = direction
            self.displayTime = displayTime
            self.btn = QPushButton(self)
            self.btn.clicked.connect(self.handleClicked)
            # 默认状态就是不显示的，因此不用隐藏
            self.popWidget = PopupWidget(direction=direction,parent=self)
            # 实例化弹窗的时候注册到类数组中
            PopupWidgetButton.__popWidgets.append(self.popWidget)
    
        def setText(self,text):
            self.btn.setText(text)
    
        def handleClicked(self):
            # 遍历所有弹窗，保证当前只会显示一个
            for popWidget in PopupWidgetButton.__popWidgets:
                if popWidget == self.popWidget:
                    if self.popWidget.isHidden():
                        # 确定弹窗的位置
                        popWidgetPos = QPoint()
                        # 根据不同方向，计算坐标值
                        if self.direction == topDirection:
                            # 上
                            popWidgetPos.setX(self.btn.x() - (self.popWidget.width() - self.btn.width()) / 2)
                            popWidgetPos.setY(self.btn.y() - self.popWidget.height())
                        elif self.direction == bottomDirection:
                            # 下
                            popWidgetPos.setX(self.btn.x() - (self.popWidget.width() - self.btn.width()) / 2)
                            popWidgetPos.setY(self.btn.y() + self.btn.height())
                        elif self.direction == leftDirection:
                            # 左
                            popWidgetPos.setX(self.btn.x() + self.btn.width() - self.popWidget.width() - self.btn.width())
                            popWidgetPos.setY(self.btn.y() - (self.popWidget.height() - self.btn.height()) / 2)
                        elif self.direction == rightDirection:
                            # 右
                            popWidgetPos.setX(self.btn.x() + self.btn.width())
                            popWidgetPos.setY(self.btn.y() - (self.popWidget.height() - self.btn.height()) / 2)
                        # 移动窗体到指定位置
                        popWidget.move(self.mapToGlobal(popWidgetPos))
                        # 显示窗体
                        self.popWidget.show()
                        if self.displayTime > 0:
                            # 开启定时任务，到点关闭
                            QTimer.singleShot(self.displayTime,lambda :self.popWidget.hide())
                    else:
                        self.popWidget.hide()
                else:
                    popWidget.hide()
    
        @staticmethod
        def hideAllPopWidgets():
            """隐藏所有的弹窗，静态方法"""
            for popWidget in PopupWidgetButton.__popWidgets:
                popWidget.hide()

MainWidget.py

from PyQt5.QtCore import QEvent
    from popupDemo3.PopupWidgetButton import *
    
    class MainWidget(QWidget):
    
        def __init__(self, parent=None):
            super(MainWidget, self).__init__(parent)
    
            if not self.objectName():
                self.setObjectName("MainWidget")
            self.resize(400, 300)
            self.setWindowTitle("MainWidget")
    
            self.btn1 = PopupWidgetButton(direction=topDirection,parent=self)
            self.btn1.setText('上')
            self.btn1.move(100,250)
    
    
            self.btn2 = PopupWidgetButton(parent=self,displayTime=1000)
            self.btn2.setText('下')
            self.btn2.move(300, 250)
    
            self.btn3 = PopupWidgetButton(direction=leftDirection,parent=self)
            self.btn3.setText('左')
            self.btn3.move(100, 400)
    
            self.btn4 = PopupWidgetButton(direction=rightDirection,parent=self)
            self.btn4.setText('右')
            self.btn4.move(300, 400)
    
        def event(self, event):
            eventType = event.type()
            # 标题栏鼠标按下，抬起，双击事件以及窗体的鼠标点击事件，都隐藏所有的弹窗
            if eventType == QEvent.NonClientAreaMouseButtonRelease \
                    or eventType == QEvent.NonClientAreaMouseButtonPress \
                    or eventType == QEvent.NonClientAreaMouseButtonDblClick \
                    or eventType == QEvent.MouseButtonPress:
                PopupWidgetButton.hideAllPopWidgets()
            return super(MainWidget, self).event(event)

main.py

import sys
    
    from PyQt5.QtWidgets import QApplication
    from MainWidget import MainWidget
    
    if __name__ == '__main__':
        a = QApplication(sys.argv)
        w = MainWidget()
        w.show()
        w.resize(800, 600)
        sys.exit(a.exec())

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70]: /images/20221005/c7cc51aeab33481eb03c387440e0755d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/b8eaae246f2641a1b4e1b04640968b3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/1ea5b1b4a2914c188b88c90659d5a583.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA2OTg3NQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/433655acb14448ef8977fe2501d32f5f.png