数据展示Display · 29 / 64

Tree

ui.widgets.Tree

层级数据、文件树和可展开结构。Hierarchies, file trees and expandable structures.

BEHAVIOR CONTRACT

展开、选择、缩进、图标和键盘导航围绕稳定 node id 工作。Expansion, selection, indentation, icons and keyboard navigation work on stable node ids.

RECORDED INTERACTION

Harness 点击 src 节点，子树折叠 / 展开。The harness clicks the src node to toggle its subtree.

examples/storybook/stories.zig:2420

// ── 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;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:2420

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

StepsSteps

TableTable