QGroupBox中的QButton布局，用於在PyQt5中制作UI

Question

我安排了QButton，因為第一行有四個按鈕，第二行有五個按鈕。 我的代碼是使用Python2.7中的PyQt5開發的。

from PyQt5 import QtCore, QtGui, QtWidgets
import cv2
import time
import face_recognition.api as face_recognition

class Thread(QtCore.QThread):
    changePixmap = QtCore.pyqtSignal(QtGui.QImage)
    scaled_size = QtCore.QSize(640, 480)

    def run(self):
        cap = cv2.VideoCapture(1)
        cap.set(3,1280);
        cap.set(4,1024);
        time.sleep(2)
        while True:
            ret, frame = cap.read()                  
            if ret:
                r=1
                face_locations=[]
                rescaleSize=480
                if(frame.shape[0] > 480 and frame.shape[1] > 640):
                    r = rescaleSize / float(frame.shape[0])
                    dim = (int(frame.shape[1] * r), rescaleSize)
                    face_locations = face_recognition.face_locations(cv2.resize(frame, dim, fx=0.0, fy=0.0))
                else:
                    face_locations = face_recognition.face_locations(frame)
                for face_location in face_locations:  
                    top, right, bottom, left = face_location
                    cv2.rectangle(frame,(int(right/r),int(top/r)),(int(left/r),int(bottom/r)),(0,255,0),2)
                rgbImage = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
                convertToQtFormat = QtGui.QImage(rgbImage.data, rgbImage.shape[1], rgbImage.shape[0], QtGui.QImage.Format_RGB888)
                p = convertToQtFormat.scaled(self.scaled_size, QtCore.Qt.KeepAspectRatio)
                self.changePixmap.emit(p)

    def scaled(self, scaled_size):
        self.scaled_size = scaled_size


class PlayStreaming(QtWidgets.QLabel):
    reSize = QtCore.pyqtSignal(QtCore.QSize)
    def __init__(self):
        super(PlayStreaming, self).__init__()
        self.initUI()

    @QtCore.pyqtSlot(QtGui.QImage)
    def setImage(self, image):
        self.label.setPixmap(QtGui.QPixmap.fromImage(image))

    def initUI(self):
        self.setWindowTitle("Image")
        # create a label
        self.label = QtWidgets.QLabel(self)
        th = Thread(self)
        th.changePixmap.connect(self.setImage)
        self.reSize.connect(th.scaled)
        th.start()
        lay = QtWidgets.QVBoxLayout(self)
        lay.addWidget(self.label, alignment=QtCore.Qt.AlignCenter)

    def resizeEvent(self, event):
        self.reSize.emit(self.size())


class UIWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(UIWidget, self).__init__(parent)
        # Initialize tab screen
        self.tabs = QtWidgets.QTabWidget()
        self.tab1 = QtWidgets.QWidget()
        self.tab2 = QtWidgets.QWidget()
        self.tab3 = QtWidgets.QWidget()

        # Add tabs
        self.tabs.addTab(self.tab1, "Face")
        self.tabs.addTab(self.tab2, "Human")
        self.tabs.addTab(self.tab3, "Vehicle")

        # Create first tab
        self.createGridLayout()
        self.tab1.layout = QtWidgets.QVBoxLayout()
        self.display = PlayStreaming()
        self.tab1.layout.addWidget(self.display, stretch=1)
        self.tab1.layout.addWidget(self.horizontalGroupBox)
        self.tab1.setLayout(self.tab1.layout)

        # Add tabs to widget
        layout = QtWidgets.QVBoxLayout(self)
        layout.addWidget(self.tabs)

    def createGridLayout(self):
        self.horizontalGroupBox = QtWidgets.QGroupBox("")
        self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  
        layout = QtWidgets.QGridLayout()
        layout.addWidget(QtWidgets.QPushButton('Test'),0,0) 
        layout.addWidget(QtWidgets.QPushButton('Run'),0,1) 
        layout.addWidget(QtWidgets.QPushButton('RescaleUp'),0,2) 
        layout.addWidget(QtWidgets.QPushButton('RescaleDown'),0,3) 
        layout.addWidget(QtWidgets.QPushButton('Set Faces'),1,0) 
        layout.addWidget(QtWidgets.QPushButton('FacePose'),1,1)
        layout.addWidget(QtWidgets.QPushButton('Gender'),1,2) 
        layout.addWidget(QtWidgets.QPushButton('Age'),1,3)
        layout.addWidget(QtWidgets.QPushButton('Recognize'),1,4)
        self.horizontalGroupBox.setLayout(layout)



