Как установить правильные размеры столбцов в макете - PySide/PyQt

Я пытаюсь создать следующее окно на 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:

oxtay 17.09.2015 источник

Ответы (1)

arrow_upward
1
arrow_downward

вы можете использовать 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

вы должны поиграть с размером шрифта и масштабированием растрового изображения (пример добавлен в код выше) после масштабирования растрового изображения и уменьшения размера шрифта я получаю следующий виджет:

a_manthey_67 18.09.2015

comment

Спасибо. Я на самом деле пробовал этот подход ранее сегодня, но я получаю худшие результаты. Я отредактировал вопрос выше и добавил результат использования QGridLayout в его нижнюю часть. - oxtay; 19.09.2015

Как установить правильные размеры столбцов в макете - PySide/PyQt

Ответы (1)

Вопросы по теме