Pyqt图形用户界面，按钮和数字指示器放在背景图像上

Question

我想为我的python脚本开发一个前端人机界面，它使用定制设计的电子电路从Raspberry pi获取各种温度和DI/DOs。我已经管理好了python端。现在我想把所有的输入值和按钮（用于操作DOs）放在一个用户可以看到和操作的LCD屏幕上。在

到目前为止，我在一个特殊的应用程序中使用了一个样式表。这是通过QT设计器完成的，因为我对QT一无所知。我也可以放置按钮和指示器，但是当小部件调整大小时，它们不会移动。在第一张图片中，一个测试按钮被放置在我需要的地方。在

按钮正确放置在QT设计器中。在

但当我调整窗口大小时，背景图像会移动，但按钮仍会保留。在

调整窗口大小时按钮不移动。在

如何使按钮相对于窗口小部件的位置和大小？在

谢谢！在

编辑：一个类似的问题被问到here。我在各种论坛上读到，必须使用resizeEvent（）和move（）的一些组合。但我不知道该把它添加到我的代码中。从QT designer的.ui文件输出转换为.py时的当前代码：

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_TabWidget1(object):
    def setupUi(self, TabWidget1):
        TabWidget1.setObjectName("TabWidget1")
        TabWidget1.setEnabled(True)
        TabWidget1.resize(1092, 867) 
        # TabWidget1.move(0, 0)

        self.tab1 = QtWidgets.QWidget()
        self.tab1.setAutoFillBackground(False)
        self.tab1.setStyleSheet("image:url(:/images/Jaggery Unit Frontend V0.11.png)")
        self.tab1.setObjectName("tab1")

        self.pushButton = QtWidgets.QPushButton(self.tab1)
        self.pushButton.setGeometry(QtCore.QRect(310, 220, 75, 23))
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.pushButton.sizePolicy().hasHeightForWidth())
        self.pushButton.setSizePolicy(sizePolicy)
        self.pushButton.setContextMenuPolicy(QtCore.Qt.DefaultContextMenu)
        self.pushButton.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.pushButton.setObjectName("pushButton")

        TabWidget1.addTab(self.tab1, "")
        self.tab2 = QtWidgets.QWidget()
        self.tab2.setObjectName("tab2")
        TabWidget1.addTab(self.tab2, "")

        self.retranslateUi(TabWidget1)
        TabWidget1.setCurrentIndex(0)

        QtCore.QMetaObject.connectSlotsByName(TabWidget1)

    def retranslateUi(self, TabWidget1):
        _translate = QtCore.QCoreApplication.translate
        TabWidget1.setWindowTitle(_translate("TabWidget1", "TabWidget"))
        self.pushButton.setText(_translate("TabWidget1", "PushButton"))
        TabWidget1.setTabText(TabWidget1.indexOf(self.tab1), _translate("TabWidget1", "Tab 1"))
        TabWidget1.setTabText(TabWidget1.indexOf(self.tab2), _translate("TabWidget1", "Tab 2"))

import resources

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    TabWidget1 = QtWidgets.QTabWidget()
    ui = Ui_TabWidget1()
    ui.setupUi(TabWidget1)
    TabWidget1.show()
    sys.exit(app.exec_())

Answer 1

我想出了办法。由于我缺乏QT方面的知识，我不知道这是如何工作的，只知道它是如何工作的。我的UI包含一个带有选项卡的窗口。在第一个选项卡“概述”中，有我需要重新定位的按钮和lcd编号。在

如here所示，我遵循它的示例，创建了另一个“class object”，它调用QT Designer创建的原始UI。其余部分是以下代码中的注释。在

class MainWindow(QtWidgets.QTabWidget):
    resized = QtCore.pyqtSignal()
    def  __init__(self, parent=None):
        super(MainWindow, self).__init__(parent=parent)

        # Here import the QTdesigner created ui class
        ui = Ui_TabWidget1()
        ui.setupUi(self)

        # First get the relative positions of the childwidgets wrt original screen.
        relative_widget_positions,widgetlist = self.get_relative_widget_positions()

        #Then connect the resized event with a function that manipulates the widgets
        self.resized.connect(lambda: self.reposition_widgets_on_resize(relative_widget_positions,widgetlist))
    #                                -

    # Find the various children widgets of 'Overviewtab' of the imported UI.
    def get_relative_widget_positions(self):
        # get list of widgets along with their positions, sizes
        widgetlist = self.findChildren((QtWidgets.QLCDNumber , QtWidgets.QPushButton))

        # Compute the background image coordinates
        I_x,I_y,I_w,I_h = self.get_image_coordinates()

        # initate the relative positions array
        relative_widget_positions =[]

        # iterate over each widget to compute its relative position wrt image width and height
        for w in widgetlist:
            pos = w.pos()
            relative_x = (pos.x()-I_x)/I_w
            relative_y = (pos.y()-I_y)/I_h
            relative_widget_positions.append([relative_x,relative_y])

        # print(relative_widget_positions)

        return relative_widget_positions,widgetlist

    #                                -    
    def resizeEvent(self, event):
        self.resized.emit()
        return super(MainWindow, self).resizeEvent(event)

    #                                -
    def reposition_widgets_on_resize(self,relative_widget_positions,widgetlist):
        I_x,I_y,I_w,I_h = self.get_image_coordinates()

        for w,r in zip(widgetlist,relative_widget_positions):
            w.move(r[0]*I_w + I_x , r[1]*I_h + I_y)

    #                                -
    def get_image_coordinates(self):

        # find area sizes. Note that the top tabs need to be removed fromt
        # the area where image is drawn. Also all child widgets are wrt to geometry of parent rather than frame.
        # so use geometry() rather than frameGeometry(). See: 
        # https://doc-snapshots.qt.io/4.8/application-windows.html#window-geometry
        # Also, the 'corrections' below are necessary to adjust for the 'Tabs' on the top,
        # as well as some arbitrary adjustments i had to make for positioning to be right.
        g = self.geometry()
        g_x = g.x() + 10
        g_y = g.y() + 43
        g_w = g.width() - 20
        g_h = g.height() - 43

        # From the image file's widthe/height
        I_w_to_h_ratio = 1.277

        # Based on the window, the Image's either width or height is the same as that of the 'client area' as the image scales without changing its aspect ratio.
        if(g_w/g_h > I_w_to_h_ratio):  # normal screen orientation
            I_h = g_h
            I_w = I_w_to_h_ratio * I_h
        elif(g_w/g_h <= I_w_to_h_ratio):  # abnormal screen orientation
            I_w = g_w
            I_h = I_w/I_w_to_h_ratio

        # Compute image origins - very important parameter.
        I_x = (g_w - I_w)/2 #+ g_x
        I_y = (g_h - I_h)/2 #+ g_y

        # print(g_x,g_y,g_w,g_h,I_x,I_y,I_w,I_h)

        return (I_x,I_y,I_w,I_h)

希望它能帮助像我这样的人。谢谢！在