PyQt5中如何实现成对自定义部件的子标签区域合并为单个标签？

我创建了一个CustomWidget，顶部是红色主标签，底部是黄色子标签，在滚动区域中实例化了多个该部件：

点击“Merge”按钮时，希望将连续成对的子标签替换为单个子标签，显示左侧子标签的文本并覆盖两个子标签的区域，期望效果如下：

我原本尝试计算合并后子标签的宽度，设置给左侧子标签并隐藏右侧子标签，但这种方法破坏了布局关系，实际效果如下：

如何实现这种成对子标签的视觉合并效果？

原始代码 #

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

class CustomWidget(QWidget):
    def __init__(self, parent=None, maintext=""):
        super().__init__(parent)
        self.maintext = maintext
        self.origwidth = 50
        self.lbl_main = QLabel(self.maintext)
        self.lbl_main.setAlignment(Qt.AlignCenter)
        self.lbl_main.setMinimumWidth(self.origwidth)
        self.lbl_main.setFixedWidth(self.origwidth)
        self.lbl_main.setFixedHeight(100)
        self.lbl_main.setStyleSheet("background: #3FFF0000;")
        self.lbl_sub = QLabel(f"sub_{self.maintext}")
        self.lbl_sub.setAlignment(Qt.AlignCenter)
        self.lbl_sub.setMinimumWidth(self.origwidth)
        self.lbl_sub.setFixedWidth(self.origwidth)
        self.lbl_sub.setFixedHeight(20)
        self.lbl_sub.setStyleSheet("background: #3FFFFF00; border: 1px solid black;")
        self.vspacer = QLabel()
        self.layout = QVBoxLayout(self)
        self.layout.setContentsMargins(0, 0, 0, 0)
        self.layout.setSpacing(0)
        self.layout.addWidget(self.lbl_main)
        self.layout.addWidget(self.lbl_sub)
        self.layout.addWidget(self.vspacer)
        self.layout.setAlignment(self.lbl_main, Qt.AlignHCenter)
        self.layout.setAlignment(self.lbl_sub, Qt.AlignHCenter)
        self.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)

class MyMainWindow(QMainWindow):
    def __init__(self):
        super(MyMainWindow, self).__init__()
        self.num_cws = 10
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle("my first window")
        self.centralwidget = QWidget(self)
        self.layout = QHBoxLayout(self.centralwidget)
        self.setCentralWidget(self.centralwidget)
        self.scroll_area = QScrollArea()
        self.scroll_area.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.scroll_area.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
        self.scroll_central = QWidget()
        self.scroll_layout = QHBoxLayout(self.scroll_central)
        self.scroll_area.setWidget(self.scroll_central)
        self.scroll_area.setWidgetResizable(True)
        self.layout.addWidget(self.scroll_area)
        self.btn = QPushButton(text='Merge')
        self.layout.addWidget(self.btn)
        self.btn.clicked.connect(self.onBtnClick)
        self.customwidgets = []
        for ix in range(self.num_cws):
            cw = CustomWidget(None, f"{chr(65+ix)}{chr(65+ix)}")
            self.scroll_layout.addWidget(cw)
            self.customwidgets.append(cw)
        self.show()

    def onBtnClick(self):
        if self.btn.text() == "Merge":
            self.btn.setText("Unmerge")
            for ix in range(0, self.num_cws, 2):
                cw_left = self.customwidgets[ix]
                cw_right = self.customwidgets[ix+1]
                llblgeom = cw_left.lbl_sub.geometry().translated( cw_left.lbl_sub.mapTo(self.scroll_central, QPoint(0,0)) )
                rlblgeom = cw_right.lbl_sub.geometry().translated( cw_right.lbl_sub.mapTo(self.scroll_central, QPoint(0,0)) )
                lbl_dual_width = rlblgeom.right() - llblgeom.left()
                cw_right.lbl_sub.hide()
                cw_left.lbl_sub.setFixedWidth(lbl_dual_width)
        else:
            self.btn.setText("Merge")
            for ix in range(0, self.num_cws, 2):
                cw_left = self.customwidgets[ix]
                cw_right = self.customwidgets[ix+1]
                cw_left.lbl_sub.setFixedWidth(cw_left.origwidth)
                cw_right.lbl_sub.show()

if __name__== '__main__':
    app = QApplication(sys.argv)
    myGUI = MyMainWindow()
    sys.exit(app.exec_())

解决方案 #

问题出在修改左侧子标签宽度后，CustomWidget的固定宽度布局被打乱，导致整体排版错位。正确做法是不修改原有子标签的宽度，而是在滚动区域顶层添加覆盖式的合并标签，点击合并时显示该标签并隐藏对应成对子标签，取消合并时隐藏覆盖标签并恢复原标签显示。

修改后的代码 #

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

