QT c++ 样式 设置 按钮(QPushButton)的渐变色美化

上一篇文章中描述了标签的渐变色美化, 本文描述按钮的渐变色美化。

1.头文件

#ifndef WIDGET_H

#define WIDGET_H

#include <QWidget>

//#include "CustomButton.h"
#include <QVBoxLayout>
#include <QLinearGradient>
#include <QPushButton>

//#include <QLabel>

//#include <QTimer>

QT_BEGIN_NAMESPACE

namespace Ui {

class Widget;

}

QT_END_NAMESPACE

class Widget : public QWidget

{

Q_OBJECT

public:

Widget(QWidget *parent = nullptr);

~Widget();

void initUI() ;

//void setButton(QPushButton * button,int color,int width,int height);

private:

Ui::Widget *ui;

//CustomButton *button;

QPushButton *button2;

// QLabel *label;

// QTimer *timer;

//int counter=0;

bool flag_on=false;//on/off标志

};

#endif // WIDGET_H

2.cpp文件

#include "widget.h"

#include "ui_widget.h"

Widget::Widget(QWidget *parent)

: QWidget(parent)

, ui(new Ui::Widget)

{

ui->setupUi(this);

initUI();

}

Widget::~Widget()

{

delete ui;

}

void Widget::initUI ()

{

QVBoxLayout * mainlayout = new QVBoxLayout(this);//指定布局属于啥组件

setStyleSheet("background-color:rgb(160,203,254);");

QPushButton *button2=new QPushButton(this) ;

button2->setFixedWidth (65);

button2->setFixedHeight (33);

//button2->setStyleSheet("background-color:#dddddd");//初始背景颜色

//setButton(button2,4,65,33);

QObject::connect(button2, &QPushButton::pressed,

**button2,this**\]()//lambda函数 { **flag_on=!flag_on** ;**//状态取反** //qDebug("pressed!"); if(flag_on) { QString color_on= "border:1px solid gray;" "**background-color: qlineargradient**(x1: 0, y1: 0, x2: 0, y2: 1, " "**stop**: 0 #669066," "**stop**: 0.5 #43ff43," "**stop**: 1 #669066);"; //"background-color:#00ff73;";//上面几行是线性过渡色 button2-\>**setStyleSheet(color_on)**; //qDebug("On!"); } else { QString color_off= "border:1px solid gray;" "**background-color: qlineargradient**(x1: 0, y1: 0, x2:0, y2: 1, " "**stop**: 0.1 #aaaaaa," "**stop**: 0.5 #ffffff," "**stop**: 1 #cccccc);"; // "background-color:#f6f6f6;";//上面几行是线性过渡色 button2-\>**setStyleSheet(color_off)** ; //qDebug("Off!"); } }); mainlayout-\>addWidget(button2);//指定布局包含啥组件 this-\>setLayout(mainlayout); } //效果，两种状态的渐变色效果如下   off on