用 Gooey 构建 Todo 应用：声明式 UI 与纯状态模式完整实战

【免费下载链接】gooeyGooey is a hybrid immediate/retained mode UI framework designed for building fast, GPU-rendered applications on macOS/Metal, WebAssembly/WebGPU, and Wayland/Vulkan项目地址https://gitcode.com/gh_mirrors/gooey3/gooey点击查看免费下载Gooey 是一个用 Zig 编写的 GPU 渲染 UI 框架支持 macOS/Metal、WebAssembly/WebGPU 与 Wayland/Vulkan 三端。本文将带你用官方 Todo 示例完成一次完整实战用声明式 UI描述界面结构用纯状态模式组织业务逻辑并学会为状态编写不依赖任何 UI 的单元测试。无论你是 Zig 新手还是想体验高性能桌面 UI 的开发者这篇指南都能让你在 10 分钟内跑通一个功能齐全的 Todo 应用。为什么 Todo 应用是最好的实战入口Gooey 的官方 Todo 示例src/examples/todo.zig被设计为 API 的切片演示一个文件里覆盖了框架的核心能力纯状态模型AppState完全不知道 UI 的存在可独立测试声明式布局ui.root/ui.hstack/ui.box等原语组合出 Flexbox 风格布局双向绑定TextInput通过.bind与状态中的draft字段实时同步事件处理器cx.update/cx.updateWith把用户操作映射到纯状态方法保留模式控件Checkbox、Button、TextInput来自 components/ 组件包Gooey 的能力不止于 Todo 清单——下图是用它构建的 AI 聊天客户端 chat-zig展示了深色主题、自定义控件与 GPU 渲染的实际效果快速上手三步跑通官方 Todo 示例环境要求Zig 0.17.0。Gooey 零外部 Zig 包依赖只需链接系统框架/库。第 1 步获取仓库git clone https://gitcode.com/gh_mirrors/gooey3/gooey第 2 步运行 Todo 示例构建目标定义在 build.zig执行zig build run-todo第 3 步体验功能你会看到一个 480×560 的窗口包含输入框 Add 按钮、All / Active / Done 三个筛选按钮、带复选框与 Delete 按钮的任务列表、底部剩余数量 清除已完成栏。完整命令列表见 readme.md。纯状态模式先设计 AppState再碰任何 UIGooey 最核心的设计理念是状态与界面彻底分离。Todo 的状态模型src/examples/todo.zig长这样const AppState struct { todos: [MAX_TODOS]Todo splat(.{}), count: usize 0, draft: []const u8 , // 双向绑定到 TextInput filter: Filter .all, fn pushTodo(self: *AppState, value: []const u8) void { /* 去空白、限长、限容 */ } pub fn toggle(self: *AppState, index: usize) void { /* 翻转完成状态 */ } pub fn remove(self: *AppState, index: usize) void { /* 移除并保持列表连续 */ } pub fn clearCompleted(self: *AppState) void { /* 批量清除已完成 */ } };几个值得注意的工程细节设计点做法收益内存固定容量数组最多 64 条文本用内联buf缓冲区运行期零分配无生命周期耦合边界防御每个方法自带越界/容量检查如 toggle调用方无需预判出错静默降级纯逻辑所有方法不出现Cx、Window等 UI 类型状态可脱离 UI 单测这就是纯状态模式的价值业务逻辑是一段可以被测试直接驱动的纯代码而不是散落在事件回调里的碎片。声明式 UI用 ui.* 原语描述界面声明式 UI 的含义是你只声明界面在给定状态下应该长什么样框架负责在状态变化时重绘。Todo 的render函数src/examples/todo.zig结构非常直观fn render(cx: *Cx) void { cx.render(ui.root(.{ .direction .column, .padding .{ .all 24 }, .gap 16 }, .{ ui.text(Todos, .{ .size 28 }), InputRow{}, // 输入框 Add 按钮 FilterBar{}, // All / Active / Done TodoList{}, // 列表或空状态提示 ui.spacer(), Footer{}, // 剩余数量 清除已完成 })); }声明式布局的常用原语完整定义在 src/ui/ui.root/ui.box— Flexbox 布局容器可设背景色、圆角、主/交叉轴对齐ui.hstack/ui.vstack— 横向/纵向堆叠只带间距与对齐ui.text/ui.textFmt— 文本与格式化文本ui.when/ui.maybe— 条件渲染ui.spacer— 弹性占位一个典型的高亮细节是任务行组件TodoRowsrc/examples/todo.zig需要背景色 垂直居中所以用ui.box(.{ .direction .row, ... })而不是hstack文字颜色则由状态推导——完成的项显示灰色未完成的显示黑色。界面永远是状态的同构映射这正是声明式 UI 的精髓。事件处理cx.update 与 cx.updateWith 两件套Gooey 用Cx上下文管理状态、事件与焦点src/context/用ui.*只做布局。所有用户交互都通过处理器连接回纯状态方法方法签名适用场景cx.update()fn(*State) void无参变更如addTodo、clearCompletedcx.updateWith()fn(*State, Arg) void带参变更如删除第 index 行cx.command()fn(*State, *Window) void需要框架能力焦点、退出、实体Todo 里的两处典型用法// 无参点击 Add 后调用纯状态方法 Button{ .label Add, .on_click_handler cx.update(AppState.addTodo) } // 带参把行索引打包进处理器点击时回传 Checkbox{ .selected self.done, .on_click_handler cx.updateWith(self.index, AppState.toggle) }⚠️ 小提示updateWith的参数会被打包进 8 字节的u64存储所以适合传索引、指针、小枚举如Filter不要传大结构体。完整处理器说明见 readme.md。零 UI 单元测试纯状态模式的直接红利因为AppState不认识 UI测试可以完全在没有窗口、没有渲染的环境里运行src/examples/todo.zigtest remove keeps the list contiguous { var s AppState{}; s.pushTodo(a); s.pushTodo(b); s.pushTodo(c); s.remove(1); // 删掉 b try std.testing.expectEqual(as(usize, 2), s.count); try std.testing.expectEqualStrings(a, s.todos[0].text()); try std.testing.expectEqualStrings(c, s.todos[1].text()); }官方共写了 6 组测试覆盖去空白/空输入忽略、容量上限、越界安全、删除连续性、剩余计数与筛选可见性。执行zig build test这类测试在 CI 上无需显示器、无需 GPU 驱动是纯状态模式最实际的投资回报。小结与下一步回到本文的核心主线声明式 UI 让界面成为状态的函数纯状态模式让逻辑成为可测试的纯代码两者共同构成了 Gooey 的应用开发范式。一个 400 行出头的文件就跑通了完整闭环源码就在 src/examples/todo.zig值得逐行精读。跑通 Todo 之后推荐按这条路线继续深入组件包components/ 提供Button、Modal、Select、Tooltip等开箱即用控件图表charts/ 提供 GPU 加速的折线、柱状、饼图官方文档readme.md 覆盖主题、字体、动画、拖放、无障碍等全部特性更多示例src/examples/ 下有 Pomodoro 番茄钟、虚拟列表1 万行、代码编辑器等实战参考赞分享【免费下载链接】gooeyGooey is a hybrid immediate/retained mode UI framework designed for building fast, GPU-rendered applications on macOS/Metal, WebAssembly/WebGPU, and Wayland/Vulkan项目地址https://gitcode.com/gh_mirrors/gooey3/gooey点击查看免费下载相关推荐ESP-IDF v6.0技术架构革新重塑物联网安全与性能新范式ESP IDF v6.0技术架构革新重塑物联网安全与性能新范式 ESP IDF v6.0作为乐鑫物联网开发框架的重大版本更新标志着ESP32生态在2026年物联网嵌入式驱动开发系统编程企业级可视化图表架构设计Mermaid代码驱动图表解决方案技术解析企业级可视化图表架构设计Mermaid代码驱动图表解决方案技术解析 Mermaid作为一款革命性的代码驱动图表工具通过Markdown风格语法为技术团队提供前端数据可视化图表库Flet 声明式迁移实战用 ft.component、ft.observable 与状态 Hook 将命令式应用重构为 Components 模式Flet 声明式迁移实战用 ft.component、ft.observable 与状态 Hook 将命令式应用重构为 Components 模式 Fle前端跨平台上一篇苹果触控板 Windows 驱动免费开源方案从安装到手势调优下一篇IPATool IPA下载实战教程3条命令拿到App Store应用的IPA包创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考