Tree
ui.widgets.TreeHiérarchies, arborescences de fichiers et structures dépliables.
BEHAVIOR CONTRACT
Le dépliage, la sélection, l'indentation, les icônes et la navigation au clavier reposent sur des ids de nœud stables.
RECORDED INTERACTION
Le harness clique sur le nœud src pour replier ou déplier son sous-arbre.
// ── 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;
}Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.
TreeProps
ui.widgets.Treefn Tree(props: TreeProps) TreeBuilderChamp
Type
Défaut
Description
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.TreeChamp
Type
Défaut
Description
wrapper*Node—
—
state*TreeState—
—