DockPanel 停靠布局

LIVE CANVAS可运行组件示例

ON-DEMAND RUNTIME交互式示例将在进入视区时启动避免文档首屏同时初始化多个 Canvas Runtime

RenderDockPanel 用于把子节点停靠到上、下、左、右，并让一个填充节点占用剩余区域。它适合构建工作台、左右分栏、带工具栏的业务页面。

API 总览

主类：

RenderDockPanel

构造和子项

new RenderDockPanel(options?) 的构造参数可省略。options 支持 padding 和通用盒模型字段，还可以通过 fillChild 在构造时设置主内容。构造后使用 addChild(child, data) 添加停靠子节点，使用 setFill(child) 替换主内容。具体字段由构造器类型提示给出，不需要从包内路径导入内部 options 接口。

import { RenderDockPanel, RenderText } from 'ds-ui' const root = new RenderDockPanel({  padding: 12,  fillChild: new RenderText('主内容区'),})

DockChildData：

字段	类型	默认值	说明
`dock`	`'left' \| 'top' \| 'right' \| 'bottom' \| 'fill'`	必填	停靠方向。`fill` 会作为主内容处理。

基本用法

import { RenderDockPanel, RenderText } from 'ds-ui' const root = new RenderDockPanel()const navigation = new RenderText('左侧导航')navigation.width = 240const toolbar = new RenderText('顶部工具栏')toolbar.height = 40 root.addChild(navigation, { dock: 'left' })root.addChild(toolbar, { dock: 'top' })root.setFill(new RenderText('主内容区'))

停靠子节点按照添加顺序依次消耗可用区域，最后的 fill 子节点使用剩余矩形。

Dock 方向

dock	说明
`left`	停靠到左侧，常用于导航树、筛选栏。
`right`	停靠到右侧，常用于属性面板、批注栏。
`top`	停靠到顶部，常用于标题、菜单、工具栏。
`bottom`	停靠到底部，常用于状态栏、操作栏。
`fill`	占用剩余空间，也可以直接调用 `setFill`。

组合结构

典型工作台结构：

DockPanel
  top: MenuBar
  left: Navigation
  right: Inspector
  fill: TabbedWorkspace

典型维护页面结构：

DockPanel
  top: Query Form + Toolbar
  fill: GridView

使用建议

需要稳定分区时使用 RenderDockPanel，比嵌套多个 StackPanel 更清晰。
左右区域在子组件上设置 width，上下区域在子组件上设置 height。
主内容区使用 setFill，避免同时存在多个填充节点。
需要可拖动分隔条时，组合现有的 RenderSplitter；DockPanel 继续负责稳定停靠，Splitter 负责用户可调比例。

DockPanel

可运行示例与完整源码。