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—
—