Qt简易滑动按钮

        因为要做智能家居的控制界面,如果直接用按钮的字开关不是很好看,之前也是做过微信小程序和网页的小项目,知道滑动开关这个东西。QT应该可以自己画出来,大致应该就是和之前的棋盘一样重写鼠标点击和绘制,在点击时用定时器作个滑动的效果。

        成果(看起来尚可)

        Qt简易滑动按钮_第1张图片Qt简易滑动按钮_第2张图片

        具体的绘制,这里直接把c和h文件发在下面,cv即可使用

         

#ifndef SLIDERBUTTON_H
#define SLIDERBUTTON_H

#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 
namespace Ui {
class SliderButton;
}

class SliderButton : public QWidget
{
    Q_OBJECT

public:
    explicit SliderButton(QWidget *parent = nullptr);
    ~SliderButton();
    void set_button_size(const int &w, const int &h);
     void set_button_color(const QColor & , const QColor & ,const QColor & );

     signals:
     void signal_button_on();
     void signal_button_off();

protected:
     virtual void mousePressEvent(QMouseEvent *event);
     virtual void paintEvent(QPaintEvent *event);

public slots:
     void slot_update();
private:
    Ui::SliderButton *ui;
    bool m_button_status;

     int m_circle_width;
     int m_button_pos;
     int m_move_distance;

     QColor m_backcolor_on;
     QColor m_backcolor_off;
     QColor m_circle_color;

     QTimer *m_timer;
};

#endif // SLIDERBUTTON_H
#include "sliderbutton.h"
#include "ui_sliderbutton.h"

SliderButton::SliderButton(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SliderButton),m_button_status(false),
    m_circle_width(30),
    m_button_pos(0),
    m_move_distance(20),
    m_backcolor_on(Qt::red),
    m_backcolor_off(Qt::blue),
    m_circle_color(Qt::black)
{
    ui->setupUi(this);
    setWindowFlags(Qt::FramelessWindowHint);
     setAttribute(Qt::WA_TranslucentBackground);
     m_timer = new QTimer(this);
     connect(m_timer, SIGNAL(timeout()), this, SLOT(slot_update()));
}

SliderButton::~SliderButton()
{
    delete ui;
}
void SliderButton::set_button_size(const int & width, const int &heigh)
{
  m_circle_width = heigh;
  m_move_distance = width;
}

void SliderButton::set_button_color(const QColor &on_color, const QColor &off_color, const QColor &button_color)
{
  m_backcolor_on = on_color;
  m_backcolor_off = off_color;
  m_circle_color = button_color;
}

void SliderButton::mousePressEvent(QMouseEvent *event)
{
 Q_UNUSED(event)
 if (false == m_button_status)
 {
  m_button_status = true;
  emit signal_button_off();
 }
 else
 {
  m_button_status = false;
  emit signal_button_on();
 }
 m_timer->start(1);
}

void SliderButton::paintEvent(QPaintEvent *event)
{
 Q_UNUSED(event);
 QPainter painter(this);//创建QPainter对象执行实际的绘图操作
 QPainterPath path;
 painter.setRenderHint(QPainter::Antialiasing, true);//设置了抗锯齿渲染,使边缘更加平滑

//判断按钮状态并且设置颜色
 if (m_button_status == true)
 {
  painter.setBrush(m_backcolor_off);
 }
 else
 {
  painter.setBrush(m_backcolor_on);
 }
 QRect rect (0, 0, m_circle_width, m_circle_width);//定义矩形
 //计算开始结束的坐标
 int startX = rect.left() + rect.width() / 2;
 int startY = rect.top();
 path.moveTo(startX,startY);//绘制半圆路径
 path.arcTo(QRect(rect.left(), rect.top(), rect.width(), rect.height()),90,180);
 //下面的线
 path.lineTo((rect.left() + m_move_distance ), rect.bottom() + 1); // the graph not connet , neet 1 pixcel
 path.arcTo(QRect((startX + m_move_distance),rect.top(),rect.width(),rect.height()),270,180);
 path.lineTo(startX,startY);
 painter.drawPath(path);

 // draw small circle 绘制小圆圈
 painter.setBrush(m_circle_color);
 painter.drawEllipse(m_button_pos ,0,m_circle_width,m_circle_width);
}

void SliderButton::slot_update()//更新位置
{
 if (m_button_status == true)
 {
  m_button_pos += 1;
  if (m_button_pos == m_move_distance + m_circle_width / 2)
  {
   m_timer->stop();
  }
 }
 else if(m_button_status == false)
 {
  m_button_pos -= 1;
  if (m_button_pos == 0)
  {
   m_timer->stop();
  }
 }
 update();
}

调用:

#include "sliderbutton.h"
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //SliderButton w;
    //w.show();
    SliderButton* my_Slider_btn;
    my_Slider_btn = new SliderButton();
    my_Slider_btn->set_button_color(QColor(36,110,202),QColor(188,188,188),QColor(255,255,255));
    my_Slider_btn->set_button_size(50,70);
    my_Slider_btn->show();

    return a.exec();
}

最后我尝试qt4设计师自定义控件那个一直不行,有大佬希望指点一下

你可能感兴趣的:(qt学习,qt,开发语言)