PySide2中QWebEngineView设置圆形地图样式失效问题求助

问题说明 #

使用PySide2的QWebEngineView加载folium地图时，直接给QWebEngineView设置border-radius样式无法得到理想的圆形效果——地图内容会超出圆角范围，依然显示方形区域。期望实现完全圆形的地图展示。

解决方案 #

QWebEngineView的网页内容不会被自身的border-radius裁剪，需要通过父容器裁剪的方式实现：

• 创建一个QWidget作为QWebEngineView的父容器
• 给父容器设置border-radius和overflow:hidden样式，实现内容裁剪
• 将QWebEngineView填充到整个父容器中，移除自身的圆角样式

修改后的代码 #

from PySide2.QtWebEngineWidgets import QWebEngineView
from PySide2 import QtCore, QtGui, QtWidgets
import folium
import sys
import io

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(400, 400)
        
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        
        # 创建圆形裁剪容器
        self.map_container = QtWidgets.QWidget(self.centralwidget)
        self.map_container.setGeometry(QtCore.QRect(50, 50, 300, 300))
        # 设置容器样式：圆角+溢出隐藏，实现裁剪
        self.map_container.setStyleSheet("""
            QWidget {
                border-radius: 150px;
                overflow: hidden;
                border: none;
            }
        """)
        
        # 将QWebEngineView放入容器中
        self.qwebengine = QWebEngineView(self.map_container)
        # 让WebView填充整个容器
        self.qwebengine.setGeometry(QtCore.QRect(0, 0, 300, 300))
        self.qwebengine.setAutoFillBackground(False)
        # 去掉WebView自身的圆角样式
        self.qwebengine.setStyleSheet("QWebEngineView{border: none;}")
        self.qwebengine.setObjectName("qwebengine")

        self.latitude = 30.2676143646
        self.longitude = -9.5122070312
        coordinate = (self.latitude , self.longitude)
        self.map = folium.Map(zoom_start=10, location=coordinate, zoom_control=False)
        data = io.BytesIO()
        self.map.save(data, close_file=False)
        self.qwebengine.setHtml(data.getvalue().decode())

        MainWindow.setCentralWidget(self.centralwidget)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
        

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    window = Ui_MainWindow()
    window.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

关键说明 #

• 父容器的overflow:hidden会将超出圆角范围的内容裁剪掉，这是实现圆形效果的核心
• QWebEngineView需要完全填充父容器，避免出现间隙
• 移除了folium.Map中无效的radius参数（folium.Map无该配置项）

内容的提问来源于stack exchange，提问作者RACHID BEN ABDELMALEK