GPUIX元素完全参考11个原生元素一次看懂附代码示例【免费下载链接】gpuixNode.js React bindings for Zed GPUI.项目地址: https://gitcode.com/gh_mirrors/gp/gpuixGPUIX是 Zed 编辑器 GPU 渲染框架 GPUI 的 React 绑定库让你用 React 和 TypeScript 构建直接渲染到 GPU 的原生桌面应用——没有 Electron没有 Web 视图。本文带你一次看懂 GPUIX 的全部11 个原生元素从最基础的div和text到语法高亮代码块code、diff 查看器diff、Markdown 渲染markdown再到虚拟列表virtual-list和浮层anchored并附可直接上手的代码示例。上面这个 Waku 风格的聊天应用完全由 GPUIX 驱动侧边栏、虚拟滚动消息列表、输入框、markdown渲染器全部是原生元素。GPUIX 原生元素速查表GPUIX 共提供 11 个已实现的宿主元素另有一个规划中的canvas完整清单见 README.md 的 Supported Elements 一节元素一句话说明典型用途div弹性布局容器卡片、按钮、布局骨架text可选中、可复制的文本标签、段落codeTree-sitter 语法高亮代码块代码展示diff统一 diff 查看器支持词级高亮代码评审视图markdownGitHub 风格 Markdown文档、聊天消息input原生单行文本编辑器搜索框textarea原生多行、自动增高编辑器聊天输入框virtual-list只构建可视区域的长列表消息流、大数据列表img位图/SVG 彩色图片头像、插图svg可着色的单色 SVG 图标工具栏图标anchored相对锚点定位的浮层菜单、Tooltip每个元素在 Rust 侧都有独立的实现文件核心自定义元素集中在 packages/native/src/custom_elements/ 目录元素类型定义可查 packages/react/src/types/host.ts。布局与文本div与text这两个是最基础的元素撑起整个应用的骨架。div支持完整的 flexbox 布局text支持所有文字样式且所有文本天生可选中复制。div style{{ display: flex, gap: 8, padding: 16, backgroundColor: #313244 }} text style{{ color: #ffffff, fontSize: 18 }}Hello GPUIX!/text /div两个新手必须知道的要点文本颜色默认是黑色与 CSS 不同GPUI 不会从父元素继承color务必显式设置。hover / active 是原生样式对象写在style里由 Rust 直接应用零 JavaScript 往返。div style{{ backgroundColor: #313244, borderRadius: 8, padding: 12, hover: { backgroundColor: #45475a }, active: { backgroundColor: #585b70 }, }} 按钮 /div文本三件套markdown、code、diff这是 GPUIX 的杀手级元素 三个文本组件在 Rust 中用 Tree-sitter 计算语法高亮颜色来自主题而非布局高亮延迟到达也不会重排且全部支持跨元素拖选复制。三者同框效果Markdown 渲染markdown支持 GitHub 风格 Markdown标题、列表、表格、引用、围栏代码、删除线、任务列表裸 URL 自动链接。markdown source{readme} onLinkClick{(e) open(e.value)} /代码高亮code每行固定行高块高度在语法高亮运行前就已确定支持行号和语言头部条。内置 Rust、TypeScript、JavaScript、Python、Go、JSON 等 15 种语言。code code{source} languagetypescript showLineNumbers /差异查看diff接收标准git diff补丁默认随父容器流动父列表可以成为唯一滚动容器开启wordDiff只高亮真正变化的词。maxLines可截断长补丁并触发onShowMore。diff patch{unifiedPatch} wordDiff maxLines{open ? undefined : 24} onShowMore{() setOpen(true)} onToggleFile{(e) toggle(e.value)} /三者都接受可选的theme属性逐层覆盖内置暗色主题行高、gutter 宽度、标题字号等布局数字放在theme.metrics里调样式只需一次 React 重渲染无需重编译原生模块。原生文本输入input与textarea两者都走 GPUI 的平台级输入处理器自带原生光标、文字选择、IME 组合输入、剪贴板、撤销重做和字形安全删除。textarea value{draft} placeholderAsk anything minRows{1} maxRows{8} onChange{(event) setDraft(event.value ?? )} onSubmit{send} /Enter触发onSubmittextarea中ShiftEnter换行编辑器先在原生侧更新再把完整值报告给 React光标编辑时常亮、空闲后每 500ms 闪烁失焦停止重绘光标颜色可通过input theme{{ caret: #22c55e }} /覆盖input需要autoFocus或点击才能获得焦点否则收不到按键事件。长列表性能利器virtual-list普通滚动容器会构建每一个子元素virtual-list则只构建、布局、绘制视口附近的行是聊天消息流这类长列表的正确选择。virtual-list alignmentbottom followTail estimatedItemHeight{180} style{{ flexGrow: 1, minHeight: 0 }} {messages.map((message) ( Message key{message.id} message{message} / ))} /virtual-list常用属性速览属性默认作用alignmenttop聊天式底部定位用bottomfollowTailfalse贴底时自动跟随新增行overdraw512视口外多构建的像素estimatedItemHeight无未测量行的初始高度估算⚠️ 注意GPUIX 不支持嵌套滚动。一个父级可以滚动内部不能再放virtual-list或overflow: scroll。图片与图标img与svg两者都接收文件系统路径而非 URL。img加载 PNG、JPEG、WebP、GIF、SVG全彩色objectFit与 CSS 一致contain默认 /cover/fill/scaleDown/none加载失败显示占位图而不是崩溃。svg走 GPUI 的单色图标渲染器用style.color着色专为工具栏图标设计。style.color是必须的不设则不绘制。svg src{iconPath} style{{ width: 16, height: 16, color: #b4b4b4 }} /chat 示例的全部侧边栏和输入框图标就是这么实现的图标素材见 examples/assets/icons/。浮层定位anchoredanchored让元素相对一个锚点定位配合deferred可渲染在稍后的绘制通道上——菜单、Tooltip、Select 下拉必须用它才能盖住virtual-list和页面其余部分。anchored sidetop alignend gap{6} deferred div style{{ backgroundColor: #232323, padding: 8 }} text style{{ color: #ffffff }}菜单项/text /div /anchored常用属性sidetop/right/bottom/left、alignstart/center/end、anchor八向锚点、offset、fit: snap自动收进窗口内。跨元素文本选择零配置GPUIX 绘制的每一处文本——包括code、diff、markdown内部——都可以选中和复制。从标题拖到围栏代码块中间内容全部选中CmdC按文档顺序合并复制。想退出选择工具栏、按钮、行号槽只需userSelect: none它像 CSS 一样向下继承。上手示例与运行方式项目内置四个示例全部使用硬编码数据位于 examples/ 目录示例运行命令展示内容chatcd examples bun --hot chat.tsx完整聊天应用虚拟列表 markdown 动画侧边栏native-textcd examples bun --hot native-text.tsxmarkdown/code/diff三件套切换countercd examples bun --hot counter.tsx最小应用状态、事件、hoverdiffcd examples bun --hot diff.tsx用divtext手搓的 diff 对照最小入口只需三步import { render } from gpuix/react function App() { return div style{{ padding: 16 }}text style{{ color: #fff }}hello/text/div } render(App /, { title: My App, width: 800, height: 600 })依赖 Rust 工具链和 Node.js 18macOS 需 Xcode Metal Toolchain。完整构建步骤见 README.md 的 Building 章节架构细节可参考 AGENTS.md。小结11 个 GPUIX 原生元素覆盖了桌面应用的全部核心场景布局divflexbox 原生 hover/active文本text/markdown/code/diff全可选中输入input/textarea原生编辑器性能virtual-list只渲染可视行视觉img/svg图片图标浮层anchored后置绘制通道配合bun --hot热重载和 GPU 测试渲染器截图一套 React 心智模型即可构建流畅的原生桌面应用 【免费下载链接】gpuixNode.js React bindings for Zed GPUI.项目地址: https://gitcode.com/gh_mirrors/gp/gpuix创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考