一、简述

我们在设计界面时通常会使用QPushButton或QToolButton，这是两种非常常用的按钮类，用这两种按钮可以满足我们日常的使用。这两种按钮都继承于 QAbstractButton，因为功能的不同，分成了QPushButton和QToolButton，那么这两种按钮具体怎么使用，可以参考Qt助手，本文重点不在于此。

现在我们先不谈按钮的功能，就按钮的外观，样式，形状等进行讨论。一般设置按钮具体显示效果可以使用setIcon()方法给按钮设置图标，或者使用样式来设计按钮。这是我们日常最常用的两种方法，的确十分好用，但是问题来了，这两种方式无法实现真正意义上的不规则按钮。那么什么是不规则按钮呢？

一般我们从QtDesigner中拖拽出来的或者直接new出来的按钮外观默认都为矩形，那么其他形状的按钮我称之为不规则按钮，下面详细讲述如何实现。

二、不规则按钮的实现

第一种：setIcon()方法给按钮设置图标

    ui.pushButton->setIcon(QIcon(":/Resources/stop.png"));ui.pushButton->setIconSize(QSize(60, 60));// 通过样式去除边框;ui.pushButton->setStyleSheet("border:none;");connect(ui.pushButton, &QPushButton::clicked, [](){ qDebug() << "ButtonClicked"; });

我们通过如上代码实现了这样的效果，我们看到按钮是圆形的，外观确实是不规则的，那么我们试试点击按钮的效果呢，也就是除了我们看到的圆形区域外按钮是否可以被点击呢，见下图。

我们给按钮点击操作进行输出，点击图标区域可以触发点击效果，但是点击图标以外的区域仍然可以触发点击效果，严格意义上来说这样的交互效果肯定是不行的，虽然外观上我们看到的是不规则的，但实际操作上却仍然是在矩形区域中进行按钮点击的。

把上面代码中给按钮设置样式的代码注释掉，然后运行。我们看到其实通过设置图标的方式在点击效果上还是在矩形区域中点击，达不到在圆形图标按钮范围内点击的效果。

第二种：给按钮设置样式

ui.pushButton->setStyleSheet("background-image:url(:/Resources/stop.png);border:none;");connect(ui.pushButton, &QPushButton::clicked, [](){ qDebug() << "ButtonClicked"; });

这里不管是设置background-image还是border-image，其效果同第一种方法，外观不规则，点击效果仍然在矩形区域中。

我们换一种，不设置图片，使用border-radius将按钮设置为圆形并设置红色背景。效果如下，效果仍然同第一种方法。

ui.pushButton->setStyleSheet("background:red;border-radius:30px;");connect(ui.pushButton, &QPushButton::clicked, [](){ qDebug() << "ButtonClicked"; });

第三种：通过给按钮设置mask（面罩）的方式

经过以上两种方式的尝试，发现在外观上确实达到了我们想要的效果，但实际操作有些偏差。可以使用下面的方法达到我们想要的效果。

Qt 之 QLabel 设置面罩
，在这篇文章中提到了给QLabel设置面罩的用法，完成了一些不规则的QLabel样式，同理也是可以给按钮设置的面罩的。有需要了解的可以先看一下这篇文章。

QPixmap maskPixmap(":/Resources/stop.png");
ui.pushButton->setMask(maskPixmap.mask());
connect(ui.pushButton, &QPushButton::clicked, [](){ qDebug() << "ButtonClicked"; });

第四种：重写按钮控件

此种方法就是继承QWidget，通过paintEvent的方式绘制按钮，达到不规则的效果。通过重写鼠标事件达到鼠标点击按钮等效果以及按钮外观的样式（如hover，pressed效果）。
具体实现请见下篇文章。

下图为自绘的圆盘式按钮。

尾

一个多月没写文章了，实在惭愧，虽然经常以事情多没时间为理由，但这只是给自己一个偷懒的借口罢了。上学时候，经常鼓励自己的一句就是：男人就得对自己狠一点。有时候就该对自己狠一点，而不是给自己多找个偷懒的理由。

希望自己能够静下心来好好写些文章，记录日常Coding的点点滴滴。也希望小伙伴们多多点赞与关注，你们的鼓励也是我不断分享的动力来源。O(∩_∩)O~晚安。

Qt简述如何实现不规则按钮相关推荐

Qt实现不规则按钮之自绘圆盘式按钮
一.简述在上一篇文章中我们讲述了如何实现不规则按钮( Qt简述如何实现不规则按钮),其中提到了另外一种方法就是自绘,今天就此谈一谈如何自绘实现一个圆盘式的按钮.下面先看一张效果图. 二.代码之路其 ...
qt不规则按钮样式在自适应分辨率时应该注意的图片缩放模式
提要 qt设置不规则按钮的样式,并要求不规则按钮能够适应不同的分辨率,分为同比例的分辨率,如16:9,也可以为不同比例的的分辨率,如之前为16:9,同时适应16:5的分辨率.在设置不规则按钮时背景图片 ...
qt 关闭窗口的槽函数_勇哥的VC++应用框架学习之QT(1) 信号槽、按钮控件、opencv读取显示图片...
前言勇哥对于C语言,C++早些年有一些接触,这个系列贴子就记载一下C++应用框架的学习经验. 在写程序时,UI.基础类库.应用程序框架对于vc来讲,只能依靠MFC和QT了. 勇哥对MFC有很强的抵触, ...
ugui unity 取消选择_UGUI中几种不规则按钮的实现方式
前言 UGUI中的按钮默认是矩形的,若要实现非矩形按钮该怎么做呢?比如这样的按钮: 本文将介绍两种实现方式供大家选择. 使用alphaHitTestMinimumThreshold Image类的al ...
cocos2d-x中实现不规则按钮的点击效果
cocos2d-x中实现不规则按钮的点击效果先说一点,这是从别人那里扒来的,亲测有效觉得不错,分享一下: 原理很简单,就是判断按钮图片的点击区域像素点透明度是不是0,需要修改源代码: 我拿coco ...
QT小控件-遥控按钮
QT小控件-遥控按钮前言二.使用步骤 1.QT使用自定义控件 2.程序如下: 3.使用说明总结前言一共两种遥控控件,滑动式和点触式. 滑动式按钮点触式按钮二.使用步骤 1.QT使用自定义 ...
qt Dialog自定义右上角的按钮
需求场景: 使用 qt Dialog窗口进行预览文本内容时,发现窗口的右上角只有帮助.关闭按钮,又不想每次通过鼠标改动窗口的大小查看更多的内容. 思路: 修改 Dialog 右上角的按钮为最大 ...
通过检测png图片透明区实现不规则按钮
来源:http://blog.csdn.net/enin_dqc/archive/2010/09/09/5874327.aspx 常见的按钮或窗体都是四四方方的矩形,默认创建产生的window窗体都是 ...
关于qt使用qt designer设置好工具按钮图标但运行时不显示的问题
关于qt使用qt designer设置好工具按钮图标但运行时不显示的问题这种情况分为两种编译时不能显示图标打包好添加dll文件后不能显示图片对于第一种情况点击creator左上角的构建,点击 ...
qt使用样式表来设置不规则按钮
参考代码如下: pixmap.load(":/new/prefix1/淳中切图/未选中-3.png");pixmap = pixmap.scaled(QSize(125 / m_p ...

Qt简述如何实现不规则按钮