界面UI设计

界面设计分为预览和回放两个模块，本节主要是预览模块。

一、替换系统图标

1. 替换生成程序图标

2. 替换生成界面图标

二、窗口布局

1. 自定义标题栏图像

QWidget来实现自定义标题栏，因为QWidget可以自定义大小。布局器使用代码。

1. 自定义标题栏
   
2. 添加组件，并改变样式
   
3. 定义标题栏最小化、最大化、关闭功能键
   

2. 窗口布局

#include<QVBoxLayout>
#include<QHBoxLayout>

/*创建布局器*/
auto Vlay = new QVBoxLayout();
this.setLayout(Vlay);
Vlay->setContentsMargins(0, 0, 0, 0);   //边缘间隔
Vlay->setSpacing(0);    //内部对象的间隔
Vlay->addWidget(ui.head);   //布局器添加布局的对象
Vlay->addWidget(ui.body);

auto Hlay = new QHBoxLayout;
ui.body->setLayout(Hlay);
Hlay->addWidget(ui.left);
Hlay->addWidget(ui.cams);
Hlay->setContentsMargins(0, 0, 0, 0);

三、拖动和缩放

1. 拖动功能

QT自带标题栏是可以实现拖动效果的，但自定义标题栏就需要自己实现拖动效果

static bool MousePress = false;	//鼠标是否按下
static QPoint MousePoint;	//点击的位置

void XViewer10::mousePressEvent(QMouseEvent* ev)
{
    MousePress = true;		//记录按下的状态
    MousePoint = ev->pos();	//记录鼠标的位置
}

void XViewer10::mouseReleaseEvent(QMouseEvent* ev)
{
    MousePress = false;	//记录鼠标的状态
}

void XViewer10::mouseMoveEvent(QMouseEvent* ev)
{
    //若鼠标未按下
    if (!MousePress)
    {
        QWidget::mouseMoveEvent(ev);	//执行其本来的时间
        return;
    }

    this->move(ev->globalPos() - MousePoint);	//当前点击点与窗口初始位置根据相对位置来移动
}

2. 最大化和最小化

1. 定义槽函数

//最大化窗口槽函数
void XViewer10::MaxWindow()
{
    ui.max->setVisible(false);  //最大化图标不可见
    ui.normal->setVisible(true);    //普通图标可见
    this->showMaximized();      //当前窗口最大化
}

void XViewer10::NormalWindow()
{
    ui.normal->setVisible(false); 
    ui.max->setVisible(true);  
    this->showNormal();      
}

2. 绑定信号和槽
   

四、右键菜单调整预览窗口

1. 右键菜单显示窗口数量

1. 定义右键的菜单，并添加菜单的选项

//定义一个菜单
QMenu left_menu;

auto m = left_menu.addMenu(C("视图"));    //给菜单添加一个菜单
auto a = m->addAction(C("1视图"));   	 //给菜单添加一个选项
connect(a, SIGNAL(triggered()), this, SLOT(view1()));	//定义点击选项后的槽函数
a = m->addAction(C("4视图"));
connect(a, SIGNAL(triggered()), this, SLOT(view4()));
a = m->addAction(C("9视图"));
connect(a, SIGNAL(triggered()), this, SLOT(view9()));
a = m->addAction(C("16视图"));
connect(a, SIGNAL(triggered()), this, SLOT(view16()));

2. 重载右键的处理事件

//当点击右键后会执行以下处理
void XViewer10::contextMenuEvent(QContextMenuEvent* ev)
{
	//将鼠标的位置交给菜单处理，菜单会在鼠标的位置显示出来
	//菜单具体的处理取决于left_menu内部的实现
	left_menu.exec(QCurser::pos());
	ev.accpet();	//事件处理结束
}

2. 预览窗口的显示

static QWidget *cam_wids[16] = { nullptr };	//定义存储窗口的仓库
void XViewer10::view(int count)
{
	//初始化布局器
	auto GLay = ui.cams->layout();
	if(!GLay)
	{
		GLay = new QGridLayout();
		GLay.setContentMargins(0, 0, 0, 0);
		GLay.setSpacing(5);
		ui.cams->setLayout(GLay);
	}
	
	//根据传入的窗口数量添加显示的窗口
	int col = sqrt(count);	//获取列数
	for(int i = 0; i < count; i++)
	{
		if(!cam_wids[i])
		{
			cam_wids[i] = new QWidget();
			cams[i]->setStyleSheet("background-color: rgb(0, 0, 0);");			
		}
		//添加到布局器
		GLay.addWidget(cam_wids[i], i / col, i % col);
	}
	
	//根据当前的视图数量，清除无效的窗口
	for(int i = count; i < sizeof(cam_wds) / sizeof(QWidget *); i++)
	{
		if(cam_wds)
		{
			delete cam_wds[i];
			cam_wds[i] = nullptr;			
		}
	}
}

五、相机列表的增删改

1. 相机的添加

1. 添加一个按钮，对应槽函数是生成一个对话框
2. 设置对话框

创建一个对话框
QDialog dialog(this);
dialog.resize(400, 200);
创建对话框的布局器
QFormLayout layout;
dialog.setLayout(layout);
创建布局的对象————输入栏
QLineEdit nameline;
layout.addRow(C("名称"), nameline);
QLineEdit urlline;
layout.addRow(C("码流"), urlline);
QLineEdit sub_url_line;
layout.addRow(C("辅码流"), sub_url_line);
QLineEdit saveline;
layout.addRow(C("存储路径"), saveline);
创建保存按钮对数据进行保存

将数据保存在config中

刷新左侧列表