QT 分屏功能

一、主要思路
1、自定义一个继承QWidget的类
功能:
实现分屏
实现鼠标左键双击转换分屏状态
2、添加QWidget控件提升到自定义类

二、实现效果
初始状态
在这里插入图片描述
双击后
在这里插入图片描述
三、主要代码

//鼠标双击事件处理
bool M_WidgetClass::eventFilter(QObject *obj, QEvent *e)
{
    if (e->type() == QEvent::MouseButtonDblClick)
    {
        //获取双击对象
        QLabel* widget = (QLabel*)obj;
        if (!m_widgetFlag)
        {
            m_widgetFlag = true;
            setAllLabelHide();
            m_gridLayout->addWidget(widget, 0, 0);
            widget->setVisible(true);
            widget->setFixedHeight(this->height());
            widget->setFixedWidth(this->width());
            return true;
        }
        else
        {
            m_widgetFlag = false;
            setAllLabelShow();
            return true;
        }
    }
    return false;
}

//添加分屏
void M_WidgetClass::init()
{
    //也可以在这里设置主界面的样式

    //网格布局初始化
    m_gridLayout = new QGridLayout(this);
    m_gridLayout->setContentsMargins(0, 0, 0, 0);

    int height = this->height()/2 - 7;
    int width = this->width()/2 - 7;

    //创建4个分屏
    for(int i = 0 ; i< m_labelNum;i++)
    {
        QLabel *widget = new QLabel(this);
        widget->setFixedHeight(height);
        widget->setFixedWidth(width);

        //加入事件
        widget->installEventFilter(this);
        widget->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

        //加入列表
        m_labelList<<widget;
    }

    //设置布局 两行两列
    m_gridLayout->addWidget(m_labelList.at(0),0,0,1,1);
    m_gridLayout->addWidget(m_labelList.at(1),0,1,1,1);
    m_gridLayout->addWidget(m_labelList.at(2),1,0,1,1);
    m_gridLayout->addWidget(m_labelList.at(3),1,1,1,1);

    this->setLayout(m_gridLayout);
}
void M_WidgetClass::setAllLabelHide()
{
    for (int i = 0; i < m_labelNum; ++i)
    {
        m_gridLayout->removeWidget(m_labelList.at(i));
        m_labelList.at(i)->setVisible(false);
    }
}

void M_WidgetClass::setAllLabelShow()
{
    setAllLabelHide();
    
    for (int i = 0; i < m_labelList.size(); i++)
    {
        m_labelList.at(i)->setVisible(true);
        m_labelList[i]->setFixedHeight(this->height() / 2 - 7);
        m_labelList[i]->setFixedWidth(this->width() / 2 - 7);
        qDebug() << m_labelList.at(i)->width();
    }

    m_gridLayout->addWidget(m_labelList.at(0), 0, 0, 1, 1);
    m_gridLayout->addWidget(m_labelList.at(1), 0, 1, 1, 1);
    m_gridLayout->addWidget(m_labelList.at(2), 1, 0, 1, 1);
    m_gridLayout->addWidget(m_labelList.at(3), 1, 1, 1, 1);
}

void M_WidgetClass::setLabelHeight(int height)
{
    this->setFixedHeight(height);
}

void M_WidgetClass::setLabelWidth(int width)
{
    this->setFixedWidth(width);
}

四、下载链接

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HTML视频监控四分屏和九分屏是指使用HTML技术实现视频监控系统中同时显示多个摄像头画面的布局方式。 四分屏指将屏幕分为四个区域,每个区域显示一个摄像头画面。这种布局方式适合监控较少的区域,可以同时监控多个摄像头。在HTML中可以使用CSS的网格布局或者表格布局来实现四分屏布局,在每个区域中嵌入视频插件或者使用HTML5 video标签来播放相应的视频流。 九分屏则将屏幕分为九个区域,每个区域显示一个摄像头的画面。这种布局方式适用于监控范围较大的场所,可以同时显示更多的摄像头画面。在HTML中也可以使用CSS的网格布局或者表格布局来实现九分屏布局,在每个区域中嵌入视频插件或者使用HTML5 video标签来播放相应的视频流。 HTML视频监控四分屏和九分屏的实现过程主要涉及HTML、CSS和JavaScript等技术。通过使用HTML标签和CSS样式定义布局,再通过JavaScript代码实现视频的显示和控制,可以实现多个摄像头画面的同时播放。 总的来说,HTML视频监控四分屏和九分屏可以通过使用HTML、CSS和JavaScript等技术实现,通过划分屏幕区域并在每个区域中嵌入视频插件或者使用HTML5 video标签播放相应的视频流,来显示多个摄像头的画面。这种布局方式可以提高视频监控系统的效率和实时性,方便用户同时监控多个区域或场所。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Liu Zz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值