Qt 制作不规则按钮完结篇

Qt确实给了我们很多很多的方便之处，各种控件，随便调用，但是涉及到了自己心目中的完美形状就

Game Over...

每当自己想定义一款布件，比如按键的形状如图：

   

是不是觉得脑子有点不够用，就用Qt的 qss 什么之类的是想破头也做不来，所以必要时候，我们要学会

自定义按钮：简单来说就是不用 QPushButton 这个类，直接自定义按键事件，按键图形，按键信号槽

废话 不多说了 直接上图：

这是博主 亲历亲为的手打按键(图形中这里乱码是因为楼主懒，这是做一个标本示例，也就没注意这么多了)

下面直接贴源代码代码 供各位乡亲父老一起共享：

#ifndef TABBUTTON_H
#define TABBUTTON_H

#include <QWidget>
#include <QEvent>
class TabButton : public QWidget
{
    Q_OBJECT
public:
    explicit TabButton(QWidget *parent = nullptr);
    void init();
    int drawhigh;//图形的高度
    int drawwtidh;//图形的宽度
    int bodywith;//中间的宽度
    int shadowwith;//阴影的宽度
    int movewith;//图形的总宽度
    int index;
    bool m_isMousePressed;
private:
     // 初始化按钮;
    void initButton();
    // 绘制按钮;
    void paintEvent(QPaintEvent *);
    // 鼠标事件;
    void mouseMoveEvent(QMouseEvent *event);
    void mousePressEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);
protected:
    void drawBady(int tansform = 0,int num = 0);
    void drawShaw(int tansform = 0);
private:
    static const QStringList TAB_BUTTON_NAMES;
signals:

public slots:
};

#endif // TABBUTTON_H

#include "tabbutton.h"
#include <QPainter>
#include <QDebug>
#include <QMouseEvent>

const QStringList TabButton::TAB_BUTTON_NAMES =
{
        QString("系统"),
        QString("教导"),
        QString("参数"),
        QString("文件"),
        QString("诊断"),
};

TabButton::TabButton(QWidget *parent) : QWidget(parent),drawhigh(30),index(0),
    m_isMousePressed(false)
{

}

void TabButton::init()
{//初始化
    bodywith = drawhigh+drawhigh*2/3;//中间
    shadowwith = drawhigh*(2.0/5);//阴影
    drawwtidh = drawhigh+bodywith+drawhigh/4;//总宽度
    movewith = drawwtidh-shadowwith; //移动距离
}

void TabButton::paintEvent(QPaintEvent *)
{
    if(width()<drawwtidh+4*movewith)
    {//得到最合适的高度
        for(;;)
        {
            if(width()>=drawwtidh+4*movewith)
            {
                break;
            }
            drawhigh--;
            init();
            //qDebug()<<drawwtidh+4*movewith;
        }
    }
    else
       init();

    for(int i=4;i>=0;i--)
    {
        if(i != index)
        drawBady(i*(movewith),i);//画五个梯形按钮
        drawShaw(i*(movewith));
    }
    drawBady(index*(movewith),index);//画五个梯形按钮
    drawShaw(index*(movewith));
    //出书宽和高
    qDebug()<<width()<<height();

}
//tansform 为平移系数
void TabButton::drawBady(int tansform, int num)
{// 图形绘制
    QPainter painter(this);
    //painter.setPen(Qt::SolidLine);
    painter.setRenderHint(QPainter::Antialiasing, true);//反走样
    // 设置画笔颜色
    //painter.setPen(QPen(Qt::black, 1));
    painter.setPen(QPen(QColor(168,168,168)));//轮廓
    //图形主体 x右边增大，y右边增大
    QPolygon elepolygon0;//保存点的个数
    elepolygon0<<QPoint(tansform+this->x(), height());
    elepolygon0<<QPoint(tansform+drawhigh, height()-drawhigh);
    elepolygon0<<QPoint(tansform+drawhigh+bodywith,  height()-drawhigh);
    elepolygon0<<QPoint(tansform+drawhigh+bodywith, height()-drawhigh/4);
    elepolygon0<<QPoint(tansform+drawhigh+bodywith+drawhigh/4-2, height());
    elepolygon0<<QPoint(tansform+drawhigh+bodywith+shadowwith, height());
    if(num == index)
    {
        painter.setBrush(QColor(0,0,160));
    }
    else
        painter.setBrush(QColor(168,168,168));//设置画刷填充
    painter.drawPolygon(elepolygon0);//设置范围点

    //描边
    painter.setPen(QPen(Qt::white,2));
    painter.drawLine(QPointF(tansform+this->x(), height()), QPointF(tansform+drawhigh, height()-drawhigh-2));//开头的45°斜线
    if(num == index)
    {
        painter.setPen(QPen(QColor(248,180,0),3));
        painter.drawLine(QPointF(tansform+drawhigh+2, height()-drawhigh-2), QPointF(tansform+drawhigh+bodywith, height()-drawhigh-2));//中间的横线
    }
    else
    {
        painter.drawLine(QPointF(tansform+drawhigh, height()-drawhigh-2), QPointF(tansform+drawhigh+bodywith, height()-drawhigh-2));//中间的横线
    }
    //    painter.drawLine(QPointF(tansform+drawhigh+bodywith,  height()-drawhigh), QPointF(tansform+drawhigh+bodywith, height()-drawhigh/4));//折线
    //    painter.drawLine(QPointF(tansform+drawhigh+bodywith, height()-drawhigh/4), QPointF(tansform+drawhigh+bodywith+drawhigh/4, height()));//小斜线
    //    painter.drawLine(QPointF(tansform+0, height()), QPointF(tansform+drawhigh+bodywith+shadowwith, height()));//下面封口线

    //文本绘制
    // 设置画笔颜色

    painter.setPen(QPen(QColor(Qt::black),1));
    // 绘制区域为当前界面的整个区域（居中）
    //painter.drawText(QRect(tansform+drawhigh,height()-drawhigh,tansform+drawhigh+bodywith,height()), TAB_BUTTON_NAMES.at(num),option);
    painter.drawText(tansform+drawhigh+10,height()-drawhigh/2, QString("系统"));
    //qDebug()<<TAB_BUTTON_NAMES.at(num);

}

