QtDesigner使用三(Embedding custom widgets from Qt Designer)

Embedding custom widgets from Qt Designer

• 随着你的应用变得越来越复杂，你会发现需要自定义widget，或者使用PyQt5库，比如说PyQtGraph，但是这些库的widget在Designer是不可获得的。
• 有帮助的是，QtDesigner支持一种的占位的机制，你可以在设计中使用占位widget去表示自定义的或者是外部的widget。这个教程将教你使用占位器去导入类似PyQtGraph 绘图工具

Promoting Widgets

• 在QtDesigner中使用占位器的原则如下
  • 在QtDesigner中正常制造一个UI
  • 增加占位widget表示需要添加自定义的widget
  • 当建立UI的时候，告诉Qt使用真正的widget取代占位器（在Qt中最后一步一般叫做Promoting）
• 如果你要添加的widget是现存的QtWidget的子类，你可能会使用基类作为你的占位器。比如说，你有一个自定义的按钮widget叫MyAwesomeButton是QPushButton的子类，使用QPushButton作为你的占位器，然后将这个占位器promote为你自己的MyQwesomeButton。这样你能够直接在QtDesigner中调用基类的属性，事件和行动。
• 如果你没有明确的基类去使用，你可以使用QWidget，所有的QtWidget中共有的基类

PyQt Graph

• 数据科学是python的最常见的应用，制作仪表板和的分析工具是PyQt5常见的应用。对于所有这些，能够在UI中添加图形是十分有用的，并且对于QtDesigner而言更是如此
• 在python中有很多绘图库，matplotlib库是最流行的，并且能够给PyQt5提供基本的支持。PyQtGraph是十分流行的选择，能够使用Qt原生的QGraphicScene提供快速缩放拖拽等功能。
• 无论你是否正在使用PyQtGraph还是matplotlib库满足你的绘图需要，Qt Designer都不支持绘图画板widget。在这篇教程中，教会带你尝试着如何在应用中使用这些自定义的控件。

Qt Designer

• 我们将使用QtDesigner去制作一个简单的UI设计，并且为OyGraph增加一个占位器。首先创建一个QMainWindow

• 添加一个占位器widget（placeholder）。因为PyQtGraph绘图widget并没有适合的基类，我么您将使用基类QWdget作为我们的占位器，选择Widget并放置在mainwindow的中间。并命名该widget为graphWidget。
  

• 右击选择widget并选择Promote。Promote a widget表示它有可能被指定的某一个子类取代，在我们的样例中就是被PyQtGraph的绘画widget取代。
  

• 按照要求输完之后，一定要点添加，然后才可以提升

• 结束之后并没有任何的变化，直接在相同目录下保存为mainwindow.ui文件

Loading the .ui file（将保存的ui文件进行加载）

• 将保存的卖弄window.ui文件加载到python中，调用如下代码。

from PyQt5 import QtWidgets, uic
from pyqtgraph import PlotWidget
import pyqtgraph as pg
import sys

class MainWindow(QtWidgets.QMainWindow):

    def __init__(self, *args, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)

        #Load the UI Page
        uic.loadUi('mainwindow.ui', self)


def main():
    app = QtWidgets.QApplication(sys.argv)
    main = MainWindow()
    main.show()
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()

• 可以看到mainwindow显示的是plot画布，然后开始创建的一个函数，用来画一个简单的折线，修改如下。

def __init__(self, *args, **kwargs):
    super(MainWindow, self).__init__(*args, **kwargs)

    #Load the UI Page
    uic.loadUi('mainwindow.ui', self)

    self.plot([1,2,3,4,5,6,7,8,9,10], [30,32,34,32,33,31,29,32,35,45])

def plot(self, hour, temperature):
    self.graphWidget.plot(hour, temperature)

• 所以，我们增加plot函数，该函数接受两个数列，temp表示问题，hour表示的时间，然后使用graph的widget的plot方法进行绘图。得到上面的就结果。
• 本质上是留出一个空位，然后加载对应ui之后，在一开始留出空位的时候就已经指定过了，直接调用即可。

总结

• 如果搜pyqt关于数据科学的内容可以输入如下关键字：dashboards and analysis tools
• 这篇文章对我有很大的用处，至少现在知道怎么画图了，知道怎么绘制散点图了，基本上完成了一个板块。总共要画四张图，第一张图就是单纯的显示图片，第二章就是关键帧，第三张就是数据分析，第四张就是录入视频，同时还是要展示提取的关键帧和表情的分布。

参考

Embedding custom widgets from Qt Designer