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

Question

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

我的解决方案是将其视为 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 像素的像素图重现您的问题。在你的例子中，像素图和字体大小似乎太大了，所以它们需要的 space 比你想给它们的要多。

Any widgets that are allocated more space than their maximum size are allocated the maximum size space they require.

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

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

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

How to set correct sizes for columns in layout - PySide/PyQt

python

pyqt

pyside

pyqtgraph