QT上位机开发（属性页面的设计）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

? ? ? ? 窗口设计的时候，如果很多内容一个page放不下，那么这个时候我们一般都会选择使用tab来进行处理。安装了tab之后，就相当于一个windows里面有好几个page，展示和可操作的内容一下子就扩大了，这应该就是tab页面的优势所在。tab是界面开发中很常见的一个属性，大家可以好好掌握一下。

1、创建一个带widget的基础工程

? ? ? ? 创建带widget的基础工程，主要是建立一个qt编译框架，实际代码未必用得上。

2、编写代码

? ? ? ? 代码的部分也很简单，主要的内容就是mainWindow里面放置一个QTabWidget，它可以看成是tab的总合体。而每一个tab item就是一个独立的QWidget，QWidget部署好了之后呢，就会加入到QTabWidget当中。另外每一个tab里面，我们放置了一个按钮，按钮还配置了对应的回调函数，主要是qDebug()打印，大家可以看下代码。

#include <QApplication>
#include <QTabWidget>
#include <QWidget>
#include <QVBoxLayout>
#include <QPushButton>
#include <QDebug>

int main(int argc, char *argv[]) {
	QApplication a(argc, argv);

	// 创建主窗口
	QWidget mainWindow;
	mainWindow.setWindowTitle("Qt TabWidget Demo");
	mainWindow.resize(600,450);

	// 创建一个 QTabWidget
	QTabWidget tabWidget(&mainWindow);

	// 创建第一个标签页
	QWidget tab1;
	QVBoxLayout layout1(&tab1);

	// 创建Button 1，并为其添加点击事件槽函数
	QPushButton button1("Button 1 in Tab1");
	QObject::connect(&button1, &QPushButton::clicked, [&]() {
		qDebug() << "Button 1 clicked!";
	});

	layout1.addWidget(&button1);
	tabWidget.addTab(&tab1, "Tab 1");

	// 创建第二个标签页
	QWidget tab2;
	QVBoxLayout layout2(&tab2);

	// 创建Button 2，并为其添加点击事件槽函数
	QPushButton button2("Button 2 in Tab2");
	QObject::connect(&button2, &QPushButton::clicked, [&]() {
		qDebug() << "Button 2 clicked!";
	});

	layout2.addWidget(&button2);
	tabWidget.addTab(&tab2, "Tab 2");

	// 将 QTabWidget 放入主窗口
	QHBoxLayout mainLayout(&mainWindow);
	mainLayout.addWidget(&tabWidget);

	mainWindow.show();
	return a.exec();
}

3、测试和验证

? ? ? ? 代码准备好了之后，就可以开始测试了。测试有两点，第一，看tab是不是可以正常显示；第二，看tab中的按钮被按下去之后，qDebug()在输出窗口中有没有打印，这样可以验证回调函数确实被调用了没有。

????????