if __name__ == '__main__':
    import sys

    app = QtWidgets.QApplication(sys.argv)
    w = UIWidget()
    w.resize(1000, 800)
    w.show()
    sys.exit(app.exec_())

我喜歡使前四個按鈕等距分布，第二個兩個按鈕也等距分布。 為此，進行如下更改

class UIWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(UIWidget, self).__init__(parent)
        # Initialize tab screen
        self.tabs = QtWidgets.QTabWidget()
        self.tab1 = QtWidgets.QWidget()
        self.tab2 = QtWidgets.QWidget()
        self.tab3 = QtWidgets.QWidget()

        # Add tabs
        self.tabs.addTab(self.tab1, "Face")
        self.tabs.addTab(self.tab2, "Human")
        self.tabs.addTab(self.tab3, "Vehicle")

        # Create first tab
        self.createGridLayout()
        self.tab1.layout = QtWidgets.QVBoxLayout()
        self.display = PlayStreaming()
        self.tab1.layout.addWidget(self.display, stretch=1)
        self.tab1.layout.addWidget(self.horizontalGroupBox)
        self.tab1.layout.addWidget(self.horizontalGroupBox2)
        self.tab1.setLayout(self.tab1.layout)

        # Add tabs to widget
        layout = QtWidgets.QVBoxLayout(self)
        layout.addWidget(self.tabs)

    def createGridLayout(self):
        self.horizontalGroupBox = QtWidgets.QGroupBox("")
        self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  
        layout = QtWidgets.QGridLayout()
        layout.addWidget(QtWidgets.QPushButton('Test'),0,0) 
        layout.addWidget(QtWidgets.QPushButton('Run'),0,1) 
        layout.addWidget(QtWidgets.QPushButton('RescaleUp'),0,2) 
        layout.addWidget(QtWidgets.QPushButton('RescaleDown'),0,3) 
        self.horizontalGroupBox.setLayout(layout)
        self.horizontalGroupBox2 = QtWidgets.QGroupBox("")
        self.horizontalGroupBox2.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  
        layout = QtWidgets.QGridLayout()        
        layout.addWidget(QtWidgets.QPushButton('Set Faces'),0,0) 
        layout.addWidget(QtWidgets.QPushButton('FacePose'),0,1)
        layout.addWidget(QtWidgets.QPushButton('Gender'),0,2) 
        layout.addWidget(QtWidgets.QPushButton('Age'),0,3)
        layout.addWidget(QtWidgets.QPushButton('Recognize'),0,4)
        self.horizontalGroupBox2.setLayout(layout)

然后，兩個QGroupBox之間存在間隙。

我如何才能做到沒有縫隙，並且第一行和第二行具有相等間距的按鈕？

Answer 1

您必須在2個QHBoxLayout旁邊使用1個QVBoxLayout ：

def createGridLayout(self):
    self.horizontalGroupBox = QtWidgets.QGroupBox("")
    self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  

    hlay1 = QtWidgets.QHBoxLayout()
    hlay1.addWidget(QtWidgets.QPushButton('Test')) 
    hlay1.addWidget(QtWidgets.QPushButton('Run')) 
    hlay1.addWidget(QtWidgets.QPushButton('RescaleUp')) 
    hlay1.addWidget(QtWidgets.QPushButton('RescaleDown')) 

    hlay2 = QtWidgets.QHBoxLayout()
    hlay2.addWidget(QtWidgets.QPushButton('Set Faces')) 
    hlay2.addWidget(QtWidgets.QPushButton('FacePose'))
    hlay2.addWidget(QtWidgets.QPushButton('Gender')) 
    hlay2.addWidget(QtWidgets.QPushButton('Age'))
    hlay2.addWidget(QtWidgets.QPushButton('Recognize'))

    layout = QtWidgets.QVBoxLayout()        
    layout.addLayout(hlay1)
    layout.addLayout(hlay2)
    self.horizontalGroupBox.setLayout(layout)