Grid
ui.widgets.mountGrid2차원 행·열 데이터와 사용자 정의 cell renderer.
BEHAVIOR CONTRACT
열 너비, 행 높이, 스크롤 창, cell 좌표가 앱 노드에 섞이지 않습니다.
RECORDED INTERACTION
harness가 그리드를 스크롤하면 보이는 창이 갱신됩니다.
pub fn buildGrid(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const widths = [_]f32{ 90, 90, 90, 90 };
const g = try W.mountGrid(.{
.col_count = 4,
.row_count = 12,
.col_widths = &widths,
.cell_height = 30,
.width = 380,
.height = 320,
.cell_render_fn = gridCell,
}, scope, cx);
return g.root;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
GridProps
ui.widgets.mountGridfn mountGrid(props: GridProps, scope: *Scope, cx: *Cx) !GridResult필드
타입
기본값
설명
row_countusize0总行数
col_countusize0总列数
col_widths[]const f32&[_]f32{}每列宽度(px)。长度必须 == col_count。
cell_heightf3232Uniform 行高。若 `row_heights` 为 null 则所有 row 用此高度(快路径)。
row_heights?[]const f32null每行高度(px)。长度必须 == row_count。非 null 时覆盖 `cell_height`。
width?f32null容器宽度(null = grow)
height?f32null容器高度(null = fit)
scroll_directionScrollDirection.vertical.horizontal.both.both内层 ScrollArea 的滚动方向;默认保持双轴,调用方可收窄成单轴。
cell_render_fn?CellRenderFnnullcell 渲染回调(必填)
cell_render_ctx?*anyopaquenull—
overscan_rowsusize4视口外额外渲染的行数 / 列数,提前加载让滚动不抖动
overscan_colsusize2—
row_window_height_hint?f32null外部行窗口的高度提示(px)。计划用 setExternalRowWindow 驱动行绑定的宿主 应传宿主视口高度:初始 pool 按"窗口能盖住的行数"而非"Grid 自身高度/行数" 估算,否则 height=全内容高的 Grid 会为全部行分配 pool。
external_row_window?ExternalRowWindownullmount 时的初始外部行窗口。不传则首次 updateVisibleCells 按全行绑定 (旧行为),窗口稍后推送时再收缩——会产生一次全量绑定尖峰。
frozen_rowsusize0Frozen 行数:表头不随 y 滚动(典型用途 = 1,锁住 header)
frozen_colsusize0Frozen 列数:最左 N 列不随 x 滚动
debug_name[]const u8"Grid"Debug / test 用的 component_name 后缀。默认 "Grid"
GridResult
ui.widgets.mountGrid필드
타입
기본값
설명
root*Node—
—
state*GridState—
—