布局控件

2026年7月8日大约 4 分钟

布局控件

开箱即用的容器型骨架组件，用来把区域快速切成规整结构。与页面 / 分组面板的「静态 / 流式」内部布局互补——布局控件让你不写坐标就能搭出规整版式，拖组件进格子即可。选型与配方见画布系统 · 内部布局。

子组件放在节点 widgets: [] 里。行 / 列 / 网格 / 流式行 / 固定面板共享一组「流式排布 + 面板缩放」参数（下方合并说明）；停靠 / 侧边栏 / 手风琴各有专属结构参数。通用参数见组件手册总览。

在线演示

停靠布局 layout-dock 骨架：顶栏 + 左侧栏 + 中间主区，resizable: true 时运行态可拖分隔条调整、点半圆按钮折叠。

行布局 layout-row（12 列栅格轨道）内嵌 3 个子组件：子项用 grid-col-span 占列宽（4+4+4），不写坐标即等分成三格。

行 / 列 / 网格 `layout-row` / `layout-column` / `layout-grid`

把区域切成规整的行 / 列 / 网格。点格子里的「+」或拖组件进去填充，拖分隔条调比例。「指挥中心·三栏」「仪表盘·四宫格」模板就自带这种骨架。

流式行 `layout-flow-row`

横向排列、放不下自动换行的流式容器，做卡片墙。子项宽度用固定 px 或自适应。

固定面板 `layout-fixed-panel`

定位容器，把内容钉在指定位置 / 尺寸。

以上 5 个容器共享的高频参数：

option	类型	默认	说明
`fluid-justify-content`	select	`flex-start`	主轴对齐（`center` / `space-between` / `space-around` / `space-evenly` …）
`fluid-align-items`	select	`flex-start`	交叉轴对齐（`center` / `stretch` …）
`fluid-gap-value`	number	`0`	子项间隙 px
`panel-content-fit`	select	`none`	内容自适应缩放：`contain` / `cover` / `stretch`（见画布系统）
`children-no-events` / `child-state-follow` / `child-select-exclusive`	boolean	`false`	子组件穿透 / 状态跟随 / 选中互斥
`show-scrollbar` + `scrollbar-*`	boolean	`false`	滚动条

停靠布局 `layout-dock`

上 / 下 / 左 / 右停靠区 + 中间主区，做经典「顶栏 + 侧栏 + 主内容」骨架。默认尺寸 [960, 640]。

参数：

option	类型	默认	说明
`left-enabled` / `right-enabled` / `bottom-enabled` / `top-enabled`	boolean	左右下开、上关	启用各停靠区
`left-size` / `right-size` / `bottom-size` / `top-size`	string	`360px` / `320px` / `260px` / `120px`	各停靠区尺寸（px 或 %）
`*-default-state`	select	`expanded`	各区默认 `expanded` / `collapsed`
`overlay`	boolean	`false`	侧区悬浮覆盖主区（不挤压）
`resizable`	boolean	`true`	运行态可拖动分隔调整
`toggle-*`	—	—	折叠按钮样式（模板 / 图标 / 位置 / 尺寸 / 颜色）
`divider-*`	—	—	分隔线显隐 / 颜色 / 粗细

{ "type": "layout-dock", "uid": "w_dock", "options": {
  "position": [0, 0], "size": [1920, 1080],
  "top-enabled": true, "top-size": "88px",
  "left-enabled": true, "left-size": "360px", "right-enabled": true, "right-size": "320px" },
  "widgets": [ /* 各停靠区与中间主区的子组件，按停靠位置摆放 */ ] }

主区 + 可折叠侧栏 + 分隔条。默认尺寸 [640, 400]。

参数：dock-side（停靠边 left / right / top / bottom）、side-size（侧板尺寸）、overlay（悬浮覆盖）、resizable（运行态可调）、default-state（expanded / collapsed）、toggle-*（折叠按钮）、divider-*（分隔线）。

手风琴 `layout-accordion`

多个可折叠分区，标题即分区名，可单开或多开。默认尺寸 [320, 480]。

参数：

option	类型	默认	说明
`sections`	分区列表	`分区一,分区二,分区三`	分区标题（逗号 / 换行分隔，与子面板同步）
`single-expand`	boolean	`false`	单开模式（手风琴式互斥）
`default-expanded`	string	`0`	加载时展开的分区序号
`show-toggle-all`	boolean	`false`	全部展开 / 收起按钮
`header-*`	—	—	标题高度 / 字号 / 颜色 / 收起 / 展开背景 / 圆角
`toggle-position` / `toggle-icon`	select	`right` / `chevron`	折叠图标位置 / 样式（`chevron` / `plus` / `triangle`）
`panel-*`	—	—	面板背景 / 内边距 / 圆角 / 边框

视图容器 `layout-section`

多视图、一次一显的容器，配合视图导航切换，详见容器与视图 · 视图容器。

占位 `placeholder`

空白占位块，用于布局对齐 / 预留位置。

延伸阅读：组件手册总览 · 画布系统（三种内部布局与场景配方）。