Qt实战案例（3）——控件封装实现（实现数字加减框与滑动条的封装）

一、项目介绍

利用Qt进行控件数字加减框QSpinBox与滑动条QSlider的封装，实现当对数字进行加减时，滑动条也进行相应的移动。
【拓展：可以实现点击按钮获取当前值以及点击按钮将数值设置为50的操作】

二、项目基本配置

2.1 新建

新建一个Qt案例，项目名称为“Test”，基类选择“QWidget”。

2.2 添加Qt设计师界面类

右键Test总文件夹，添加Qt设计师界面类：

选择Widget，点击下一步：

选择类名，这里设置为SmallWidget【类名一般首字母大写】：

三、UI界面设计

首先，打开刚建好的smallwidget.ui界面，放入数字加减框QSpinBox与滑动条QSlider，然后对其进行水平布局，并将该界面拖拽到合适的位置，如下：

接下来，在widget.ui界面中，放入widget控件，将其放入合适的位置，右键——>提升为——>SmallWidget【注意大小写】——>添加——>提升。

提升完成后，可以看到右侧类名变更为SmallWidget：

四、主程序实现

4.1 smallwidget.cpp文件

//QSpinBox变化 QSlider跟着移动
void(QSpinBox::*spSignal)(int)=&QSpinBox::valueChanged;
connect(ui->spinBox,spSignal,ui->horizontalSlider,&QSlider::setValue);
//QSlider移动 QSpinBox跟着变化
connect(ui->horizontalSlider,&QSlider::valueChanged,ui->spinBox,&QSpinBox::setValue);

五、效果演示

六、拓展——实现点击按钮获取当前值以及点击按钮将数值设置为50

6.1 smallwidget.h

在smallwidget.h的public中定义两个函数名：

void setNum(int num);//设置值
int getNum();//获取数值

6.2 smallwidget.cpp

在smallwidget.cpp中定义这两个函数：

//设置值
void SmallWidget::setNum(int num)
{
    ui->spinBox->setValue(num);
}
//获取数值
int SmallWidget::getNum()
{
    return ui->spinBox->value();
}

6.3 widget.ui

在widget.ui中放入两个按钮，将其ObjectName分别命名为：btn_get和btn_set。

6.4 widget.cpp

在widget.cpp中设置按钮点击事件：

//点击获取 获取控件当前值
connect(ui->btn_get,&QPushButton::clicked,[=](){
    qDebug()<<ui->widget->getNum();
});
//设置到50
connect(ui->btn_set,&QPushButton::clicked,[=](){
    ui->widget->setNum(50);
});

6.5 效果演示

ok，以上便是全部内容了，如果对你有所帮助，记得点个赞哟~