【问题标题】:How do I move the text inside the icon in a QPushButton?如何在 QPushButton 中移动图标内的文本?
【发布时间】:2020-01-30 17:16:23
【问题描述】:

我创建了带有 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_())

我希望是一个黄色的六边形,里面有文字。

【问题讨论】:

    标签: python python-3.x pyqt pyqt5 qpushbutton


    【解决方案1】:

    不幸的是,图标和文本绘制在同一层上,并且图标绘制在导致您指出的问题的文本之后。考虑到上述可能的解决方案是在按钮上方创建一个 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()
    

    【讨论】:

    • 虽然这严格回答了我的问题(谢谢),但我无法使用它,因为我无法为此设置位置。我的目标是将它们作为六角网格按钮(用于六角扫雷)。
    • @luknuk mmm,你的解释让我觉得你有一个XY problem,我解释了不便之处并提供了一个解决方法,除此之外我无法猜测,所以在这种情况下我建议你写一个新的问题解释扫雷器以及您对我当前解决方案的限制,然后社区将为您提供帮助。
    • 我发现这是因为我将它添加到布局中,而不是将窗口设置为父窗口。谢谢你,我不知道XY问题。我会将您的答案标记为正确。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多