700字范文 > Qt简述如何实现不规则按钮

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

时间：2018-12-14 02:39:02

相关推荐

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

一、简述

我们在设计界面时通常会使用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"; });