You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

PyQt5中如何实现ToolButton文本居中并控制图标文本间距?

问题:PyQt5 ToolButton 图标居左、文本居中样式实现问题

我要制作一个分支选择菜单,允许用户点击选择分支,需要实现ToolButton图标居左、文本居中的样式。使用PyQt5的ToolButton开发时遇到两个问题:

  • 图标与文本紧挨着无间距
  • 无法达成文本居中、图标居左的效果,也无法控制ToolButton内部元素的边距

原实现代码

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


class HomeBranch:
    def __init__(self):
        self.application = QtWidgets.QApplication(sys.argv)

        self.home_branch_window = QtWidgets.QWidget()
        self.home_branch_window.setStyleSheet("""
        background-color:rgb(255,255,255);
        """)
        self.home_branch_window_layout = QtWidgets.QGridLayout()
        self.home_branch_window_layout.setContentsMargins(0,0,0,0)

        ###########################################################
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        # Create The Menu Of Branches
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        ###########################################################

        self.branches_menu = QtWidgets.QScrollArea()
        self.branches_menu.setWidgetResizable(True)
        self.branches_menu.setGraphicsEffect(QtWidgets.QGraphicsDropShadowEffect(blurRadius=10.0,xOffset=0.0,yOffset=0.0,color=QtGui.QColor(0,0,0,200)))
        self.branches_menu.setContentsMargins(0,0,0,0)
        self.branches_menu.setMaximumWidth(550)
        self.branches_menu.setStyleSheet("""
        QScrollBar:horizontal,QScrollBar:vertical{
        background:rgba(0,0,0,0);
        margin:1000;
        padding:0;
        border:0;
        width:0;
        height:0;
        }
        QScrollBar::add-line:horizontal , QScrollBar::add-line:vertical{
            background: rgba(0, 0, 0,0);
            height: 0;
        }
        
        QScrollBar::sub-line:horizontal ,QScrollBar::sub-line:vertical {
            background: rgba(0, 0, 0,0);
            height: 0;
        }
        QScrollBar::handle:horizontal ,QScrollBar::handle:vertical{
        background-color: rgba(0,0,0,0);
        border-radius: 0;
        }
        QScrollBar::handle::pressed:horizontal ,QScrollBar::handle::pressed:vertical{
        background : rgba(0, 0, 0,0);
        }
        QScrollArea{
        background:rgb(140, 0, 0);
        margin:0;
        padding:0;
        border:0;
        border-bottom-right-radius:20;
        }
        """)
        
        
        self.frame_for_branches_menu = QtWidgets.QFrame()
        self.frame_for_branches_menu.setContentsMargins(0,0,0,0)
        self.frame_for_branches_menu.setStyleSheet("""
        background:rgb(140, 0, 0);
        margin:0;
        padding:0;
        margin-bottom:20;
        border:0;
        """)
        self.frame_for_branches_menu_layout = QtWidgets.QGridLayout()
        self.frame_for_branches_menu_layout.setContentsMargins(0,0,0,0)

        #################################
        #            <item>             #
        #################################
        self.home_branch_tool_button = QtWidgets.QToolButton()
        self.home_branch_tool_button.setFixedHeight(65)
        self.home_branch_tool_button.setText("Home")
        self.home_branch_tool_button.setObjectName("home_branch_tool_button")
        self.home_branch_tool_button.setIcon(QtGui.QIcon(r"icons/home_branch.png"))
        self.home_branch_tool_button.setIconSize(QtCore.QSize(35,35))
        self.home_branch_tool_button.setToolButtonStyle(QtCore.Qt.ToolButtonTextBesideIcon)
        self.home_branch_tool_button.setSizePolicy(QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Fixed))
        self.home_branch_tool_button.setStyleSheet("""
        QToolButton#home_branch_tool_button:hover{
        background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(100,100,100,200));
        }
        QToolButton#home_branch_tool_button:pressed{
        background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(150,150,150,200));
        };
        background-color: rgba(150,150,150,200);
        color:rgb(255,255,255);
        margin:0;
        padding:0;
        border:0;
        border-radius:0;
        font-size:25px;
        """)
        #################################
        #            </item>            #
        #################################

        self.frame_for_branches_menu_layout.addWidget(self.home_branch_tool_button)
        self.frame_for_branches_menu.setLayout(self.frame_for_branches_menu_layout)
        self.branches_menu.setWidget(self.frame_for_branches_menu)

        ###########################################################
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        # The End
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        ###########################################################
        self.home_branch_window_layout.addWidget(self.branches_menu)
        self.home_branch_window.setLayout(self.home_branch_window_layout)
        self.home_branch_window.show()
        self.application.exec()


