QT 实现监控软件的动态布局

最近需要做一个监控软件的界面，有一个需求是显示画面窗口是可选的（大部分监控软件都是可以的，即可以选择显示一个摄像头，或显示多个摄像头）如下图所示：

显然显示窗口布局要用到栅格布局 QGridLayout，剩下的问题就是如何让这些窗口随着我选择的不同而动态变化呢？为了方便说明下面给出一个简单的实例。首先在QT设计师中将默认的界面画出来（界面很简单只为了说明情况，默认四个显示窗口，右面的开关控件放在一个widget，大小设置为固定）

本例子是在vs2013下完成

这是我们的头文件

#pragma once
#include <QtWidgets/QMainWindow>
#include "ui_QtGuiApplication7.h"
#include <iostream>
class QtGuiApplication7 : public QMainWindow
{
	Q_OBJECT
public:
	QtGuiApplication7(QWidget *parent = Q_NULLPTR);
private:
	Ui::QtGuiApplication7Class ui;
private slots:
	void two();
	void four();
	void eig();  
};

下面是窗口布局部分

# pragma execution_character_set("utf-8") //显示中文
#include "QtGuiApplication7.h"
QtGuiApplication7::QtGuiApplication7(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);
	connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(two()));
	connect(ui.pushButton_2, SIGNAL(clicked()), this, SLOT(four()));
	connect(ui.pushButton_3, SIGNAL(clicked()), this, SLOT(eig())); //将开关控件和对应的事件联系起来
};
//只显示两个窗口
void  QtGuiApplication7::two()
{
	int num = ui.gridLayout->count();
	for (int i = 1; i <=num; i++)
	{
		QWidget  *p = ui.gridLayout->itemAt(num - i)->widget(); //指针指向栅格布局的最后一个控件
		ui.gridLayout->removeWidget(p);
		delete p;            //此处为了简单粗暴期间现将所有的控件删除，再重新创建，如您有更好的方法可在评论区下留言！
	};
	QLabel *u1 = new QLabel(this);
	QLabel *u2 = new QLabel(this);
	u1->setStyleSheet(" background-color: rgb(0, 0, 0); ");
	u2->setStyleSheet("background-color: rgb(0, 0 ,0); "); //设置label背景为黑色
	ui.gridLayout->addWidget(u1, 0, 0);
	ui.gridLayout->addWidget(u2, 0, 1);//动态的添加控件，（0，0）指的是左上角的第一个控件，以此类推
}
//4个窗口
void QtGuiApplication7::four()
{
	int num = ui.gridLayout->count();
	for (int i = 1; i <=num; i++)
	{
		QWidget  *p = ui.gridLayout->itemAt(num - i)->widget();
		ui.gridLayout->removeWidget(p);
		delete p;
	}
	QLabel *u1 = new QLabel(this);
	QLabel *u2 = new QLabel(this);
	QLabel *u3 = new QLabel(this);
	QLabel *u4 = new QLabel(this);
	u1->setStyleSheet(" background-color: rgb(0, 0, 0); ");
	u2->setStyleSheet("background-color: rgb(0, 0 ,0); ");
	u3->setStyleSheet("background-color: rgb(0, 0 ,0); ");
	u4->setStyleSheet(" background-color: rgb(0, 0 ,0); ");
	ui.gridLayout->addWidget(u1, 0, 0);
	ui.gridLayout->addWidget(u2, 0, 1);
	ui.gridLayout->addWidget(u3, 1, 0);
	ui.gridLayout->addWidget(u4, 1, 1);
	//ui.gridLayout->removeWidget(ui.label_2);
	//ui.gridLayout->removeWidget(ui.label_3);
}
//8个窗口
void QtGuiApplication7::eig()
{
	int num = ui.gridLayout->count();
	for (int i = 1; i <= num ; i++)
	{
		QWidget  *p = ui.gridLayout->itemAt(num - i)->widget();
		ui.gridLayout->removeWidget(p);
		delete p;
	}
	QLabel *u1 = new QLabel(this);
	QLabel *u2 = new QLabel(this);
	QLabel *u3 = new QLabel(this);
	QLabel *u4 = new QLabel(this);
	QLabel *u5 = new QLabel(this);
	QLabel *u6 = new QLabel(this);
	QLabel *u7 = new QLabel(this);
	QLabel *u8 = new QLabel(this);
	u1->setStyleSheet(" background-color: rgb(0, 0, 0); ");
	u2->setStyleSheet(" background-color: rgb(0, 0 ,0); ");
	u3->setStyleSheet(" background-color: rgb(0, 0 ,0); ");
	u4->setStyleSheet(" background-color: rgb(0, 0 ,0); ");
	u5->setStyleSheet(" background-color: rgb(0, 0 ,0); ");
	u6->setStyleSheet(" background-color: rgb(0, 0 ,0); ");
	u7->setStyleSheet("background-color: rgb(0, 0 ,0); ");
	u8->setStyleSheet("background-color: rgb(0, 0 ,0); ");
	ui.gridLayout->addWidget(u1, 0, 0);
	ui.gridLayout->addWidget(u2, 0, 1);
	ui.gridLayout->addWidget(u3, 0,2);
	ui.gridLayout->addWidget(u4, 0, 3);
	ui.gridLayout->addWidget(u5, 1,0 );
	ui.gridLayout->addWidget(u6, 1, 1);
	ui.gridLayout->addWidget(u7, 1, 2);
	ui.gridLayout->addWidget(u8, 1, 3);
	
}

main函数入口

#include "QtGuiApplication7.h"
#include <QtWidgets/QApplication>
int main(int argc, char *argv[])
{
	QApplication a(argc, argv);
	QtGuiApplication7 w;
	w.show();
	return a.exec();
}

运行结果：

默认情况下

按下8个：

按下2个：

效果就是这样，至于后面的进一步处理就可以自由发挥了，比如想在窗口一上显示，可加上事件过滤器，键盘事件等

QT 实现监控软件的动态布局

猜你喜欢