Grid
ui.widgets.mountGridLignes et colonnes en deux dimensions avec cellules personnalisées.
BEHAVIOR CONTRACT
Largeurs de colonnes, hauteurs de lignes, fenêtre de défilement et coordonnées des cellules restent hors des nœuds de l'app.
RECORDED INTERACTION
Le harness fait défiler la grille et la fenêtre visible se met à jour.
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;
}Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.
GridProps
ui.widgets.mountGridfn mountGrid(props: GridProps, scope: *Scope, cx: *Cx) !GridResultChamp
Type
Défaut
Description
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.mountGridChamp
Type
Défaut
Description
root*Node—
—
state*GridState—
—