如何在PySimpleGUIQt中渲染HTML？

我尝试把Jason Yang在《Rendering HTML in PySimpleGUI?》中发布的代码修改为适配PySimpleGUIQt的版本，但没能成功。我在PySimpleGUIQt.py文件里没找到QWebEnginePage/QWebEngineView相关的内置元素。

下面是我的两次尝试代码，都没有达到预期效果：

首次尝试代码 #

import PySimpleGUIQt as sg
from PySide2.QtWebEngineWidgets import QWebEngineView
html = '''
<canvas id="myCanvas" width="100" height="25">
Not supported</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(10,10,5,0,2*Math.PI);
ctx.stroke();
</script>
'''
layout_advertise = [
[sg.Multiline(
    size=(50, 5),
    text_color='white',
    background_color='green',
    disabled=True,
    key='Advertise')],
]
layout = [  [sg.Frame("Html to show",  layout_advertise)] ]
window = sg.Window('Web', layout)
while True:
    event, values = window.read()

    advertise = window['Advertise'].Widget

    advertise.setHtml(html)

    if event == sg.WIN_CLOSED or event == 'Cancel': # if user closes window or clicks cancel
        break
window.close()

第二次尝试代码 #

import PySimpleGUIQt as sg
from PySide2.QtWebEngineWidgets import QWebEngineView
from PySide2.QtWidgets import *
import sys  # 原代码漏导入sys

html = '''
<canvas id="myCanvas" width="100" height="25">
Not supported</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(10,10,5,0,2*Math.PI);
ctx.stroke();
</script>
'''

app = sg.QApplication([]) 
advertise = QWebEngineView()
advertise.setHtml(html)
# 强行添加PSG元素属性的操作无效
advertise.ParentContainer = None
advertise.Type = 'multiline'
advertise.Key = 'Ads'

layout = [  [advertise] ]
sys.exit(app.exec_()) # 提前退出导致后续代码不执行
window = sg.Window('Web').Layout(layout).Finalize()
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED or event == 'Cancel': # if user closes window or clicks cancel
        break
window.close()

问题分析 #

1. 首次尝试错误：sg.Multiline对应的Qt控件是QTextEdit，它并没有setHtml方法（该方法属于QWebEngineView），所以调用后无任何效果。
2. 第二次尝试错误：
   • 遗漏sys模块导入；
   • 提前调用sys.exit(app.exec_())导致后续窗口初始化代码完全不执行；
   • 给QWebEngineView强行添加PySimpleGUI元素专属属性的操作无效，PySimpleGUIQt无法直接识别原生Qt控件。

正确实现代码 #

PySimpleGUIQt提供了sg.QtWidget元素，可用于包装原生Qt控件，将QWebEngineView嵌入到PySimpleGUIQt窗口中：

import PySimpleGUIQt as sg
from PySide2.QtWebEngineWidgets import QWebEngineView

# 修正原HTML的语法错误（canvas标签多了一个引号）
html = '''
<canvas id="myCanvas" width="100" height="25">
Not supported</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(10,10,5,0,2*Math.PI);
ctx.stroke();
</script>
'''

# 创建QWebEngineView控件并设置HTML内容
web_view = QWebEngineView()
web_view.setHtml(html)

# 用sg.QtWidget包装原生Qt控件，集成到PSGQt布局中
layout = [
    [sg.Frame("HTML渲染结果", [[sg.QtWidget(web_view, size=(100, 30))]])]
]

# 窗口创建时添加finalize=True，确保控件初始化完成
window = sg.Window('PySimpleGUIQt 渲染HTML', layout, finalize=True)

while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break

window.close()

关键说明 #

• sg.QtWidget是PySimpleGUIQt嵌入原生Qt控件的标准方式，能让Qt控件适配PSGQt的布局系统；
• 无需手动创建QApplication，PySimpleGUIQt会自动处理应用程序实例；
• 如果需要动态更新HTML内容，直接在事件循环中调用web_view.setHtml(新HTML内容)即可。

内容的提问来源于stack exchange，提问作者SkySibe