1 添加一个Qt设计师界面类
    image.png
    选择Widget
    image.png
    选择类名
    image.png

    2 设计这个自定义控件的ui
    image.png

    3 因为这个控件的父类是QWidget, 所以要使用的话要先拖一个Widget容器到界面上
    image.png
    选中-右键-提升为
    image.png

    4 这样这个控件就能显示在主窗口了
    image.png

    5 接下来写代码实现 调整spinBox的值,滑动条位置也相应改变

    1. SmallWidget::SmallWidget(QWidget *parent) :
    2.     QWidget(parent),
    3.     ui(new Ui::SmallWidget)
    4. {
    5.     ui->setupUi(this);
    6.     void (QSpinBox::*sig)(int) = &QSpinBox::valueChanged;
    7.     connect(ui->spinBox, sig, ui->horizontalSlider, &QSlider::setValue);    // spin 控 slider
    8.     connect(ui->horizontalSlider,&QSlider::valueChanged,ui->spinBox,&QSpinBox::setValue);   // slider 控 spin
    9. }

    6 再实现主窗口获取值 与 设置值 

    1. Widget::Widget(QWidget *parent)
    2.     : QWidget(parent)
    3.     , ui(new Ui::Widget)
    4. {
    5.     ui->setupUi(this);
    6.     // 设置值
    7.     connect(ui->btn_Set,&QPushButton::clicked,[=](){
    8.         ui->smwidget->SetValue(50);
    9.     });
    10.     // 获取值
    11.     connect(ui->btn_Get,&QPushButton::clicked,[=](){
    12.         qDebug() << "当前值为:  " << ui->smwidget->GetValue();
    13.     });
    14. }
    15. // smallwidget.cpp
    16. void SmallWidget::SetValue(int v)
    17. {
    18.     ui->spinBox->setValue(v);
    19. }
    20. int SmallWidget::GetValue()
    21. {
    22.     return ui->spinBox->value();
    23. }

    image.png