Question

我正在尝试对齐QGridBoxLayout中的QSlider和QLabel

供参考，这是用于查看视频中的帧，这些帧在其他地方显示。这里的QLabel用于显示视频中带有标签的部分，其中绿色部分为“标签”，黑色部分为“未标签”

我的QSLider初始化为：

self.slider = QSlider(Qt.Horizontal, self)
self.slider.setSingleStep(1)
self.slider.setFocusPolicy(Qt.NoFocus)
self.slider.valueChanged.connect(self.sliderChanged)
self.layout.addWidget(self.slider)

QLabel包含一个QPixmap，它具有一个从numpy形状（100,1000,3）数组创建的QImage。这是它的初始化方式：

image = np.zeros((100,1000,3), dtype=np.uint8) #Initialize a black picture
for combo in indices_list:
    start, end = combo
    start = int(start / self.length * 1000)
    end = int(end / self.length * 1000)
    image[:,start:end] = [0,255,0] #Label the columns as green
height, width, bytevalue = image.shape
qimage = QImage(image, width, height, bytevalue * width, QImage.Format_RGB888)
pixmap = QPixmap(qimage)
self.label.setPixmap(pixmap)

上面的代码要做的是获取开始和结束索引的列表，然后将该范围内的列更改为绿色。

我遇到的问题是，即使QSlider和QLabel堆叠在QVBoxLayout中，滑块的位置也不总是与相应的像素匹配。我相信这是因为滑块“手柄”的最左侧（我不确定名称正确）停在滑块的最左侧。它们直接在中心匹配，然后随着您离开中心而越来越少匹配。

我希望手柄的中心位于QLabel中当前滑块值对应列的正下方。

我尝试将滑块的边距设置为0，但这没有用。

感谢您的帮助。

编辑：

图片可能会有所帮助：

这是整个栏的图片：

这是一张图片，它没有在左侧对齐：

这是一张未在右侧对齐的图片：

最后，它在中心对齐：

Answer 1

要获取水平位置，必须使用QStyle::subControlRect()：

from PyQt5 import QtCore, QtGui, QtWidgets

class Label(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(Label, self).__init__(parent)
        self._slider = None
        self._values = []

    def setSlider(self, slider):
        self._slider = slider
        self.update()

    def set_values(self, values):
        self._values = values
        self.update()

    def paintEvent(self, event):
        if self._slider is None: return
        painter = QtGui.QPainter(self)
        X1 = self.get_pos_by_value(self._slider.minimum())
        X2 = self.get_pos_by_value(self._slider.maximum())
        R = QtCore.QRect(QtCore.QPoint(X1, 0), QtCore.QPoint(X2, self.height()))
        painter.fillRect(R, QtGui.QColor("#000000"))
        for start, end in self._values:
            x1 = self.get_pos_by_value(start)
            x2 = self.get_pos_by_value(end)
            r = QtCore.QRect(QtCore.QPoint(x1, 0), QtCore.QPoint(x2, self.height()))
            painter.fillRect(r, QtGui.QColor("#00ff00"))

    def get_pos_by_value(self, value):
        opt = QtWidgets.QStyleOptionSlider()
        self._slider.initStyleOption(opt)
        opt.sliderPosition = value
        r = self._slider.style().subControlRect(
            QtWidgets.QStyle.CC_Slider, 
            opt, 
            QtWidgets.QStyle.SC_SliderHandle, 
            self._slider
        )
        return r.center().x()

class Widget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(Widget, self).__init__(parent)
        length = 1000
        indices_list = [(100, 200), (400, 500), (700, 900)]
        self.label = Label()
        self.slider = QtWidgets.QSlider(
            orientation=QtCore.Qt.Horizontal,
            minimum = 0,
            maximum=length,
            singleStep=1,
            pageStep=1
        )
        self.label.setSlider(self.slider)
        self.label.set_values(indices_list)
        label_value = QtWidgets.QLabel(alignment=QtCore.Qt.AlignCenter)
        self.slider.valueChanged.connect(label_value.setNum)
        label_value.setNum(self.slider.value())

        lay = QtWidgets.QVBoxLayout(self)
        lay.addWidget(self.label, 1)
        lay.addWidget(self.slider)
        lay.addWidget(label_value)
        self.resize(600, 300)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    app.setStyle('fusion')
    w = Widget()
    w.show()
    sys.exit(app.exec_())

使QSlider与上面包含QPixmap的QLabel对齐

1 个答案: