布局与大数据Layout · 51 / 64

Grid

ui.widgets.mountGrid

二维行列数据和自定义 cell renderer。Two-dimensional rows and columns with custom cells.

BEHAVIOR CONTRACT

列宽、行高、滚动窗口与 cell 坐标不混入业务节点。Column widths, row heights, the scroll window and cell coordinates stay out of app nodes.

RECORDED INTERACTION

Harness 滚动网格，可见窗口随之更新。The harness scrolls the grid and the visible window updates.

examples/storybook/stories.zig:3005

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;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:3005

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

ScrollAreaScrollArea

GlassLabGlassLab