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—
—