响应式布局

本文示例使用：

import { RenderAdaptiveGridPanel, RenderText } from 'ds-ui'

DirectSurface UI 的响应式布局不是 CSS 媒体查询，而是通过布局组件在约束变化时重新计算尺寸和位置。窗口缩放、停靠面板变化、标签页浮动都会触发布局。

推荐策略

• 结构分区用 RenderDockPanel。
• 主轴剩余空间用 RenderStackPanel 的 flex。
• 卡片和入口用 RenderAdaptiveGridPanel。
• 字段对齐用 RenderGridPanel。
• 可变数量短项用 RenderWrapPanel。

自适应卡片

const dashboard = new RenderAdaptiveGridPanel({  minColumnWidth: 240,  minColumns: 1,  maxColumns: 4,  columnGap: 12,  rowGap: 12,}) dashboard.addChild(new RenderText('今日工作量'))dashboard.addChild(new RenderText('待处理任务'))dashboard.addChild(new RenderText('风险提醒'), { columnSpan: 2 })

RenderAdaptiveGridPanel 会根据父容器宽度决定当前列数。

表单响应式

复杂业务表单通常不建议自动重排字段顺序。更稳妥的做法是：

• 桌面宽度使用多列表单。
• 窄宽度下减少列数，但保持字段阅读顺序。
• 超长标签和输入值使用省略号、tooltip 或换行策略。
• 必填、校验、说明文本要跟随字段，不要脱离原始字段区域。

滚动与响应式

响应式布局会改变内容尺寸，滚动容器需要重新限制滚动范围。组件内部如果自己管理滚动，应在尺寸变化后重新计算可视范围。

典型规则：

• 当前目标仍可见时，不主动重置滚动条。
• 加载另一份文档时，是否滚动到顶部交给业务调用方决定。
• 大文档和大列表优先保持虚拟化窗口稳定，避免 resize 时全量重建节点。