带有按钮和数字指示器的Pyqt gui放置在背景图像上

Question

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

到目前为止，我已经使用样式表在Qwidget的选项卡上获得了特定应用程序的示意图。这是通过QT Designer完成的，因为我不了解QT。我也可以放置按钮和指示器，但是在调整窗口小部件大小时它们不会移动。在第一张图片中，我需要的地方放置了一个测试按钮。

正确放置在QT Designer中的按钮。

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

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

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

谢谢！

编辑：here问了类似的问题。我在各种论坛中读到，必须使用resizeEvent（）和move（）的某种组合。但我不知道将其添加到我的代码中。我当前的代码已从QT设计器的.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所示，我按照其示例进行了操作，并制作了另一个“类对象”，该类调用由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)

希望它可以帮助像我这样的人。谢谢！