void TabButton::drawShaw(int tansform)
{
    QPainter painter(this);
    //painter.setPen(Qt::SolidLine);
    painter.setRenderHint(QPainter::Antialiasing, true);//反走样
    // 设置画笔颜色
    painter.setPen(QPen(Qt::NoPen));
    //图形阴影
    QPolygon elepolygon1;//保存点的个数
    QLinearGradient gradient1(tansform+drawhigh+bodywith,height(),tansform+drawhigh+bodywith+shadowwith,height());//渐变范围和开始点结束点
    elepolygon1<<QPoint(tansform+drawhigh+bodywith,  height()-drawhigh);
    elepolygon1<<QPoint(tansform+drawhigh+bodywith, height()-drawhigh/4);
    elepolygon1<<QPoint(tansform+drawhigh+bodywith+drawhigh/4-2,  height());
    elepolygon1<<QPoint(tansform+drawhigh+bodywith+shadowwith,  height());
    elepolygon1<<QPoint(tansform+drawhigh+bodywith+shadowwith,  height()-drawhigh-2);
    elepolygon1<<QPoint(tansform+drawhigh+bodywith+2,  height()-drawhigh-2);
    painter.setBrush(gradient1);//设置画笔
    gradient1.setColorAt(0, QColor(0,0,0));
    gradient1.setColorAt(0.5, QColor(0,0,0));
    gradient1.setColorAt(1, QColor(168,168,168));
    painter.drawPolygon(elepolygon1);//设置范围点

    painter.setPen(QPen(QColor(168,168,168), 1));
    painter.drawLine(QPointF(tansform+drawhigh+bodywith+shadowwith-1,height()-drawhigh-1), QPointF(tansform+drawhigh+bodywith+shadowwith-1,height()));//x右边增大，y右边增大
    //    painter.drawLine(QPointF(tansform+drawhigh+bodywith+shadowwith,height()-drawhigh), QPointF(tansform+drawhigh+bodywith+shadowwith,height()));//x右边增大，y右边增大
}

void TabButton::mouseMoveEvent(QMouseEvent *event)
{
    qDebug()<<event->pos();
}
void TabButton::mousePressEvent(QMouseEvent *event)
{
    QPoint mousePressPoint = event->pos();
    for(int i = 0;i<5;i++)
    {//判断区域
        if(mousePressPoint.y()>=drawhigh&&mousePressPoint.y()<=height())
        {
            if(mousePressPoint.x()>=i*(movewith)&&mousePressPoint.x()<=i*(movewith)+drawhigh+bodywith+2)
            {
                index = i;
                m_isMousePressed = true;
                qDebug()<<i<<m_isMousePressed;
            }
        }
    }
}
void TabButton::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
    if (m_isMousePressed)
    {
        m_isMousePressed = false;
        update();
    }
}

   如果各位觉得刚好帮到你了，或者对你有一点点启发，希望点个赞，或者分享一下(*^▽^*)