上一篇文章中描述了标签的渐变色美化, 本文描述按钮的渐变色美化。
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