如何实现PySide6 QPushButton图标略高于中心并搭配下方文字

我想要设计一个按钮，带有较大图标，图标位置略高于按钮中心，下方配有少量文字，效果参考下图：

最小示例代码 #

from pathlib import Path
from PySide6.QtWidgets import (QPushButton, QMainWindow, QApplication, QVBoxLayout, QHBoxLayout, QWidget)
import sys


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setMinimumSize(400, 400)
        layoutV = QVBoxLayout()
        layoutH = QHBoxLayout()
        layoutV.addLayout(layoutH)
        btn = QPushButton(self)
        btn.setMinimumSize(200, 200)
        btn.setMaximumSize(200, 200)
        layoutH.addWidget(btn)
        container = QWidget()
        container.setLayout(layoutV)
        container.setStyleSheet("background: black;")
        self.setCentralWidget(container)

        path_to_image = Path("example.png")
        assert path_to_image.exists()

        btn.setStyleSheet(
            """
            QPushButton{
                        background: #0E0E0E;
                        border-radius: 10px;
                        background-image: url("example.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        color: white;
                        text-align: bottom;
                        font: 18px;
                        padding-bottom: 15px;
                        }
            """)
        btn.setText("Icon Example")


app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

遇到的问题 #

当前样式表中：

• background-position: center; 会将图标置于按钮正中心：
  
• background-position: center top; 会将图标固定在按钮顶部，且无法通过内边距调整位置：
  

需要实现图标位于中心与顶部之间，比如上移10-15%或者15-20px的位置。

解决方案 #

方法1：使用calc调整背景图位置 #

Qt样式表支持calc()函数，可以基于中心位置向上偏移固定像素值，直接修改background-position属性：

QPushButton{
    background: #0E0E0E;
    border-radius: 10px;
    background-image: url("example.png");
    background-position: center calc(50% - 15px); /* 中心位置往上偏移15px */
    background-repeat: no-repeat;
    color: white;
    text-align: bottom;
    font: 18px;
    padding-bottom: 15px;
}

这里calc(50% - 15px)表示垂直方向从50%（中心）的位置向上移动15px，刚好满足"略高于中心"的需求。

方法2：使用图标+样式调整边距（更灵活） #

放弃背景图的方式，直接用QPushButton的图标功能，通过调整图标的margin实现偏移：

from pathlib import Path
from PySide6.QtWidgets import (QPushButton, QMainWindow, QApplication, QVBoxLayout, QHBoxLayout, QWidget)
from PySide6.QtGui import QIcon
import sys


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setMinimumSize(400, 400)
        layoutV = QVBoxLayout()
        layoutH = QHBoxLayout()
        layoutV.addLayout(layoutH)
        btn = QPushButton(self)
        btn.setMinimumSize(200, 200)
        btn.setMaximumSize(200, 200)
        layoutH.addWidget(btn)
        container = QWidget()
        container.setLayout(layoutV)
        container.setStyleSheet("background: black;")
        self.setCentralWidget(container)

        path_to_image = Path("example.png")
        assert path_to_image.exists()

        # 设置图标和大小
        btn.setIcon(QIcon(str(path_to_image)))
        btn.setIconSize(btn.size() * 0.6) # 图标占按钮60%大小，可按需调整

        btn.setStyleSheet(
            """
            QPushButton{
                        background: #0E0E0E;
                        border-radius: 10px;
                        color: white;
                        text-align: bottom;
                        font: 18px;
                        padding-bottom: 15px;
                        }
            QPushButton::icon{
                        margin-top: -15px; /* 图标向上偏移15px */
                        }
            """)
        btn.setText("Icon Example")


app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

这种方法将图标作为按钮的原生元素，调整margin-top为负值就能让图标上移，文本位置不受影响，后期调整更灵活。

内容的提问来源于stack exchange，提问作者Andrei M.