帶有按鈕和數字指示器的 Pyqt gui 放置在背景圖像上

Question

我想為我的 python 腳本開發一個前端人機界面，它使用定制設計的電子電路從 Raspberry pi 獲取各種溫度和 DI/DO。 我已經管理了 python 端。 現在我希望將所有輸​​入值和按鈕（用於操作 DO）放在用戶可以看到和操作的 LCD 屏幕上。

到目前為止，我已經使用樣式表在 Qwidget 的選項卡上獲得了特定應用程序的示意圖。 這是通過 QT Designer 完成的，因為我不了解 QT。 我也可以放置按鈕和指示器，但是當調整小部件大小時它們不會移動。 在第一張圖片中，我需要的地方放置了一個測試按鈕。

按鈕正確放置在 QT 設計器中。

但是當我調整窗口大小時，背景圖像移動但按鈕仍然存在。

調整窗口大小時按鈕不會移動。

如何使按鈕位置和大小相對於小部件窗口？

謝謝！

編輯： 這里問了一個類似的問題。 我在各種論壇上讀到必須使用 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 編號。

如圖所示這里，我也跟着它的榜樣，做另一個“類對象”上使用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)

希望它可以幫助像我這樣的人。 謝謝！