Tree
ui.widgets.Tree階層データ、ファイルツリー、展開可能な構造。
BEHAVIOR CONTRACT
展開、選択、インデント、アイコン、キーボード操作は安定した node id を軸に動作します。
RECORDED INTERACTION
harness が src ノードをクリックし、サブツリーを折りたたみ / 展開します。
// ── Tree ──
pub fn buildTree(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const leaves = [_]W.TreeNodeData{
.{ .id = "main", .label_text = "main.zig" },
.{ .id = "root", .label_text = "root.zig" },
};
const nodes = [_]W.TreeNodeData{
.{ .id = "src", .label_text = "src", .children = &leaves },
.{ .id = "readme", .label_text = "README.md" },
};
const t = try W.Tree(.{ .nodes = &nodes }).mount(scope, cx);
return t.wrapper;
}Storybook にあるこの story のコードそのままです(zenit 5f9add5+wip 2026-09-30)。W は ui.widgets のことで、col / row / label は Storybook 内の小さなレイアウトヘルパーです。
TreeProps
ui.widgets.Treefn Tree(props: TreeProps) TreeBuilderフィールド
型
デフォルト値
説明
nodes[]const TreeNodeData&.{}—
indentf3220—
selectablebooltrue—
on_select?core.HandlerRefnull选中回调。用 `cx.strHandlerFrom(State, ptr, method)` 构造即可在回调里 拿到**被选中节点的 id**(此前是无 payload 的 HandlerRef,而 FlatNode 是私有的,应用根本无从知道选中了谁)。注册成无参 handler 也仍会被调用。
on_expand?core.HandlerRefnull—
expand_icon_asset?svg_assets.Assetnull—
selection_modeselection_mod.SelectionMode.single选择模式。默认 .single = 与加入多选之前的行为一致(非破坏性新增)。 .multi 下 Cmd/Ctrl 点选切换、Shift 点选连续区间(按 flat_index)。
TreeResult
ui.widgets.Treeフィールド
型
デフォルト値
説明
wrapper*Node—
—
state*TreeState—
—