Qt创建一个圆形按钮

最新推荐文章于 2024-04-08 09:31:26 发布

QT的狗

最新推荐文章于 2024-04-08 09:31:26 发布

阅读量4.4k

点赞数

分类专栏： QT 文章标签： qt ui 开发语言

本文链接：https://blog.csdn.net/qq_47500842/article/details/125358029

版权

QT 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

Qt创建一个圆形按钮

使用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));

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

使用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;
}