PyQt6中QScrollArea内Widget拖拽位置异常问题求助

问题描述 #

开发PyQt6应用时，实现QScrollArea内Widget的拖拽功能，初始状态正常，但当Widget数量过多、滚动操作后，被拖拽的Widget无法落在正确位置。已尝试在dropEvent中处理滚动偏移，但问题仍未解决。

原始代码 #

from PyQt6.QtWidgets import QVBoxLayout, QApplication, QScrollArea, QToolButton, QWidget, QPushButton
from PyQt6.QtGui import QIcon, QDrag, QPixmap
from PyQt6.QtCore import Qt, QSize, QMimeData


class DragButton(QToolButton):
    def mouseMoveEvent(self, e):
        if e.buttons() == Qt.MouseButton.LeftButton:
            drag = QDrag(self)
            mime = QMimeData()
            drag.setMimeData(mime)

            pixmap = QPixmap(self.size())
            self.render(pixmap)
            drag.setPixmap(pixmap)

            drag.exec(Qt.DropAction.MoveAction)


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setAcceptDrops(True)

        # Main Layout
        self.main_layout = QVBoxLayout()
        self.main_layout.setAlignment(Qt.AlignmentFlag.AlignTop)

        # Add Button 
        add_button = QPushButton(parent=self, text='add button')
        add_button.clicked.connect(self.add_button)
        self.main_layout.addWidget(add_button)

        # button frame/layout
        self.button_layout = QVBoxLayout()
        self.button_layout.setAlignment(Qt.AlignmentFlag.AlignHCenter | Qt.AlignmentFlag.AlignTop)
        self.button_layout.setSpacing(30)
        self.button_frame = QWidget()
        self.button_frame.setLayout(self.button_layout)

        # Scroll area
        self.scroll_area = QScrollArea()
        self.scroll_area.setWidgetResizable(True)
        self.scroll_area.setHorizontalScrollBarPolicy(Qt.ScrollBarPolicy.ScrollBarAlwaysOff)
        self.scroll_area.setWidget(self.button_frame)

        self.main_layout.addWidget(self.scroll_area)

        self.setLayout(self.main_layout)

    def add_button(self):
        n = self.button_layout.count()
        btn = DragButton(parent=self, text=f'{n}')
        self.button_layout.addWidget(btn, alignment=Qt.AlignmentFlag.AlignHCenter)

    def dragEnterEvent(self, e):
            e.accept()

    def dropEvent(self, e):
        pos = e.position().toPoint()
        widget = e.source()

        # Temporarily remove the widget
        self.button_layout.removeWidget(widget)

        insert_at = self.button_layout.count()

        for i in range(self.button_layout.count()):
            w = self.button_layout.itemAt(i).widget()

            if pos.y() < w.y():
                insert_at = i
                break

        # Insert the widget back to the layout at the new position
        self.button_layout.insertWidget(insert_at, widget, alignment=Qt.AlignmentFlag.AlignHCenter)

        e.accept()


if __name__ == '__main__':
    app = QApplication([])
    window = Window()
    window.show()
    app.exec()

尝试修改后的dropEvent代码 #

def dropEvent(self, e):
    pos = e.position().toPoint()
    widget = e.source()

    # Temporarily remove the widget
    self.button_layout.removeWidget(widget)

    insert_at = self.button_layout.count()

    scroll_value = self.scroll_area.verticalScrollBar().value()

    for i in range(self.button_layout.count()):
        w = self.button_layout.itemAt(i).widget()

        widget_pos = w.mapToParent(w.pos())
        widget_y = widget_pos.y() - scroll_value

        if pos.y() < widget_y:
            insert_at = i
            break

    # Insert the widget back to the layout at the new position
    self.button_layout.insertWidget(insert_at, widget, alignment=Qt.AlignmentFlag.AlignHCenter)

    e.accept()

解决方案 #

问题根源是坐标转换逻辑错误，需统一坐标体系，修改后的dropEvent代码如下：

def dropEvent(self, e):
    # 将拖拽位置转换为相对于button_frame的局部坐标
    drop_pos = self.button_frame.mapFromGlobal(e.globalPosition().toPoint())
    widget = e.source()

    # 临时移除控件
    self.button_layout.removeWidget(widget)

    insert_at = self.button_layout.count()

    for i in range(self.button_layout.count()):
        w = self.button_layout.itemAt(i).widget()
        # 获取控件在button_frame内的几何位置
        w_geo = w.geometry()
        # 比较拖拽位置与控件顶部的y坐标
        if drop_pos.y() < w_geo.top():
            insert_at = i
            break

    # 将控件插入到新位置
    self.button_layout.insertWidget(insert_at, widget, alignment=Qt.AlignmentFlag.AlignHCenter)
    e.accept()

关键改进点 #

• 使用mapFromGlobal将全局拖拽位置转换为按钮容器的局部坐标，自动处理滚动偏移，避免手动计算误差。
• 直接调用geometry()获取控件在容器内的真实位置，该方法返回的坐标已考虑滚动区域的可视偏移，无需额外调整。
• 原代码错误在于手动计算滚动偏移时，混淆了控件pos()与父容器滚动状态的关系，导致坐标对比逻辑失效。

内容的提问来源于stack exchange，提问作者DigitalTemplar