Qt實現自定義滑動按鈕

　　今天記錄下，使用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. 如果寬度小於高度，就會實現上下滑動，否則就是左右滑動。

　　目前就是這些功能，當然還可以添加自定義顏色呀之類的，那么只要在源碼里添加相關的接口供外部調用就行了。