qt分裂器布局代码实现

一：什么是分裂器布局呢？

分裂器布局（Splitter Layout）是一种用户界面布局方式，用于将窗口或容器分割成多个可调整大小的区域。这些区域之间通过一个或多个可拖动的分隔条（即分裂器）分隔开来，用户可以通过拖动分隔条来改变各个区域的大小。

分裂器布局通常用于需要动态调整界面元素大小的情况，比如文件浏览器、编辑器等。它允许用户根据自己的需要调整不同区域的大小，以更好地适应当前的工作环境或需求。

在 GUI 库中，比如 Qt、wxWidgets 等，都提供了分裂器布局的支持。通常，通过创建一个分裂器对象，并向其添加子部件（比如面板、窗口、部件等），就可以实现分裂器布局。用户可以通过鼠标拖动分隔条来调整子部件的大小，以便更好地布局界面。

总的来说，分裂器布局是一种灵活且常用的界面布局方式，可以提高用户界面的可调整性和适应性。如下图就是一个分裂器布局，怎么去创建这么一个分裂器呢？

方法一：直接拖拽控件进行布局。

1.首先添加两个widget，这时候两个控件是透明的，我们可以右键选择样式表进行颜色添加，RGB（红绿蓝）是一种用的颜色表示方式，其中红色、绿色和蓝色的值分别用一个介于 0 和 255 之间的数字来表示。在 CSS 中，可以使用 background-color 属性来指定元素的背景颜色。如果你想在 CSS 中使用 RGB 表示颜色，你可以像这样写：

         background-color: rgb(红色值, 绿色值, 蓝色值); 

其中，红色值、绿色值和蓝色值分别是介于 0 和 255 之间的整数，用逗号分隔。例如，如果你想指定红色为 100、绿色为 150、蓝色为 200 的颜色，你可以这样写：

         background-color: rgb(100, 150, 200); 

2.然后选中这两个控件，进行竖直分裂器布局，整个控件进行竖直布局

3.再添加一个控件，这里用到的是，Graphics View,ctrl+左键选中这个控件和垂直分裂器进行分裂器水平布局，最后整体垂直布局。

//----------------为了防止生成ui后，有些控件被压缩看不见，可以添加最小宽度---------------

最后生成的效果如下图：

方法二：使用代码进行分裂器的布局

下图是我写得一个示例图：箭头出可以拉升改变布局，就像ppt一样的界面布局。接下来，让我们看看这是咋实现的吧！

首先要知道，分裂器有两种布局，一个是水平布局，一个是垂直布局，以下就是创建两种布局的方法：（这个函数有两个参数，第一个是布局的样式，第二个this 实际上是指向当前窗口部件的指针，表示将创建的分割器添加到当前窗口部件中。这样做是为了确保分割器能够正确地在当前窗口部件中显示和布局。

//创建分裂器水平布局
    QSplitter* pHSplitter = new QSplitter(Qt::Horizontal,this);

竖直分裂器：

//注意参数pHSplitter，表示的是父指针
    QSplitter* pVSplitter = new QSplitter(Qt::Vertical,pHSplitter);

开始写项目：

思路如下：

整体分为左边和右边，左边和右边使用的是分裂器水平布局，右边又是两个控件组成，使用分裂期垂直布局。

左边创建一个QWidget控件，可以设置它的属性（颜色，加载时最小宽度）：

 QWidget* pLeftWidget =  new QWidget(this);
    //设置它的颜色
    pLeftWidget->setStyleSheet("background-color:gsb(54,54,54)");
    //设置他的最小宽度
    pLeftWidget->setMinimumWidth(100);

然后在创建一个分裂期水平布局，将这个控件添加到这个分裂器当中去：

//创建分裂器水平布局
    QSplitter* pHSplitter = new QSplitter(Qt::Horizontal,this);
//然后我们将这个widget添加到分裂器当中去
    pHSplitter->addWidget(pLeftWidget);

其次写右边，创建分裂器垂直布局，再创建两个控件，将这两个控件添加到这个布局当中去。

//右侧的竖直分裂器
   //注意参数pHSplitter，表示的是父指针
    QSplitter* pVSplitter = new QSplitter(Qt::Vertical,pHSplitter);

    //在拖动到位并且弹起鼠标之再显示分割条

    pVSplitter->setOpaqueResize(false);

    QWidget* pRightTopWidget = new QWidget(this);
    pRightTopWidget->setStyleSheet("background-color:(145,145,145)");

    //在创建一个控件
    QTextBrowser* pRightBottom = new QTextBrowser(this);
    pRightBottom->setStyleSheet("background-color:gsb(0,0,0)");

    pVSplitter->addWidget(pRightTopWidget);
    pVSplitter->addWidget(pRightBottom);

最后将右边这个分裂器布局添加到最开始创建的分裂期水平布局当中去。

 pHSplitter->addWidget(pVSplitter);

    //布局添加分裂器
    PHLay->addWidget(pHSplitter);

    //设置整体布局
    setLayout(PHLay);

这里解释一下最后一个函数的作用。

//设置整体布局  setLayout(PHLay)；

setLayout() 是 QWidget 类的成员函数，用于设置窗口部件的布局管理器。通过将之前创建的布局管理器 PHLay 传递给 setLayout() 函数，可以将该布局管理器应用到当前窗口部件上。

这样做的效果是，整个窗口部件的布局会受到 PHLay 所管理的布局的影响。换句话说，窗口部件中的所有子部件（包括之前添加的分割器 pHSplitter）都会按照 PHLay 所定义的布局规则进行排列和调整。