PyQt6嵌入Web组件的无边框窗口如何实现平滑圆角？

核心思路 #

由于QSS对QWebEngineView这类Web组件无效，setMask的位图裁剪会产生锯齿，我们可以通过透明窗口+矢量圆角裁剪的方式实现平滑边角：

1. 将窗口设置为无边框+透明背景，让圆角外的区域完全透明
2. 重写窗口的paintEvent，使用带抗锯齿的矢量路径绘制圆角区域，作为Web组件的显示容器
3. 确保Web组件背景透明，避免覆盖窗口的圆角效果

完整代码实现 #

from PyQt6.QtWidgets import QMainWindow, QApplication, QWebEngineView
from PyQt6.QtGui import QPainter, QColor, QPainterPath
from PyQt6.QtCore import Qt, QRectF
from PyQt6.QtCore import QUrl

class FramelessWebWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        # 配置无边框+透明背景
        self.setWindowFlags(Qt.FramelessWindowHint)
        self.setAttribute(Qt.WA_TranslucentBackground)
        self.setFixedSize(800, 600)

        # 初始化Web组件
        self.web_view = QWebEngineView(self)
        # 设置Web页面背景透明
        self.web_view.page().setBackgroundColor(Qt.transparent)
        # 加载目标页面（替换为你的Web资源路径）
        self.web_view.load(QUrl("https://example.com"))
        # 调整Web组件位置，留出圆角边距
        self.web_view.setGeometry(10, 10, self.width()-20, self.height()-20)

    def paintEvent(self, event):
        painter = QPainter(self)
        # 开启抗锯齿，确保圆角平滑
        painter.setRenderHint(QPainter.RenderHint.Antialiasing)

        # 创建圆角路径
        path = QPainterPath()
        # 缩小矩形范围，避免内容超出圆角
        rounded_rect = QRectF(self.rect()).adjusted(5, 5, -5, -5)
        # 设置圆角半径（可根据需求调整）
        path.addRoundedRect(rounded_rect, 20, 20)

        # 裁剪区域为圆角路径
        painter.setClipPath(path)
        # 绘制窗口背景色（可自定义）
        painter.fillRect(self.rect(), QColor(255, 255, 255))

        # 可选：绘制圆角边框
        # painter.setPen(QColor(180, 180, 180))
        # painter.drawRoundedRect(rounded_rect, 20, 20)

if __name__ == "__main__":
    app = QApplication([])
    window = FramelessWebWindow()
    window.show()
    app.exec()

关键注意事项 #

• WA_TranslucentBackground必须开启：这是实现圆角外区域透明的前提，否则圆角外会显示窗口默认背景色
• Web组件背景透明：通过page().setBackgroundColor(Qt.transparent)让Web页面背景与窗口圆角区域融合，若你的HTML页面有固定背景色，需同时在HTML中设置body { background: transparent; }
• 抗锯齿开关：setRenderHint(QPainter.RenderHint.Antialiasing)是实现平滑圆角的核心，必须添加
• 内容边距调整：通过adjusted和setGeometry调整Web组件位置，避免页面内容被圆角裁剪

可选扩展：无边框窗口拖动 #

如果需要拖动窗口，可添加以下事件重写：

def mousePressEvent(self, event):
    if event.button() == Qt.MouseButton.LeftButton:
        self.drag_pos = event.globalPosition().toPoint() - self.frameGeometry().topLeft()
        event.accept()

def mouseMoveEvent(self, event):
    if event.buttons() == Qt.MouseButton.LeftButton:
        self.move(event.globalPosition().toPoint() - self.drag_pos)
        event.accept()

内容的提问来源于stack exchange，提问作者Роман Игнатенко