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更直接。