如何在 QT Designer 中获取 QWebEngine

Question

我正在尝试制作一个为 youtube 视频添加字幕的程序，因为他们去年删除了社区字幕功能。我希望能够在 QT Designer 中使用 QWebEngine 小部件，但它不是主发行版的一部分，我找不到在 Windows 上安装它的步骤。

Answer 1

C++

问题与post 类似，但不是 QChartView 你想要 QWebEngineView 所以我的回答会更简洁，我只会指出变化：

推广

1. 先在.pro中添加QT += webenginewidgets
2. 将 QWidget 放置到设计中。
3. 右键单击 QWidget 并选择提升到...
4. 执行上述操作时，会出现一个菜单，在菜单中应在Promoted Class Name 中设置QWebEngineView，在Header 文件中设置QWebEngineView，然后按添加按钮，最后按promote。

插件

您必须使用您的 Qt 版本的分支克隆存储库，在示例中我将使用 Qt 5.15.2，然后您必须编译插件并安装它：

git clone -b 5.15.2 https://code.qt.io/qt/qtwebengine.git
cd qtwebengine/src/plugins/qwebengineview
qmake .
make
make install

如果您不想克隆项目，则可以从here 下载文件并运行 qmake、make 和 make install。

---

Python

似乎 OP 使用的是 python 而不是 C++，所以第一个解决方案有另一种方法，但第二种方法仍然有效，因为它安装了 QtDesigner 插件。考虑到上述情况，我将展示在 QtDesigner 中集成 QWebEngineView 的简单方法。

推广

您只需要使用步骤 2 到 4，但设置标题“PyQt5.QWebEngineWidgets”，例如您将获得以下信息：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QWebEngineView" name="widget"/>
    </item>
    <item>
     <widget class="QPushButton" name="pushButton">
      <property name="text">
       <string>PushButton</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>28</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <customwidgets>
  <customwidget>
   <class>QWebEngineView</class>
   <extends>QWidget</extends>
   <header>PyQt5.QWebEngineWidgets</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

如果您要使用 PySide2，只需将其更改为 PySide2.QtWebEngineWidgets。

容器

另一个更简单的选择是使用 QWidget 作为容器，然后使用布局来放置它。

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QWidget" name="widget" native="true"/>
    </item>
    <item>
     <widget class="QPushButton" name="pushButton">
      <property name="text">
       <string>PushButton</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>28</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

import os
from pathlib import Path

from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.uic import loadUi

CURRENT_DIRECTORY = Path(__file__).resolve().parent


class Widget(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        filename = os.fspath(CURRENT_DIRECTORY / "gui.ui")
        loadUi(filename, self)
        lay = QVBoxLayout(self.widget)
        self.webview = QWebEngineView()
        lay.addWidget(self.webview)


def main():
    import sys

    app = QApplication(sys.argv)
    w = Widget()
    w.show()
    sys.exit(app.exec_())


if __name__ == "__main__":
    main()

_{注意：在QtDesigner中提升一个widget不允许修改widget的属性，只有当.ui被加载到项目中时才能使用。}