自定义控件之——经典滑动显示控件-一一网

本文主要实现经典滑动显示控件并附加部分简单的功能，主要旨在学习自定义控件的实现方法，封装成自己的控件方便代码的移植，我们也要学会使用自己造的轮子，而不用每次都造轮子，这样就可以提高个人开发者的开发效率。本文控件主要实现效果图如下：

动画.gif

实现功能：

QSpinBox上下移加减，QSlider跟着左右移动。
QSlider左右滑动，QSpinBox里面的数字跟着改变。
QSlider滑动，QLabel里面同时显示QSpinBox里面的数值。
封装后的控件提供必要的接口函数供主界面或者其他界面调用。
两个按钮分别是：获取当前值、设置到一半，前面的按钮用来点击后获取QSpinBox里面的数值并将其显示在中间的液晶显示LCD Number控件上，后面按钮点击时QSlider滑到总共长度的一半处停止。

以上就是个人写的一个简单的自定义控件，其中只是封装了Qt自带的三个控件，分别是QSpinBox、QSlider、QLabel，将这三个控件封装成一个sliderandspinbox的控件，需要使用的时候主要方法是：首先在自己的工程里面加入sliderandspinbox.h和sliderandspinbox.cpp两个文件，同时往ui界面拖拽一个Widget，右键点击提升为，添加提升的类的名为:sliderandspinbox,然后选择添加，类名会显示到上边的列表框中，然后单击提升按钮，完成操作，可以看到这个窗口对应的类从原来的QWidget变成了sliderandspinbox，再次运行程序，这个widget中就能显示出我们自定义的窗口了。
回到本文实现的过程，首先新建一个基类是QWidget带ui界面的工程，然后再添加设计时界面类，主要就是封装这个控件，选择Widget不带任何按钮的ui，名字分别sliderandspinbox.h、sliderandspinbox.cpp、sliderandspinbox.ui，主要在该文件内实现封装控件的，并且提供一定的接口函数供主界面或者其他界面调用。

废话少说直接上代码，sliderandspinbox.h代码如下：

#ifndef SLIDERANDSPINBOX_H
#define SLIDERANDSPINBOX_H

#include <QWidget>

namespace Ui {
class SliderAndSpinBox;
}

class SliderAndSpinBox : public QWidget
{
    Q_OBJECT

public:
    explicit SliderAndSpinBox(QWidget *parent = 0);
    ~SliderAndSpinBox();

    //获取数字
    int getNum();

    //设置数字
    void setNum(int num);

private:
    Ui::SliderAndSpinBox *ui;
};

#endif // SLIDERANDSPINBOX_H
复制代码

sliderandspinbox.cpp代码如下：

#include "sliderandspinbox.h"
#include "ui_sliderandspinbox.h"


SliderAndSpinBox::SliderAndSpinBox(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SliderAndSpinBox)
{
    ui->setupUi(this);


    ui->spinBox->setRange(0, 130);
    ui->horizontalSlider->setRange(0, 130);
    ui->spinBox->setValue(0);

    QString s = QString::number(getNum());
    ui->label->setText(s);




    //Qt5的写法 有参信号和槽函数的连接写法
    void(QSpinBox:: * spinBox) (int) = &QSpinBox::valueChanged;
    //QSpinBox移动 QSlider跟着移动
    connect(ui->spinBox, spinBox,ui->horizontalSlider,&QSlider::setValue);
    //QSlider滑动  QSpinBox数字跟着改变
    connect(ui->horizontalSlider,&QSlider::valueChanged,ui->spinBox,&QSpinBox::setValue);
    //QSlider滑动 label里面的数值跟着改变 利用lambda表达式实现显示  其中涉及到了int转QSting
    connect(ui->horizontalSlider,&QSlider::valueChanged,ui->label,[=](){

        QString s = QString::number(getNum());
        ui->label->setText(s);

    });
    
    /* Qt4的写法
    connect(ui->spinBox, SIGNAL(valueChanged(int)),
                         ui->horizontalSlider, SLOT(setValue(int)));
    connect(ui->horizontalSlider, SIGNAL(valueChanged(int)),
                         ui->spinBox, SLOT(setValue(int)));*/


}

//获取数字函数的实现
int SliderAndSpinBox::getNum()
{
    ui->spinBox->value();
}

//设置数字函数的实现
void SliderAndSpinBox::setNum(int num)
{
    ui->spinBox->setValue(num);

}

SliderAndSpinBox::~SliderAndSpinBox()
{
    delete ui;
}
复制代码

sliderandspinbox.ui布局如下：

至此就封装了一个简单的滑动显示控件，代码基本都有注释，就不一一讲了，有问题的可以留言交流，一起进步。
接下来widget.h代码如下：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;

};

#endif // WIDGET_H
复制代码

widget.cpp代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //点击获取  获取当控件当前的值
    connect(ui->btn_get,&QPushButton::clicked,[=](){
      ui->lcdNumber->display(ui->widget->getNum());
    });

    //设置到一半,即设置到某固定数值
    connect(ui->btn_set,&QPushButton::clicked,[=](){

      ui->widget->setNum(65);
    });

}

Widget::~Widget()
{
    delete ui;
}
复制代码