首页 > 解决方案 > 如何在 QPushButton 中移动图标内的文本?

问题描述

我创建了具有 SVG 图标的自定义 PyQt5 按钮。我有可点击的六边形,里面有文字。但是,当我尝试将文本向左移动时,它被六边形隐藏了。

我尝试使用填充将文本向左移动,但这只是隐藏了文本。

HexButton 代码:

class HexButton(QPushButton):
    def __init__(self, colour, parent=None):
        super(QPushButton, self).__init__(parent)

        # Convert hexagon svg into image
        qimage = QtGui.QImage.fromData(self.svg_hexagon(colour))
        qicon = QtGui.QPixmap(qimage)
        # Set the icon as the hexagon
        self.setIcon(QtGui.QIcon(qicon))
        # Set icon size as the entire thing
        self.setIconSize(QSize(48, 48))
        # Make the button invisible
        self.setStyleSheet("""
        border: none;""")


    def svg_hexagon(self, colour):
        svg_bytes = f'<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31"><path stroke="none" fill="{COLOURS[colour]}" d="M12.5 1.2320508075689a6 6 0 0 1 6 0l7.856406460551 4.5358983848622a6 6 0 0 1 3 5.1961524227066l0 9.0717967697245a6 6 0 0 1 -3 5.1961524227066l-7.856406460551 4.5358983848622a6 6 0 0 1 -6 0l-7.856406460551 -4.5358983848623a6 6 0 0 1 -3 -5.1961524227066l0 -9.0717967697245a6 6 0 0 1 3 -5.1961524227066"></path></svg>'
        return bytearray(svg_bytes, encoding='utf-8')

主要应用

def main():

    app = QApplication(sys.argv)
    window = QWidget()
    layout = QHBoxLayout(window)

    button = HexButton("blank")
    button.setText("Nice")
    button.move(10, 10)
    layout.addWidget(button)

    window.show()
    sys.exit(app.exec_())

我期待一个黄色的六边形,里面有文字。

标签: pythonpython-3.xpyqtpyqt5qpushbutton

解决方案


不幸的是,图标和文本绘制在同一层上,并且图标是在导致您指出的问题的文本之后绘制的。考虑到上述可能的解决方案是在按钮上方创建一个 QLabel:

from PyQt5 import QtCore, QtGui, QtWidgets


class HexButton(QtWidgets.QPushButton):
   def __init__(self, colour, parent=None):
       super(HexButton, self).__init__(parent)

       # Convert hexagon svg into image
       qimage = QtGui.QImage.fromData(self.svg_hexagon(colour))
       qicon = QtGui.QPixmap(qimage)
       # Set the icon as the hexagon
       self.setIcon(QtGui.QIcon(qicon))
       # Set icon size as the entire thing
       self.setIconSize(QtCore.QSize(48, 48))
       # Make the button invisible
       self.setStyleSheet(
           """
       border: none;"""
       )
       self.text_label = QtWidgets.QLabel()
       self.text_label.setContentsMargins(0, 0, 0, 0)
       self.text_label.setStyleSheet("""color : white;""")
       lay = QtWidgets.QVBoxLayout(self)
       lay.addWidget(self.text_label, alignment=QtCore.Qt.AlignCenter)

   def svg_hexagon(self, colour):
       svg_bytes = f'<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31"><path stroke="none" fill="{colour.name()}" d="M12.5 1.2320508075689a6 6 0 0 1 6 0l7.856406460551 4.5358983848622a6 6 0 0 1 3 5.1961524227066l0 9.0717967697245a6 6 0 0 1 -3 5.1961524227066l-7.856406460551 4.5358983848622a6 6 0 0 1 -6 0l-7.856406460551 -4.5358983848623a6 6 0 0 1 -3 -5.1961524227066l0 -9.0717967697245a6 6 0 0 1 3 -5.1961524227066"></path></svg>'
       return bytearray(svg_bytes, encoding="utf-8")

   @property
   def text(self):
       return self.text_label.text()

   @text.setter
   def text(self, t):
       self.text_label.setText(t)


def main():
   import sys

   app = QtWidgets.QApplication(sys.argv)
   window = QtWidgets.QWidget()
   layout = QtWidgets.QHBoxLayout(window)

   button = HexButton(QtGui.QColor("black"))
   button.text = "Nice"
   layout.addWidget(button)

   window.show()
   sys.exit(app.exec_())


if __name__ == "__main__":
   main()

在此处输入图像描述


推荐阅读