components/grid
布局与大数据 · 51 / 64

Grid

ui.widgets.mountGrid

二维行列数据和自定义 cell renderer。

BEHAVIOR CONTRACT

列宽、行高、滚动窗口与 cell 坐标不混入业务节点。

RECORDED INTERACTION

Harness 滚动网格,可见窗口随之更新。

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 查看源码examples/storybook/stories.zig:3005

这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。

zenit · 双授权开源项目可按 GPL-3.0-only 免费使用;闭源或商业产品需要商业授权。可联系作者:zongyi.xzy#gmail.com(# 换成 @)zenit 5f9add5+wip 2026-09-30