QT 实现动态分屏的

前言

在我们开发场景应用中会经常遇到，要求能够动态分屏，从一分屏到二分屏、三分屏、四分屏、五分屏、六分屏，可能会更多。

代码实现

视频类型分类定义

// 视频分屏类型
enum VideoLayoutType
{
    OneVideo = 0,
    TwoVideo,
    ThreeVideo,
    FourVideo,
    FiveVideo,
    SixVideo,
    SeventVideo,
    EightVideo,
    NineVideo,
};

初始化分屏列表，我们在这里是使用QLabel 来实现的，实现如下：

// 初始化 9个lable 空间
    for (int i = 0; i < 9; i++)
    {
        QLabel* label = new QLabel;

        label->setStyleSheet(QString("QLabel{background-image:url(:/resources/%1.png); \
            border:1px solid gray; \
            background-position:center; \
            background-repeat:no-repeat; \
            }").arg(QString::number(i + 1)));

        m_videoLabelList.append(label);
    }

实现窗口的动态切换，关键代码实现如下：

void Widget::switchLayout(VideoLayoutType type)
{
    QLayout* layout = this->layout();

    //清除布局内所有元素
    if (layout)
    {
        QLayoutItem* child;
        while ((child = layout->takeAt(0)) != 0)
        {
            //setParent为NULL防止删除后界面不消失
            if (child->widget())
            {
                child->widget()->setParent(NULL);
            }

            delete child;
        }

        delete layout;
    }

    switch (type)
    {
    case OneVideo:
    {
        QGridLayout* gLayout = new QGridLayout(this);
        gLayout->addWidget(m_videoLabelList[0]);
        gLayout->setMargin(0);
    }
    break;

    case FourVideo:
    {
        QGridLayout* gLayout = new QGridLayout(this);
        gLayout->setSpacing(0);
        gLayout->setMargin(0);

        for (int i = 0; i < 4; i++)
        {
            gLayout->addWidget(m_videoLabelList[i], i / 2, i % 2);
        }
    }
    break;

    case FiveVideo:
    {
        QVBoxLayout* pVLay = new QVBoxLayout(this);
        pVLay->setSpacing(0);

        QHBoxLayout* pHTopLay = new QHBoxLayout(this);
        pHTopLay->setSpacing(0);
        for (int i = 0; i < 3; i++)
        {
            pHTopLay->addWidget(m_videoLabelList[i]);
        }

        QHBoxLayout* pHBottomLay = new QHBoxLayout(this);
        pHBottomLay->setSpacing(0);
        for (int i = 3; i < 5; i++)
        {
            pHBottomLay->addWidget(m_videoLabelList[i]);
        }

        pVLay->addLayout(pHTopLay);
        pVLay->addLayout(pHBottomLay);

    }
    break;

    case SixVideo:
    {
        QGridLayout* gLayout = new QGridLayout(this);
        gLayout->addWidget(m_videoLabelList[0], 0, 0, 2, 2);
        gLayout->addWidget(m_videoLabelList[1], 0, 2);
        gLayout->addWidget(m_videoLabelList[2], 1, 2);
        gLayout->addWidget(m_videoLabelList[3], 2, 0);
        gLayout->addWidget(m_videoLabelList[4], 2, 1);
        gLayout->addWidget(m_videoLabelList[5], 2, 2);
        gLayout->setSpacing(0);
        gLayout->setMargin(0);
    }
    break;

    case NineVideo:
    {
        QGridLayout* gLayout = new QGridLayout(this);
        gLayout->setSpacing(0);
        gLayout->setMargin(0);

        for (int i = 0; i < 9; i++)
        {
            gLayout->addWidget(m_videoLabelList[i], i / 3, i % 3);
        }
    }
    break;

    default:
        break;
    }
}

使用右键菜单来响应分屏的处理

m_switchMenu = new QMenu(this);
    m_switchMenu->addAction("一分屏");
    m_switchMenu->addAction("四分屏");
    m_switchMenu->addAction("五分配");
    m_switchMenu->addAction("六分配");
    m_switchMenu->addAction("九分屏");

    QMap<QString, int> strTypeMap;
    strTypeMap["一分屏"] = VideoLayoutType::OneVideo;
    strTypeMap["四分屏"] = VideoLayoutType::FourVideo;
    strTypeMap["五分配"] = VideoLayoutType::FiveVideo;
    strTypeMap["六分配"] = VideoLayoutType::SixVideo;
    strTypeMap["九分屏"] = VideoLayoutType::NineVideo;

    connect(m_switchMenu, &QMenu::triggered, this, [=](QAction* action) {
        QString strText = action->text();
        VideoLayoutType type = VideoLayoutType(strTypeMap[strText]);
        switchLayout(type);
        });

好了，到此就可以实现动态分屏的操作了，但是要想达到真正的应用的还是需要在进行加工，但是从现在来说提供了问题解决思路。

​​源码地址​​