Tree
ui.widgets.TreeHierarchien, Dateibäume und aufklappbare Strukturen.
BEHAVIOR CONTRACT
Aufklappen, Auswahl, Einrückung, Icons und Tastaturnavigation arbeiten mit stabilen Node-IDs.
RECORDED INTERACTION
Der Harness klickt den Knoten src, um seinen Teilbaum ein- oder auszuklappen.
// ── 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;
}Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). W steht für ui.widgets; col / row / label sind kleine Layout-Helfer des Storybooks.
TreeProps
ui.widgets.Treefn Tree(props: TreeProps) TreeBuilderFeld
Typ
Standard
Beschreibung
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.TreeFeld
Typ
Standard
Beschreibung
wrapper*Node—
—
state*TreeState—
—