class CustomWidget(QWidget):
    def __init__(self, parent=None, maintext=""):
        super().__init__(parent)
        self.maintext = maintext
        self.origwidth = 50
        self.lbl_main = QLabel(self.maintext)
        self.lbl_main.setAlignment(Qt.AlignCenter)
        self.lbl_main.setMinimumWidth(self.origwidth)
        self.lbl_main.setFixedWidth(self.origwidth)
        self.lbl_main.setFixedHeight(100)
        self.lbl_main.setStyleSheet("background: #3FFF0000;")
        self.lbl_sub = QLabel(f"sub_{self.maintext}")
        self.lbl_sub.setAlignment(Qt.AlignCenter)
        self.lbl_sub.setMinimumWidth(self.origwidth)
        self.lbl_sub.setFixedWidth(self.origwidth)
        self.lbl_sub.setFixedHeight(20)
        self.lbl_sub.setStyleSheet("background: #3FFFFF00; border: 1px solid black;")
        self.vspacer = QLabel()
        self.layout = QVBoxLayout(self)
        self.layout.setContentsMargins(0, 0, 0, 0)
        self.layout.setSpacing(0)
        self.layout.addWidget(self.lbl_main)
        self.layout.addWidget(self.lbl_sub)
        self.layout.addWidget(self.vspacer)
        self.layout.setAlignment(self.lbl_main, Qt.AlignHCenter)
        self.layout.setAlignment(self.lbl_sub, Qt.AlignHCenter)
        self.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)

class MyMainWindow(QMainWindow):
    def __init__(self):
        super(MyMainWindow, self).__init__()
        self.num_cws = 10
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle("my first window")
        self.centralwidget = QWidget(self)
        self.layout = QHBoxLayout(self.centralwidget)
        self.setCentralWidget(self.centralwidget)
        self.scroll_area = QScrollArea()
        self.scroll_area.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.scroll_area.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
        self.scroll_central = QWidget()
        self.scroll_layout = QHBoxLayout(self.scroll_central)
        self.scroll_area.setWidget(self.scroll_central)
        self.scroll_area.setWidgetResizable(True)
        self.layout.addWidget(self.scroll_area)
        self.btn = QPushButton(text='Merge')
        self.layout.addWidget(self.btn)
        self.btn.clicked.connect(self.onBtnClick)
        self.customwidgets = []
        self.merge_labels = []  # 存储合并标签，用于后续控制
        for ix in range(self.num_cws):
            cw = CustomWidget(None, f"{chr(65+ix)}{chr(65+ix)}")
            self.scroll_layout.addWidget(cw)
            self.customwidgets.append(cw)
        self.show()

    def onBtnClick(self):
        if self.btn.text() == "Merge":
            self.btn.setText("Unmerge")
            # 清除之前的合并标签，避免重复创建
            for lbl in self.merge_labels:
                lbl.deleteLater()
            self.merge_labels.clear()
            
            for ix in range(0, self.num_cws, 2):
                cw_left = self.customwidgets[ix]
                cw_right = self.customwidgets[ix+1]
                
                # 计算合并标签在滚动容器内的位置和大小
                left_sub_global = cw_left.lbl_sub.mapToGlobal(QPoint(0,0))
                right_sub_global = cw_right.lbl_sub.mapToGlobal(QPoint(cw_right.lbl_sub.width(), 0))
                left_sub_local = self.scroll_central.mapFromGlobal(left_sub_global)
                right_sub_local = self.scroll_central.mapFromGlobal(right_sub_global)
                
                merge_width = right_sub_local.x() - left_sub_local.x()
                merge_height = cw_left.lbl_sub.height()
                
                # 创建合并标签并添加到滚动容器顶层
                merge_lbl = QLabel(cw_left.lbl_sub.text(), self.scroll_central)
                merge_lbl.setGeometry(left_sub_local.x(), left_sub_local.y(), merge_width, merge_height)
                merge_lbl.setAlignment(Qt.AlignCenter)
                merge_lbl.setStyleSheet("background: #3FFFFF00; border: 1px solid black;")
                merge_lbl.show()
                
                # 隐藏原成对子标签
                cw_left.lbl_sub.hide()
                cw_right.lbl_sub.hide()
                
                self.merge_labels.append(merge_lbl)
        else:
            self.btn.setText("Merge")
            # 清理合并标签
            for lbl in self.merge_labels:
                lbl.hide()
                lbl.deleteLater()
            self.merge_labels.clear()
            
            # 恢复所有原标签显示
            for cw in self.customwidgets:
                cw.lbl_sub.show()

if __name__== '__main__':
    app = QApplication(sys.argv)
    myGUI = MyMainWindow()
    sys.exit(app.exec_())

方案优势 #

• 不破坏原有CustomWidget的布局结构，避免排版错乱
• 合并标签直接覆盖在目标区域，完全符合视觉需求
• 合并/取消逻辑清晰，易于维护

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