常用布局模式

本页总结业务系统中最常见的页面布局组合。布局设计的目标不是把所有内容塞进一个容器，而是先分区，再在局部选择合适的布局组件。

更完整的页面级组合、上下文分层和命令组织见 常用业务场景组合。

选择原则

先用结构容器表达页面，再通过统一组件属性处理细节：

• 页面分区优先选 RenderDockPanel 或 RenderDockWorkbench。
• 线性区域优先选 RenderStackPanel，通过 spacing 和 flex 管理间距与剩余空间。
• 表单、属性、严格对齐内容优先选 RenderGridPanel。
• 可滚动内容必须先明确滚动所有者，避免外层和内部组件重复滚动。
• 容器用原生 padding，子组件用 margin、宽高和 alignment；不要为单个属性增加包装层。
• RenderBorder 只在需要背景、边框、圆角或 accent 时使用，不要作为普通布局容器套在每个区域外面。

查询表格页

StackPanel vertical
  PageHeader
  QueryForm
  Toolbar
  GridView flex=1

实现要点：

• 根容器使用 RenderStackPanel。
• 表格使用 flex = 1 占满剩余高度。
• QueryForm 内部用 RenderGridPanel 对齐字段。
• 查询条件、表格、详情和命令的完整组合见 常用业务场景组合。

左树右表

DockPanel
  left: TreeView
  fill: StackPanel
    Toolbar
    GridView

实现要点：

• 左侧树给固定宽度。
• 右侧内容作为 fill 区域。
• GridView 自己管理滚动。

工作台页面

DockPanel
  top: MenuBar / Toolbar
  left: NavigationMenu
  fill: TabbedWorkspace

实现要点：

• 全局导航和菜单用 DockPanel 分区。
• 每个标签页内部独立组合页面布局。
• 标签页关闭时释放自身页面上下文和业务对象。
• 应用壳、tab 页面和上下文分层见 复杂工作台场景。

详情编辑页

StackPanel vertical
  PageHeader
  GridPanel form
  ActionBar

实现要点：

• 表单字段使用 GridPanel。
• 长备注、多行文本使用 TextArea 或独立 ScrollViewer。
• 保存、取消等按钮放在明确的操作区，不要混入表单网格。
• 分组表单、草稿、校验和提交流程见 表单编辑页场景。

文档阅读页

DockPanel
  left: TreeView + Search
  fill: MarkdownViewer

实现要点：

• 目录树、搜索框、搜索结果可以在左侧用 StackPanel 组合。
• MarkdownViewer 自己处理文档滚动、搜索命中和复制。