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 してください。