VS2017+QT5.10 在ui界面创建自定义控件的方法

VS2017+QT5.10 在ui界面创建自定义控件的方法

笔者初学QT，VS中c++也仅仅学了一点皮毛。在搭建好VS+QT环境后，自学QT，发现网络上对于VS+QT开发基本操作的介绍少之又少，网课也是基于Qt Creator教学的，因此笔者在学习过程中遇到了不少的困难。哪怕只是个小问题，有时候也要花一上午或者一下午解决，所以写下我遇到的问题，希望我的经验可以给初学者一些帮助！初学qt，如有错误请大家批评指正！

下面是在VS2017+QT5.10创建自定义控件的方法：

一.自定义控件的创建

1.在项目的ui界面创建一个widget控件

2.以如图两个控件为例，将其拖入widget中并布局

3.布置好其他控件

ui界面编辑完转到vs里面写代码，一定要记得：保存！！保存！！保存！！

二.自定义控件的调用

1.ui.xx实现调用ui的控件（xx为控件的objectName)

）

2.ui.xx->函数名（实参） 例如：ui.spinBox->setValue(num);
函数既可以是自定义函数，要在该类中创建声明和定义。
也可以是QT类的函数，不用创建声明和定义，但一定要加上头文件。
例如自定义函数：ui.spinBox->setValue(num);

3.connect连接函数，将信号和槽连接起来
示例：connect(ui.spinBox, spsignal, ui.horizontalSlider, &QSlider::setValue);

三.源代码

1.SmallWidget.h

#pragma once

#include <QtWidgets/QWidget>
#include "ui_SmallWidget.h"

class SmallWidget : public QWidget
{
    Q_OBJECT

public:
    SmallWidget(QWidget *parent = Q_NULLPTR);
	void setNum(int num);
	int getNum();
private:
    Ui::SmallWidgetClass ui;
};

2.SmallWidget.cpp

#include "SmallWidget.h"
#include "ui_SmallWidget.h"
#include<QSpinBox>
#include<QSlider>
#include<QDebug>
#include<QPushButton>

SmallWidget::SmallWidget(QWidget *parent)
    : QWidget(parent)
{
	ui.setupUi(this);
	int nMin = 0;
	int nMax = 200;
	int nSingleStep = 10;

	// 微调框
	ui.spinBox->setMinimum(nMin);  // 最小值
	ui.spinBox->setMaximum(nMax);  // 最大值
	ui.spinBox->setSingleStep(nSingleStep);  // 步长

	// 滑动条
	ui.horizontalSlider->setMinimum(nMin);  // 最小值
	ui.horizontalSlider->setMaximum(nMax);  // 最大值
	ui.horizontalSlider->setSingleStep(nSingleStep);  // 步长

	void(QSpinBox:: * spsignal)(int) = &QSpinBox::valueChanged;
	connect(ui.spinBox, spsignal, ui.horizontalSlider, &QSlider::setValue);
	connect(ui.horizontalSlider, &QSlider::valueChanged, ui.spinBox, &QSpinBox::setValue);
	ui.spinBox->setValue(10);

	connect(ui.btn_get,&QPushButton::clicked, [=]() {
		qDebug() << getNum();
	});
	connect(ui.btn_set, &QPushButton::clicked, [=]() {
		setNum(100);
	});
}
void SmallWidget::setNum(int num)
{
	ui.spinBox->setValue(num);
}

int SmallWidget::getNum()
{
	return ui.spinBox->value();
}

四.效果图