Native UI Book · GPUI-Kit

Native UI 原生组件手册 (GPUI-Kit)

内置 60+ 生产级组件，通过 gpux::kit（兼容易用别名 gpux::component）导出。所有组件直接编译为 Metal / Vulkan / DX12 / XComponent / WebGPU 着色器图元，零 HTML/CSS 开销，内置 ActiveTheme 深浅色语义令牌与 Sizable 尺寸体系。

实时原生窗口预览 (Live Window Preview)

GPUI-Kit Component Showcase · 8-Target Native GPU Instanced

Buttons & Variants

Primary Ghost Danger

Telemetry Progress & Switch

GPU Batch Fill84%

统一组件导入与主题令牌 (`ActiveTheme`)

在启用 gpui-backend 时，你可以通过 gpux::kit 访问所有原生组件、布局辅助函数（v_flex, h_flex）以及 cx.theme() 语义颜色令牌：

rust

use gpux::prelude::*;
use gpux::kit::button::{Button, ButtonVariants};
use gpux::kit::{h_flex, v_flex, ActiveTheme, Sizable, StyledExt};

fn render_toolbar(cx: &mut Context<Self>) -> impl IntoElement {
    h_flex()
        .w_full()
        .px_4()
        .py_3()
        .justify_between()
        .items_center()
        .bg(cx.theme().title_bar)
        .border_b_1()
        .border_color(cx.theme().border)
        .child(v_flex().child("Cluster Telemetry").text_color(cx.theme().foreground))
        .child(
            Button::new("sync-nodes")
                .primary()
                .small()
                .label("Sync 128 Nodes")
        )
}

组件分类目录

布局系统与响应式断点 (Layout) → v_flex、h_flex、Grid、SplitPane 与 Compact/Medium/Expanded 自适应容器。按钮与分段控件 (Buttons & Actions) → Primary、Ghost、Danger 按钮、图标按钮组与 SegmentedControl。文本输入与表单控件 (Inputs & Forms) → IME 友好的 TextInput、SearchField、Switch、Slider 与 Select。百万行虚拟列表与表格 (Data & Lists) → VirtualList、DataTable、Tree、Badge 与 GPU 实时折线图。弹窗、抽屉与命令面板 (Overlays) → Modal、Drawer、Popover、Tooltip、ContextMenu 与 CommandPalette。 WGSL 着色器与弹簧动画 → 自定义 GPU 着色器画布与物理弹簧阻尼动画曲线。