如何为布局中的列设置正确的大小 - PySide/PyQt

Question

我正在尝试在 PySide 上构建以下窗口：

对此我的解决方案是将其视为 3 列并按如下方式实现：

win = pg.GraphicsWindow()
win.resize(200, 500)
l = pg.GraphicsLayout(border='ff0000')

# The Overall layout consists of three columns with widths in the ratio of 1/8, 2/8, 5/8

# =======   col 1
vb = l.addViewBox(col=0, colspan=1, border='00ff00', lockAspect=True, enableMouse=False, invertY=True)
img = QtGui.QGraphicsPixmapItem(QtGui.QPixmap('heart.png')))
vb.addItem(img)
vb.scaleBy(10)

# =======   col 2
top_label = "Percent"
bottom_label = "85"
l_labels = l.addLayout(col=1, colspan=1)
l_labels.addLabel(top_label, row=0, col=0, rowspan=1, colspan=1, size='30pt', bold=True)
l_labels.addLabel(bottom_label, row=2, col=0, rowspan=4, colspan=1, size='200pt', color='606060')
l_labels.setContentsMargins(0, 0, 0, 100) 

# =======   col 3
hr_plot = l.addPlot(col=2, colspan=6)
hr_plot.showGrid(x=False, y=True)
pen = pg.mkPen(color='#39e4f8', width=4)

hr_plot.plot(data, pen=pen,
             symbol='o',
             symbolPen=pen,
             symbolBrush='#FFFFFF',
             symbolSize=16)

win.addItem(l)

但是，这只会导致以下布局：

我的主要问题如下：

如何调整第一列的宽度（可以通过调整“ViewBox”的宽度或其他方式）？

尝试 QGridLayout：

Answer 1

您可以使用QLayout 代替pyqtgraph.GraphicsLayout：pyqtgraph-documentation

在那里你可以设置stretchFactors。这里使用 QGridLayout 重写你的代码（只有小部件可以添加到布局中，所以LabelItem 被 QLabel 替换）：

app = QtGui.QApplication([])

width = 500
height = 200
fontsize1 = width/40
fontsize2 = width/15
scalefactor = width/50

w = QtGui.QWidget()
w.resize(width, height)

# =======   widgets col 1
img = QtGui.QLabel()      
pm = QtGui.QPixmap('del_w.xpm')
iw = pm.width()/scalefactor
ih = pm.height()/scalefactor
npm = pm.scaled(iw,ih)          # scaled pixmap
img.setPixmap(npm)

# =======   widgets col 2
top_label = QtGui.QLabel('Percent') #, size='30pt', bold=True)
top_label.setAlignment(QtCore.Qt.AlignCenter)
top_label.setStyleSheet('font-size: {}pt; font-style: bold'.format(fontsize1))
bottom_label = QtGui.QLabel('85')
bottom_label.setAlignment(QtCore.Qt.AlignCenter)
bottom_label.setStyleSheet('font-size: {}pt; font-style: bold; color: 606060'.format(fontsize2))

# =======   widgets col 3
hr_plot = pg.PlotWidget()
hr_plot.showGrid(x=False, y=True)
pen = pg.mkPen(color='#39e4f8', width=4)

hr_plot.plot(data, pen=pen,
         symbol='o',
         symbolPen=pen,
         symbolBrush='#FFFFFF',
         symbolSize=4)

# ======= gridlayout
layout = QtGui.QGridLayout()
w.setLayout(layout)

# ======= add widgets to layout
layout.addWidget(img,0,0)
layout.addWidget(top_label,0,1)
layout.addWidget(bottom_label,1,1,2,1)  # rowspan = 2, colspan = 1
layout.addWidget(hr_plot, 0, 2,5,1) # rowspan = 5, colspan = 1

# ======= set stretchfactors for column
layout.setColumnStretch(0,1)
layout.setColumnStretch(1,2)
layout.setColumnStretch(2,5)

w.showMaximized()
app.exec()

编辑：

我可以使用 500 x 500 像素的像素图重现您的问题。在您的示例中，像素图和字体大小似乎太大了，因此它们需要的空间比您想要的要多。

任何分配的空间超过其最大大小的小部件都是 分配了他们需要的最大空间。

http://doc.qt.io/qt-5/layout.html

您应该使用字体大小并缩放像素图（上面代码中添加的示例） 缩放像素图并减小字体大小后，我得到以下小部件：