QToolButton的Checked问题及解决方法

最新推荐文章于 2024-05-12 11:05:40 发布

sundynes

最新推荐文章于 2024-05-12 11:05:40 发布

阅读量8.9k

点赞数 1

分类专栏： Qt 文章标签： Qt QToolButton checked

本文链接：https://blog.csdn.net/qq_25532071/article/details/89420035

版权

Qt 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天想做个类似于下图的菜单按钮，想起来使用QToolButton,toolbutton可以改变图标位置，可以实现这种效果，结果处理时出现了意料之外的错误。
在这里插入图片描述
下面看下现象，我是通过设置样式表来实现这种效果的，设置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属性颜色不对，不是蓝色，像是蒙了一层白色网格状的蒙板
在这里插入图片描述

通过多次产生过尝试发现了解决办法，在样式表中增加 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;
}