PySide6如何让布局宽度与中间显示图片保持一致？

我正在创建一个包含4个文本标签和1个图片标签的Widget，主布局为QVBoxLayout，结构如下：

• 顶部QHBoxLayout：包含两个文本标签
• 中间自定义ScaledImageLabel：保持图片原始比例缩放
• 底部QHBoxLayout：包含另外两个文本标签

需求：调整Widget大小时，两个QHBoxLayout的宽度始终与中间图片的宽度一致，让文本标签贴住图片的边角。尝试过size hints和size policy但未成功，求实现方法。

解决方案 #

关键调整点

1. 修正ScaledImageLabel的尺寸逻辑

   • 将水平尺寸策略改为QSizePolicy.Policy.Preferred，避免图片标签过度扩张，确保其宽度由缩放后的图片实际宽度决定
   • 重写sizeHint方法，返回图片按比例缩放后的理想尺寸，让父布局能正确感知图片的实际宽度

2. 约束上下布局的宽度

   • 移除上下QHBoxLayout的默认边距，避免标签和图片之间出现空隙
   • 让上下布局的宽度严格跟随图片标签的宽度，通过主布局的对齐和尺寸约束实现

3. 优化主布局配置

   • 主布局设置全局居中对齐，同时添加尺寸约束，确保所有子元素的宽度由图片驱动，不会随意扩张

修改后的完整代码 #

import sys

from PySide6.QtCore import Qt, QSize
from PySide6.QtGui import QImage, QPixmap, QResizeEvent
from PySide6.QtWidgets import QApplication, QHBoxLayout, QLabel, QSizePolicy, QVBoxLayout, QWidget


class Thumbnail(QWidget):
    def __init__(self, image_preview: QPixmap, metadata_1: str, metadata_2: str, metadata_3: str, metadata_4: str):
        super().__init__()

        # 文本标签设置
        metadata_1_label = QLabel(metadata_1)
        metadata_1_label.setAlignment(Qt.AlignmentFlag.AlignLeft | Qt.AlignmentFlag.AlignBottom)
        metadata_2_label = QLabel(metadata_2)
        metadata_2_label.setAlignment(Qt.AlignmentFlag.AlignRight | Qt.AlignmentFlag.AlignBottom)

        image = ScaledImageLabel()
        image.setPixmap(image_preview)
        image.setAlignment(Qt.AlignmentFlag.AlignHCenter | Qt.AlignmentFlag.AlignVCenter)

        metadata_3_label = QLabel(metadata_3)
        metadata_3_label.setAlignment(Qt.AlignmentFlag.AlignLeft | Qt.AlignmentFlag.AlignTop)
        metadata_4_label = QLabel(metadata_4)
        metadata_4_label.setAlignment(Qt.AlignmentFlag.AlignRight | Qt.AlignmentFlag.AlignTop)

        # 顶部布局：消除默认边距，避免空隙
        top_metadata_layout = QHBoxLayout()
        top_metadata_layout.setContentsMargins(0, 0, 0, 0)
        top_metadata_layout.addWidget(metadata_1_label)
        top_metadata_layout.addWidget(metadata_2_label)

        # 底部布局：同样消除默认边距
        bot_metadata_layout = QHBoxLayout()
        bot_metadata_layout.setContentsMargins(0, 0, 0, 0)
        bot_metadata_layout.addWidget(metadata_3_label)
        bot_metadata_layout.addWidget(metadata_4_label)

        # 主布局：设置居中对齐，添加尺寸约束确保宽度由图片驱动
        main_layout = QVBoxLayout(self)
        main_layout.addLayout(top_metadata_layout)
        main_layout.addWidget(image)
        main_layout.addLayout(bot_metadata_layout)
        main_layout.setAlignment(Qt.AlignmentFlag.AlignHCenter)
        main_layout.setSizeConstraint(QVBoxLayout.SetMinAndMaxSize)


class ScaledImageLabel(QLabel):
    def __init__(self):
        super().__init__()
        # 修改尺寸策略：水平宽度由图片决定，垂直方向允许扩展
        self.setSizePolicy(QSizePolicy.Policy.Preferred, QSizePolicy.Policy.Expanding)
        self.setMinimumSize(100, 100)
        self._original_pixmap = None

    def sizeHint(self):
        if self._original_pixmap:
            # 返回图片原始尺寸作为布局参考
            return self._original_pixmap.size()
        return super().sizeHint()

    def resizeEvent(self, event: QResizeEvent):
        if self._original_pixmap:
            # 按控件尺寸缩放图片，保持比例并启用平滑缩放
            scaled_pixmap = self._original_pixmap.scaled(
                self.size(), 
                Qt.AspectRatioMode.KeepAspectRatio, 
                Qt.TransformationMode.SmoothTransformation
            )
            QLabel.setPixmap(self, scaled_pixmap)
        super().resizeEvent(event)

    def setPixmap(self, arg__1: QPixmap | QImage | str):
        # 统一处理不同类型的图片输入
        if isinstance(arg__1, str):
            self._original_pixmap = QPixmap(arg__1)
        elif isinstance(arg__1, QImage):
            self._original_pixmap = QPixmap.fromImage(arg__1)
        else:
            self._original_pixmap = arg__1
        
        # 初始化时立即缩放一次
        if self._original_pixmap:
            scaled_pixmap = self._original_pixmap.scaled(
                self.size(), 
                Qt.AspectRatioMode.KeepAspectRatio, 
                Qt.TransformationMode.SmoothTransformation
            )
            QLabel.setPixmap(self, scaled_pixmap)


def main():
    app = QApplication(sys.argv)

    dummy_preview = QPixmap("tests\\data\\png_data\\IMG_6867.png")
    window = Thumbnail(dummy_preview, "Once", "Upon", "A", "Time")
    window.show()

    app.exec()


if __name__ == "__main__":
    sys.exit(main())

内容的提问来源于stack exchange，提问作者Salmon Loving Bear