Qt创建一个圆形按钮

Qt创建一个圆形按钮

1. 使用qss创建一个圆形按钮以及它的问题
   按钮样式表

background-color:rgb(255, 0, 0);
border-radius:50px;
border-width:2px;
border-style:soild;
border:none;

出现的问题是。点击红色圆框外正方形框内的范围，依然可以触发clicked（）槽。
解决的办法是通过Qwidget 的 setMask()接口。

使widget和region重合的部分变得可视。如果region包含widget之外的像素，将由平台决定是否那部分区域能够可视。注意：如果region是特别复杂这个效果会很慢。

未使用setMask()的图像

使用setMask()的图像

ui->pushButton->setMask(QRegion(0, 0, 100, 100, QRegion::Ellipse)); 

可以看出明显的锯齿，甚至都已经不像一个正常的圆了。
最后 网上搜了一下没有找到合适的解决方案，先插个眼。

2. 使用qss border-imag 创建一个圆形的按钮。
   样式表

#pushButton_2
{
border-image:url(:/pic/buttonGood.png);
border:none;
}

要添加的代码

    QPixmap pix(":/pic/buttonGood.png");
    ui->pushButton_2->setMask(pix.mask());

效果图

出现的问题：此时按钮点击的效果仅在黑色区域有效。目前没有找到解决方案先插个眼

效果图很好没有图片变形或者锯齿之类的。但是在点击时相比于普通的按钮没有任何特效给用户的体验不是很好。如何给这种按钮添加上特效。
使用qss的伪状态
qss伪状态

/*
实现点击的效果
*/
#pushButton_2:pressed  
{
margin-left:2px;
margin-top:2px;   
}

默认的按钮在鼠标 hover 和 pressed两种情况会显示不同的特效。这种情况下使用伪状态 hover并不能达到理想的状态
qss代码

#pushButton_2
{
border-image:url(:/pic/buttonGood.png);
border:none;
}
#pushButton_2:hover
{
background-color:rgba(0, 200, 255, 0.5);
border:none;
}
#pushButton_2:pressed
{
margin-left:2px;
margin-top:2px;
}

参考文章

Qt完美实现圆形按钮