---
title: "Tree-Komponente — zenit Zig UI"
description: "Hierarchien, Dateibäume und aufklappbare Strukturen. Aufklappen, Auswahl, Einrückung, Icons und Tastaturnavigation arbeiten mit stabilen Node-IDs."
url: https://zenit.z.express/de/components/tree
language: de
alternate_en: https://zenit.z.express/components/tree.md
alternate_zh: https://zenit.z.express/zh/components/tree.md
alternate_es: https://zenit.z.express/es/components/tree.md
alternate_ja: https://zenit.z.express/ja/components/tree.md
alternate_ko: https://zenit.z.express/ko/components/tree.md
alternate_fr: https://zenit.z.express/fr/components/tree.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Tree

`ui.widgets.Tree`

Hierarchien, Dateibäume und aufklappbare Strukturen.

[Video](https://zenit.z.express/media/stories/tree.mp4?v=8481e7ed45)

**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.

`examples/storybook/stories.zig:2420`

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

[Quellcode auf GitHub ansehenexamples/storybook/stories.zig:2420](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2420)

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.Tree`

[src/ui/components/tree/mod.zig:38](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/tree/mod.zig#L38)

```zig
fn Tree(props: TreeProps) TreeBuilder
```

| Feld | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `nodes` | `[]const TreeNodeData` | `&.{}` | — |
| `indent` | `f32` | `20` | — |
| `selectable` | `bool` | `true` | — |
| `on_select` | `?core.HandlerRef` | `null` | 选中回调。用 \`cx.strHandlerFrom(State, ptr, method)\` 构造即可在回调里 拿到\*\*被选中节点的 id\*\*（此前是无 payload 的 HandlerRef，而 FlatNode 是私有的，应用根本无从知道选中了谁）。注册成无参 handler 也仍会被调用。 |
| `on_expand` | `?core.HandlerRef` | `null` | — |
| `expand_icon_asset` | `?svg_assets.Asset` | `null` | — |
| `selection_mode` | `selection_mod.SelectionMode` | `.single` | 选择模式。默认 .single = 与加入多选之前的行为一致（非破坏性新增）。 .multi 下 Cmd/Ctrl 点选切换、Shift 点选连续区间（按 flat\_index）。 |

### TreeResult

`ui.widgets.Tree`

[src/ui/components/tree/mod.zig:269](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/tree/mod.zig#L269)

| Feld | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `wrapper` | `*Node` | — | — |
| `state` | `*TreeState` | — | — |