今天记录下,使用Qt现有的组件,搭配来实现一个滑动按钮的效果。我看之前有人做过类似的,不过是在paintEvent事件里用画笔画的,我呢,比较懒,就使用现成的组件来实现吧,下面看下效果:
这是利用自定义的类继承QWidget,里面再加一个QLabel,来实现上面的效果。顺便提一下,以后可以将自己做得组件保存下来,方便以后项目里使用。
废话不多说,直接上核心代码,没玩过的,都来手动体验下吧。
下面是头文件:
#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H
#include <QWidget>
#include <QLabel>
#include <QTimer>
#include <QMouseEvent>
#include <QStyleOption>
#include <QPainter>
class CustomButton : public QWidget
{
Q_OBJECT
public:
explicit CustomButton(QWidget *parent = nullptr,int width=50, int height=20);
private:
QLabel* myLabel;
QTimer timer;
int m_width;
int m_height;
int dir;
int position;
int max;
int min;
int length;
protected:
void paintEvent(QPaintEvent *event) override; //这个必须要重写,不然,样式表加载无效。
void mousePressEvent(QMouseEvent *event) override;
public slots:
void move_slot(); //定时器的超时槽函数,用来实现按钮的滑动效果
public:
void init();
};
#endif // CUSTOMBUTTON_H
下面是cpp文件:
#include "CustomButton.h"
/*** 我的是MSVC的编译器,必须要这段代码,不然中文就是乱码。如果Mingw编译器可以忽略。
#if _MSC_VER >=1800
#pragma execution_character_set("utf-8")
#endif
********/
CustomButton::CustomButton(QWidget *parent,int width, int height) : QWidget(parent),m_width(width),m_height(height),position(0)
{
max = qMax(m_width,m_height);
min = m_width>m_height?m_height:m_width;
length = max - min;
dir = m_width>=m_height? Qt::AlignLeft : Qt::AlignTop;
connect(&timer,SIGNAL(timeout()),this,SLOT(move_slot()));
init();
}
void CustomButton::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event)
QStyleOption opt;
opt.init(this);
QPainter painter(this);
style()->drawPrimitive(QStyle::PE_Widget,&opt,&painter,this);
}
void CustomButton::mousePressEvent(QMouseEvent *event)
{
if(event->button()==Qt::LeftButton)
{
switch (dir)
{
case Qt::AlignLeft: case Qt::AlignRight:
position = myLabel->pos().x();
timer.start(5);
break;
case Qt::AlignTop: case Qt::AlignBottom:
position = myLabel->pos().y();
timer.start(5);
break;
}
}
QWidget::mousePressEvent(event);
}
void CustomButton::move_slot()
{
switch(dir)
{
case Qt::AlignLeft:
if(position>length)
{
timer.stop();
this->setStyleSheet(QString("CustomButton{background-color:red;border-radius:%1px;}").arg(min/2));
myLabel->setText("开");
myLabel->setStyleSheet(QString("#myLabel{background-color: /*lightgrey*/rgb(144,236,144);border-radius:%1px}").arg(min/2));
dir = Qt::AlignRight;
return;
}
++position;
myLabel->move(position,0);
break;
case Qt::AlignRight:
if(position<=0)
{
timer.stop();
this->setStyleSheet(QString("CustomButton{background-color:rgb(144,236,144);border-radius:%1px;}").arg(min/2));
myLabel->setStyleSheet(QString("#myLabel{background-color:red;border-radius:%1px;}").arg(min/2));
myLabel->setText("关");
dir = Qt::AlignLeft;
return;
}
--position;
myLabel->move(position,0);
break;
case Qt::AlignTop:
if(position>length)
{
timer.stop();
this->setStyleSheet(QString("CustomButton{background-color:red;border-radius:%1px;}").arg(min/2));
myLabel->setText("开");
myLabel->setStyleSheet(QString("#myLabel{background-color: /*lightgrey*/rgb(144,236,144);border-radius:%1px}").arg(min/2));
dir = Qt::AlignBottom;
return;
}
++position;
myLabel->move(0,position);
break;
case Qt::AlignBottom:
if(position<=0)
{
timer.stop();
this->setStyleSheet(QString("CustomButton{background-color:rgb(144,236,144);border-radius:%1px;}").arg(min/2));
myLabel->setStyleSheet(QString("#myLabel{background-color:red;border-radius:%1px;}").arg(min/2));
myLabel->setText("关");
dir = Qt::AlignTop;
return;
}
--position;
myLabel->move(0,position);
break;
}
}
void CustomButton::init()
{
this->resize(m_width,m_height);
QString leftBtn_style = QString("CustomButton{background-color:rgb(144,236,144);border-radius:%1px;}").arg(min/2);
this->setStyleSheet(leftBtn_style);
myLabel = new QLabel(this);
myLabel->setObjectName("myLabel");
myLabel->resize(min,min);
myLabel->setText("关");
myLabel->setAlignment(Qt::AlignCenter);
QString lab_style = QString("#myLabel{background-color: red;border-radius:%1px}").arg(min/2);
myLabel->setStyleSheet(lab_style);
this->setFixedSize(m_width,m_height);
}
最后呢,在主函数调用下,并new一个我们写好的类的实例,来展示效果吧。
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
btn1 = new CustomButton(this,58,22);
btn2 = new CustomButton(this,60,20);
btn3 = new CustomButton(this,18,50);
btn4 = new CustomButton(this,50,22);
label1 = new QLabel("客厅开关:");
label2 = new QLabel("卧室开关:");
label3 = new QLabel("水泵开关:");
label4 = new QLabel("总闸开关:");
form = new QFormLayout(this); //这里是表单布局
form->addRow(label1,btn1);
form->addRow(label2,btn2);
form->addRow(label3,btn3);
form->addRow(label4,btn4);
setStyleSheet("QWidget{background-color:rgb(124,134,146);}.QLabel{background-color:lightgrey;border-radius:3px;}");
resize(sizeHint());
}
上面的代码,实现的功能如下:
1. 可以自定义组件的大小,实例化时可以不指定大小,因为有默认的参数。
2. 如果宽度小于高度,就会实现上下滑动,否则就是左右滑动。
目前就是这些功能,当然还可以添加自定义颜色呀之类的,那么只要在源码里添加相关的接口供外部调用就行了。