DirectSurface UIDirectSurface UI
开始使用
文档/布局系统

Flex 弹性分配

DirectSurface UI 的弹性分配主要体现在 RenderStackPanel.addChild(child, flex)。它用于让某些子节点占满剩余空间，解决页面中“固定头部 + 自适应内容”的问题。

API 总览

import {  RenderDataGrid,  RenderStackPanel,  RenderText,  RenderTextBox,  type CrossAxisAlignment,  type MainAxisAlignment,  type Orientation,  type StackPanelChildData,} from 'ds-ui'
API 类型 用途
RenderStackPanel class 水平或垂直线性布局，addChild(child, flex) 提供弹性分配。
StackPanelChildData type 子项布局数据，包含 flex 权重。
Orientation type 主轴方向：horizontal 或 vertical。
MainAxisAlignment / CrossAxisAlignment type 主轴和交叉轴对齐方式。

最小装配顺序是：创建 RenderStackPanel，按自然尺寸添加标题/工具栏，再把主内容用 addChild(child, 1) 加入以占满剩余空间。

核心规则

  • flex = 0：子节点使用自然尺寸。
  • flex > 0：子节点参与剩余空间分配。
  • 多个 flex 子节点按权重比例分配空间。
  • 只有父容器主轴约束是有限尺寸时，flex 才会分配剩余空间。

常见结构

const page = new RenderStackPanel({  orientation: 'vertical',  spacing: 8,  crossAxisAlignment: 'stretch',}) page.addChild(new RenderText('患者列表'))page.addChild(new RenderTextBox({ placeholder: '输入姓名或住院号' }))page.addChild(new RenderDataGrid({  columns: [{ key: 'name', title: '姓名', type: 'text' }],  rows: data,}), 1)

标题和搜索框保持自然高度，表格占满剩余区域。

多区域分配

const root = new RenderStackPanel({  orientation: 'horizontal',  spacing: 8,  crossAxisAlignment: 'stretch',}) root.addChild(new RenderText('左侧区域'), 1)root.addChild(new RenderText('右侧区域'), 2)

右侧区域获得左侧两倍的剩余宽度。

使用建议

  • 页面纵向结构中，通常只有主内容区需要 flex = 1。
  • 不要给所有子节点都设置 flex，否则标题、按钮、输入框会被拉伸到不自然的尺寸。
  • 在无界滚动区域内不要依赖 flex 填满高度；滚动内容应使用自然高度。
  • 如果需要同时控制上下左右停靠，使用 RenderDockPanel 更直接。