PyQt5 使用 QFrame 绘制聊天（三角）气泡，并显示文字

PyQt5 使用 QFrame 绘制聊天（三角）气泡，并显示文字

在 PyQt5 中，当需要想得到一个自定义的聊天气泡时，可以使用 QPainter 进行自定义绘制

代码如下

使用 QPainter 进行自定义绘制

#!/usr/bin/env python3
# -*- coding: UTF-8 -*-
"""
@ File        : test_QFrame.py
@ Author      : yqbao
@ Version     : V1.0.0
@ Description : QFrame 聊天（三角）气泡
"""
from PyQt5.QtWidgets import QApplication, QFrame, QWidget, QVBoxLayout, QLabel
from PyQt5.QtGui import QPainter, QBrush, QPen, QColor
from PyQt5.QtCore import QPoint


class QFrameBubble(QFrame):
    def __init__(self, text, parent=None, pen="#000000", brush="#E0F7FA", triangle_position="left"):
        super().__init__(parent)
        self.pen = pen  # 画笔颜色
        self.brush = brush  # 笔刷颜色
        self.triangle_position = triangle_position  # 三角形位置

        # 设置无边框，以便自定义绘制
        self.setFrameStyle(QFrame.NoFrame)

        # 创建 QLabel 显示文字
        self.label = QLabel(text, self)
        self.label.setStyleSheet("background: transparent;")  # 设置背景透明
        self.label.setWordWrap(True)  # 如果文字过长，自动换行

        # 设置布局，将 QLabel 添加到 ChatBubble 中
        layout = QVBoxLayout(self)
        layout.addWidget(self.label)
        layout.setContentsMargins(20, 10, 20, 20)  # 设置气泡内部边距
        self.setLayout(layout)

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing, True)

        # 设置画笔和笔刷
        pen = QPen(QColor(self.pen))
        painter.setPen(pen)
        brush = QBrush(QColor(self.brush))
        painter.setBrush(brush)

        # 绘制气泡的矩形部分
        rect = self.rect()
        rect.adjust(10, 10, -10, -10)  # 调整矩形的大小
        painter.drawRoundedRect(rect, 10, 10)

        if self.triangle_position == 'left':
            # 绘制气泡的三角部分在左侧中央
            points = [
                QPoint(rect.left(), rect.center().y() + 10),
                QPoint(rect.left() - 10, rect.center().y()),
                QPoint(rect.left(), rect.center().y() - 10)
            ]
        elif self.triangle_position == 'right':
            # 绘制气泡的三角部分在右侧中央
            points = [
                QPoint(rect.right(), rect.center().y() - 10),
                QPoint(rect.right() + 10, rect.center().y()),
                QPoint(rect.right(), rect.center().y() + 10)
            ]
        elif self.triangle_position == 'bottom':
            # 绘制气泡的三角部分在底部中央
            points = [
                QPoint(rect.center().x() - 10, rect.bottom()),
                QPoint(rect.center().x(), rect.bottom() + 10),
                QPoint(rect.center().x() + 10, rect.bottom())
            ]
        else:
            # 绘制气泡的三角部分在顶部中央
            points = [
                QPoint(rect.center().x() + 10, rect.top()),
                QPoint(rect.center().x(), rect.top() - 10),
                QPoint(rect.center().x() - 10, rect.top())
            ]
        painter.drawPolygon(*points)

测试一下

#!/usr/bin/env python3
# -*- coding: UTF-8 -*-
"""
@ File        : test_QFrame.py
@ Author      : yqbao
@ Version     : V1.0.0
@ Description :
"""
from PyQt5.QtWidgets import QApplication, QFrame, QWidget, QVBoxLayout, QLabel
from PyQt5.QtGui import QPainter, QBrush, QPen, QColor
from PyQt5.QtCore import QPoint

class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(400, 300)
        # 创建自定义气泡
        bubble1 = QFrameBubble("绘制气泡的三角部分在左侧中央", parent=self, triangle_position='left')
        bubble2 = QFrameBubble("绘制气泡的三角部分在右侧中央", parent=self, triangle_position='right')
        bubble3 = QFrameBubble("绘制气泡的三角部分在底部中央", parent=self, triangle_position='bottom')
        bubble4 = QFrameBubble("绘制气泡的三角部分在顶部中央", parent=self, triangle_position='top')

        # 设置布局
        layout = QVBoxLayout()
        layout.addWidget(bubble1)
        layout.addWidget(bubble2)
        layout.addWidget(bubble3)
        layout.addWidget(bubble4)
        self.setLayout(layout)


if __name__ == '__main__':
    app = QApplication([])
    window = Example()
    window.show()
    app.exec_()

本文章的原文地址
GitHub主页