如何实现包含5个项目的QSplitter？查阅文档未找到方案

QSplitter本身是双面板组件，要实现5个项目的拆分，需要通过嵌套QSplitter来完成。以下是具体的实现代码，以水平布局为例：

<div class="q-px-md" style="height: 400px;"> <!-- 需给容器设置高度，否则QSplitter无法正常渲染 -->
  <q-splitter orientation="horizontal" value="20">
    <!-- 第一个面板 -->
    <q-splitter-pane>
      <Buttons />
    </q-splitter-pane>

    <!-- 嵌套第二个QSplitter，拆分剩余空间 -->
    <q-splitter-pane>
      <q-splitter orientation="horizontal" value="25">
        <!-- 第二个面板 -->
        <q-splitter-pane>
          <Buttons />
        </q-splitter-pane>

        <!-- 嵌套第三个QSplitter -->
        <q-splitter-pane>
          <q-splitter orientation="horizontal" value="33">
            <!-- 第三个面板 -->
            <q-splitter-pane>
              <Buttons />
            </q-splitter-pane>

            <!-- 嵌套第四个QSplitter -->
            <q-splitter-pane>
              <q-splitter orientation="horizontal" value="50">
                <!-- 第四个面板 -->
                <q-splitter-pane>
                  <Buttons />
                </q-splitter-pane>
                <!-- 第五个面板 -->
                <q-splitter-pane>
                  <Buttons />
                </q-splitter-pane>
              </q-splitter>
            </q-splitter-pane>
          </q-splitter>
        </q-splitter-pane>
      </q-splitter>
    </q-splitter-pane>
  </q-splitter>
</div>

关键说明： #

• 必须给QSplitter的父容器设置固定高度/宽度（根据拆分方向），否则组件无法正常显示拆分栏。
• orientation属性控制拆分方向，horizontal为水平拆分，vertical为垂直拆分。
• value属性设置面板的初始占比（百分比），可根据需求调整。
• 每个拆分面板必须用<q-splitter-pane>标签包裹内容。

如果需要垂直布局，只需将所有orientation="horizontal"改为orientation="vertical"，并调整父容器的宽度即可。

内容的提问来源于stack exchange，提问作者Ballazx