布局与大数据Layout · 46 / 64

Stack

ui.widgets.HStack / VStack

常用水平、垂直排列语义。Common horizontal and vertical arrangement.

BEHAVIOR CONTRACT

gap、align、justify、wrap 与基础 box 布局使用相同坐标规则。gap, align, justify and wrap use the same coordinate rules as box.

RECORDED INTERACTION

录像展示横向、纵向与嵌套 Stack。Shows horizontal, vertical and nested stacks.

examples/storybook/stories.zig:1894

// ── Stack (VStack / HStack) ──
pub fn buildStack(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 16);
    try c.appendChild(a, try label(cx, "HStack gap=8"));
    const h = try W.HStack(.{ .gap = 8 }).mount(scope, cx);
    inline for (.{ "A", "B", "C" }) |t| {
        try h.appendChild(a, try W.Button(.{ .label = t, .variant = .secondary }).mount(scope, cx));
    }
    try c.appendChild(a, h);
    try c.appendChild(a, try label(cx, "VStack gap=8"));
    const v = try W.VStack(.{ .gap = 8 }).mount(scope, cx);
    inline for (.{ "First", "Second", "Third" }) |t| {
        try v.appendChild(a, try W.Tag(.{ .text = t }).mount(scope, cx));
    }
    try c.appendChild(a, v);
    return c;
}

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

这是 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

DividerDivider

Layout / Box ModelLayout / Box Model