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
相关产品推荐
相关产品推荐

