一、效果

自定义红色区域组件，做到数字与拖拽条相互影响。

 二、实现

 

 输入合适的名字

 

 打开自定义组件ui

 

 选择合适的组件进行布局

 将两个空间的信号和值进行绑定

 新增自定义函数并实现

 

#include "smallwidget.h"
#include "ui_smallwidget.h"

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

    //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);
}
//设置数字
void smallWidget::setNum(int num){
    ui->spinBox->setValue(num);
}
//获取数字
int smallWidget::getNum(){
    return ui->spinBox->value();
}
smallWidget::~smallWidget()
{
    delete ui;
}

 三、使用

绘制一个Widget,选择提升为smallWidget。

 

 新增两个功能按钮

 实现按钮功能

#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,[=](){
        qDebug()<<ui->widget->getNum();
    });
        //设置到一半
        connect(ui->btn_set,&QPushButton::clicked,[=](){
            ui->widget->setNum(50);
    });
}

Widget::~Widget()
{
    delete ui;
}