水平居中单选按钮标签
Posted
技术标签:
【中文标题】水平居中单选按钮标签【英文标题】:Horizontally center radio button label 【发布时间】:2020-03-29 19:39:46 【问题描述】:我正在使用单选按钮来创建垂直标签效果。我已经完成了所有工作,但我一直在做一些我确信很容易的事情。
在这部分代码中,我浏览了一个选项卡名称列表并为每个选项卡生成单选按钮:
def _init_vertical_tabs(self, layout, row):
"""Initialize vertical tabs"""
tabs_widget = QtWidgets.QWidget()
tabs_widget.setObjectName("tabs")
vertical_tabs_layout = QtWidgets.QVBoxLayout()
vertical_tabs_layout.setSpacing(0)
vertical_tabs_layout.setContentsMargins(0, 0, 0, 0)
vertical_tabs_layout.setAlignment(QtCore.Qt.AlignCenter)
tabs_widget.setLayout(vertical_tabs_layout)
layout.addWidget(tabs_widget, row, 0, len(self.tabs), 1)
tabs_widget.setMinimumHeight(self.parent_height)
tabs_widget.setMinimumWidth(self.parent_width*0.15)
tabs_widget.setMaximumHeight(self.parent_height)
tabs_widget.setMaximumWidth(self.parent_width*0.15)
tab_to_widget = dict()
for tab in self.tabs:
tab_button = self._create_tab(tab, vertical_tabs_layout, self.parent_width*0.15, self.parent_height/len(self.tabs),)
tab_to_widget[tab] = tab_button
def _create_tab(self, tab, layout, width, height):
"""Basic method to create a fake tab"""
button = QtWidgets.QRadioButton(tab)
button.setContentsMargins(0, 0, 0, 0)
l = lambda tab_name = tab: self.toggle_visibility_tabs(tab_name)
button.clicked.connect(l)
button.setMinimumHeight(height)
button.setMinimumWidth(width)
button.setMaximumHeight(height)
button.setMaximumWidth(width)
layout.addWidget(button)
然后我应用了一些 css:
QWidget#tabs
color: #ffffff;
background-color: #005073;
border: 0px solid #e54d42;
text-align: center;
QWidget#tabs QRadioButton
color: #ffffff;
font-weight: 400;
font-size: 20pt;
border-radius: 0px;
background-color: #003850; /*QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #003850, stop:0.5 #005073, stop:1 #003850);*/
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
QWidget#tabs QRadioButton#Validator
border-bottom-left-radius: 60px;
border-left: none;
QWidget#tabs QRadioButton::indicator
width: 0px;
height: 0px;
border-radius: 0px;
border: 1px solid #e54d42;
border-top: none;
border-right: none;
border-left: none;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
QWidget#tabs QRadioButton:hover, QWidget#tabs QRadioButton:selected, QWidget#tabs QRadioButton:checked
border-left: 30px solid #e54d42;
color: #e54d42;
结果是:
我想把文本放在中间,我尝试使用尺寸策略,结果如下:
但这并不是我想要的,首先单选按钮标签仍然是左对齐的,并且由于单选按钮更短,所选按钮的红色边框显然不再位于左侧。有人可以告诉我是否有一种简单的方法可以在 css 或 python 代码中实现这一点?我也尝试了text-align
,但也没有用。
谢谢!
【问题讨论】:
嗯。我怀疑它只能用样式表来完成。部分解决方案是使用样式表,就像它们不是一样,但不设置文本,这将通过覆盖 paintEvent() 来绘制。 您好,感谢您的回复,“部分解决方案是使用样式表,但不设置文本”是什么意思,我不确定这部分。谢谢! 【参考方案1】:为此单独使用样式表几乎是不可能的。我建议你混合样式表和自定义绘画。
首先,编辑样式表,确保将单选按钮的所有颜色设置为transparent
。
然后,创建一个QRadioButton的子类,它通过调用基类实现来绘制按钮和绘制具有指定颜色和字体的文本。
class CustomRadio(QtWidgets.QRadioButton):
def paintEvent(self, event):
# draw the widget as paintEvent normally does
super().paintEvent(event)
# create a new painter on the widget
qp = QtGui.QPainter(self)
# create a styleoption and init it with the button
opt = QtWidgets.QStyleOptionButton()
self.initStyleOption(opt)
# now we can know if the widget is hovered and/or checked
if opt.state & (QtWidgets.QStyle.State_MouseOver | QtWidgets.QStyle.State_On):
# if it is, set the color accordingly
qp.setPen(QtGui.QColor('#e54d42'))
else:
qp.setPen(QtCore.Qt.white)
# finally, draw the text
qp.drawText(self.rect(),
QtCore.Qt.AlignCenter | QtCore.Qt.TextShowMnemonic, self.text())
如果您使用 Designer,则需要推广旋转框:
选择所有单选按钮,右键单击其中任何一个并从上下文菜单中选择Promote to...
;
确保“基类名称”组合框设置为“QRadioButton”;
在“Promoted class name”中,写上“CustomRadio”(上面子类的名字);
在“头文件”字段中写下您保存子类的文件的名称,不带扩展名(例如,如果您使用main.py
,则写上“main”);请记住,路径是相对于 ui 文件(或 py 文件,如果您使用的是 pyuic)的路径,因此如果 ui/py 位于程序的主文件夹中,则子类文件位于“子类”目录中并且被命名为“myradios.py”,你必须在那里写“subclasses.myradios”;
单击“添加”以创建新的提升类,然后单击“提升”以实际提升选定的收音机;
如果您之前没有选择所有收音机,现在您可以使用上下文菜单的Promote to
子菜单中的新“自定义收音机”项来推广它们;
保存ui文件,如果使用pyuic则生成新的python文件,大功告成。
【讨论】:
谢谢!一有机会,我会尝试一下,并告诉你进展如何!我很感激:)以上是关于水平居中单选按钮标签的主要内容,如果未能解决你的问题,请参考以下文章
CSS标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )
css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中