HomeBranch()
解决方案

方法1:自定义ToolButton内部布局(推荐)

原生ToolButton样式控制有限,直接在内部嵌套布局分别放置图标和文本,可完全控制位置与间距:

# 替换原有的home_branch_tool_button代码段
self.home_branch_tool_button = QtWidgets.QToolButton()
self.home_branch_tool_button.setFixedHeight(65)
self.home_branch_tool_button.setObjectName("home_branch_tool_button")

# 移除原生setText和setIcon,改用内部布局
inner_layout = QtWidgets.QHBoxLayout(self.home_branch_tool_button)
inner_layout.setContentsMargins(10, 0, 10, 0)  # 控制按钮整体边距

# 图标标签
icon_label = QtWidgets.QLabel()
icon_label.setPixmap(QtGui.QPixmap(r"icons/home_branch.png").scaled(35,35))
inner_layout.addWidget(icon_label)

# 文本标签,设置居中对齐并占满剩余空间
text_label = QtWidgets.QLabel("Home")
text_label.setAlignment(QtCore.Qt.AlignCenter)
text_label.setStyleSheet("color:rgb(255,255,255); font-size:25px;")
inner_layout.addWidget(text_label, stretch=1)

# 按钮样式表仅保留状态样式
self.home_branch_tool_button.setStyleSheet("""
QToolButton#home_branch_tool_button:hover{
background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(100,100,100,200));
}
QToolButton#home_branch_tool_button:pressed{
background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(150,150,150,200));
}
background-color: rgba(150,150,150,200);
border:0;
border-radius:0;
""")

方法2:通过样式表调整间距(简单场景适用)

若不想修改布局,可通过样式表给图标添加间距,调整文本对齐:

# 修改原ToolButton的样式表部分
self.home_branch_tool_button.setStyleSheet("""
QToolButton#home_branch_tool_button:hover{
background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(100,100,100,200));
}
QToolButton#home_branch_tool_button:pressed{
background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(150,150,150,200));
}
background-color: rgba(150,150,150,200);
color:rgb(255,255,255);
padding-left:10px;
padding-right:10px;
border:0;
border-radius:0;
font-size:25px;
QToolButton::icon {
margin-right: 20px; /* 图标与文本的间距 */
}
QToolButton::text {
width: 100%;
text-align: center;
}
""")

方法3:改用QPushButton替代

QPushButton样式控制更灵活,可直接实现需求:

# 替换原ToolButton为QPushButton
self.home_branch_tool_button = QtWidgets.QPushButton()
self.home_branch_tool_button.setFixedHeight(65)
self.home_branch_tool_button.setText("Home")
self.home_branch_tool_button.setObjectName("home_branch_tool_button")
self.home_branch_tool_button.setIcon(QtGui.QIcon(r"icons/home_branch.png"))
self.home_branch_tool_button.setIconSize(QtCore.QSize(35,35))

self.home_branch_tool_button.setStyleSheet("""
QPushButton#home_branch_tool_button:hover{
background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(100,100,100,200));
}
QPushButton#home_branch_tool_button:pressed{
background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(150,150,150,200));
}
background-color: rgba(150,150,150,200);
color:rgb(255,255,255);
padding-left:10px;
border:0;
border-radius:0;
font-size:25px;
text-align: center;
QPushButton::icon {
alignment: left;
margin-right: 20px;
}
""")

内容的提问来源于stack exchange,提问作者Mohammed almalki

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 17:37:10