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像素的像素图重现您的问题。在您的示例中，pixmap和fontsize似乎很大，因此它们需要的空间比您想要的更多。

任何分配了比最大大小更多空间的小部件分配了他们所需的最大空间。

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

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

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

1 个答案: