QPushButton圆角按钮

QPushButton圆角按钮

记录绘制圆角的几种常用方案。

创建按钮以及设置图片

直接通过setIcon设置，但是要注意设置Icon的大小，代码如下：

	QPushButton *btn= new QPushButton;
    btn->setFixedSize(100, 100);
    btn->setIcon(QIcon(":icons/start.png"));
    btn->setIconSize(QSize(100, 100))

圆角设置

1. 直接设置背景透明，代码如下：

 	btn->setAutoFillBackground(true);
    btn->setFlat(true);
    QPalette p(btn->palette());
    p.setColor(QPalette::Button, Qt::transparent);
    btn->setPalette(p);

该方式能够让按钮透明，只显示设置的图片。但是，按钮的响应区域还是按钮本身的矩形，通过以下的setMask方式，可以修改按钮的响应区域为mask区域。
2. setMask方式
首先加载圆形图片，并缩放为按钮大小，再通过mask取出QBitmap对象，最后调用按钮的setMask设置，代码如下：

	QPixmap maskPixmap(":icons/start.png");
    maskPixmap = maskPixmap.scaled(btn->size());

    QBitmap maskBitmap(maskPixmap.mask());
    btn->setMask(maskBitmap);

另一种更简单的方式，是自己直接构建一个QRegion区域，免去上述的图片加载、缩放等操作，效率更高，代码如下：

	btn->setMask(QRegion(0,0,btn->width(), btn->height(),QRegion::Ellipse));

需要注意的是，通过加载原始图片的方式，可以更加灵活的设置各个异形的mask。
通过mask的方式可以让按钮的响应区域仅在mask区域内，但是，当鼠标移动到按钮上后，按钮进入hover状态时，会在mask的最边缘区域，看到按钮的边框。
为了消除边框，可以通过样式表进行边框透明的补充设置，代码如下：

	btn->setStyleSheet("QPushButton{color:white; background-color:transparent;}");

3. setStyleSheet方式
   样式表可以直接设置多个状态下的样式，代码如下：

	btn->setStyleSheet("QPushButton{background:url(:icons/startEvalute.png);border:0px;}"
            "QPushButton:hover{background:url(:icons/startEvalute.png);border:0px;}"
            "QPushButton:pressed{background:url(:icons/startEvalute.png);;border:0px;}");

如果不是设置背景图片的方式显示圆角，则可以通过border-radius属性进行设置，代码如下：

 btn->setStyleSheet("QPushButton{background-color:rgb(100, 100, 100);border:1px;border-radius:50px;}"
            "QPushButton:hover{border:1px;border-radius:50px;}"
            "QPushButton:pressed{border:1px;border-radius:50px;}");

以上的样式表方式，可以让按钮看起来是图片的圆形，但是其响应区域依然是按钮本身的矩形区域。

总结

所以，想让按钮响应区域改变，还是应该通过setMask来实现，而仅想让显示为圆形（或其他形状的图片），则可以通过样式表方式更加方便。

以上为个人使用经验，如有错误，欢迎指出、分享~谢谢