Stack
ui.widgets.HStack / VStack常用水平、垂直排列语义。
BEHAVIOR CONTRACT
gap、align、justify、wrap 与基础 box 布局使用相同坐标规则。
RECORDED INTERACTION
录像展示横向、纵向与嵌套 Stack。
// ── 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;
}这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。
HStackProps
ui.widgets.HStackfn HStack(props: HStackProps) HStackBuilder字段
类型
默认值
说明
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.center交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
wrapboolfalse换行
VStackProps
ui.widgets.VStackfn VStack(props: VStackProps) VStackBuilder字段
类型
默认值
说明
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.stretch交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
*Node
ui.widgets.HStackmount 直接返回 *Node,把它 append 到父节点即可。
*Node
ui.widgets.VStackmount 直接返回 *Node,把它 append 到父节点即可。