QToolButton的Checked问题及解决方法

今天想做个类似于下图的菜单按钮,想起来使用QToolButton,toolbutton可以改变图标位置,可以实现这种效果,结果处理时出现了意料之外的错误。
QToolButton的Checked问题及解决方法_第1张图片
下面看下现象,我是通过设置样式表来实现这种效果的,设置setchekable(true)来设置点击后按下,再次点击切回来状态;将QToolButton的toolButtonStyle设为ToolButtonTextUnderIcon,这样实现图标在文字上面,再通过
样式表设置pad-top:30px; padding-bottom:15px;调整图标和文字位置居中。

#toolButton{
padding-top:30px;
padding-bottom:15px;
qproperty-icon: url(:/Recourse/elecJuanzong.png);
qproperty-iconSize: 50px 48px;
qproperty-minimumSize: 100px 120px;
background-color:#222B40;
color:rgba(255,255,255, 60%);
font-size: 20px;
}
#toolButton::checked{
padding-top:30px;
padding-bottom:15px;
qproperty-icon: url(:/Recourse/elecJuanzong_checked.png);
qproperty-iconSize: 50px 48px;
background-color:#2F8DED;
font-size: 20px;
}
#toolButton::pressed{
padding-top:30px;
padding-bottom:15px;
qproperty-icon: url(:/Recourse/elecJuanzong_checked.png);
qproperty-iconSize: 50px 48px;
background-color:#2F8DED;
font-size: 20px;
}

但是这样设置出现下面这种效果了,有两个问题:1.设置的padding没有生效
2.设置的checked属性颜色不对,不是蓝色,像是蒙了一层白色网格状的蒙板
QToolButton的Checked问题及解决方法_第2张图片

通过多次产生过尝试发现了解决办法,在样式表中增加 border:none;就可以解决这两个问题了,具体原因还没有查明。

#toolButton{
padding-top:30px;
padding-bottom:15px;
qproperty-icon: url(:/Recourse/elecJuanzong.png);
qproperty-iconSize: 50px 48px;
qproperty-minimumSize: 100px 120px;
background-color:#222B40;
color:rgba(255,255,255, 60%);
border:none;
font-size: 20px;
text-align: top;
}

#toolButton::checked{
padding-top:30px;
padding-bottom:15px;
qproperty-icon: url(:/Recourse/elecJuanzong_checked.png);
qproperty-iconSize: 50px 48px;
background-color:#2F8DED;
border:none;
font-size: 20px;
}
#toolButton::pressed{
padding-top:30px;
padding-bottom:15px;
qproperty-icon: url(:/Recourse/elecJuanzong_checked.png);
qproperty-iconSize: 50px 48px;
background-color:#2F8DED;
border:none;
font-size: 20px;
}

你可能感兴趣的:(Qt,Qt,QToolButton,checked)