企业官网建设流程全解析

EUI-NEO打造多页面桌面应用实战：从单屏Demo到完整项目的进阶之路

【免费下载链接】EUI-NEOEUI-NEO is a cross-platform, high-performance, low-overhead C++17 GPUI framework项目地址: https://gitcode.com/gh_mirrors/eui3/EUI-NEO

EUI-NEO 是一个跨平台、高性能、低开销的 C++17 UI 框架，支持 GLFW/SDL2 窗口后端与 OpenGL/Vulkan 渲染后端。很多新手用它写第一个单屏 Demo 后都会遇到同一个问题：页面越写越多，代码越堆越长，最后变成一个"面条文件"。本文以仓库中真实的 calgary_gallery 应用 为蓝本，带你走通从单屏 Demo 到多页面完整项目的进阶之路 🚀

第一步：搭好单页骨架

在 EUI-NEO 中，一个 DSL 应用只需要实现两样东西：应用配置dslAppConfig()和页面绘制函数compose()。窗口创建、事件循环、渲染节流这些脏活都由框架接管。

const DslAppConfig& dslAppConfig() { static const DslAppConfig config = DslAppConfig{} .title("My App") .pageId("my_app") .windowSize(1440, 920); return config; }

配置项支持链式调用：窗口尺寸、最小/最大尺寸、UI 缩放、帧率、字体、调试浮层等都能直接写在调用里，详见 docs/DSL.md。

第二步：设计全局状态模型（关键一步）

多页面应用的核心不是"画多个页面"，而是先想清楚状态放哪里。参考 calgary_gallery 的 page_context.h，它把整个应用的"大脑"集中在一个文件里：

这样做的好处：任何一个页面文件都能直接读写状态，页面之间无需互相持有指针，切换逻辑也只有一个入口，不会漏改状态。

第三步：实现导航栏与页面切换

导航栏本质是一组"文字 + 点击区域"。calgary_gallery 的做法很有借鉴价值：每个导航项叠放两份文字（普通色与高亮色），用透明度切换表达选中态，点击区域则交给 mouseArea 组件：

components::mouseArea(ui, id + ".hit").size(width, height) .onTap([page] { gallery::switchPage(page); }).build();

switchPage()内部统一做三件事：更新当前页、重置页面级状态（选中项、滚动位置）、把页面浮现动画进度pageReveal归零。切换动画交给框架的 transition 系统声明式完成，不需要手写补间。

第四步：把文件拆成"每页一个文件"

这是从 Demo 到"完整项目"的分水岭。仓库的组织约定很清晰：

examples/ 短小的单屏 API 演示 apps/ 较长的多页面应用；每个 app 独占一个文件夹

以 calgary_gallery 为例，拆分后的目录结构一目了然：

apps/calgary_gallery/ ├── app.cpp # 应用入口：配置 + 导航栏 + 页面宿主 ├── pages/ │ ├── page_context.h # 全局状态与公共逻辑 │ ├── about_page.h # 每个页面一个文件 │ ├── news_page.h │ ├── exhibitions_page.h │ └── contacts_page.h └── components/ # 应用内复用的小组件

app.cpp只保留三块职责：应用配置、顶部导航栏、以及根据state.page分发到具体页面的"页面宿主"。每个页面文件只暴露一个composeXxxPage()函数，页面内部完全自治。

第五步：加细节，让它像真正的产品

拆完结构后，几个低成本高回报的细节可以让体验质变：

• 页面转场动画：用onFrame推进一个 0→1 的进度值，配合easeOutCubic缓动驱动透明度与位移，400ms 即可完成一次流畅转场（见 app.cpp 中的 pageTicker）。
• 每页独立滚动位置：给每个页面各存一个eui::Signal<float>，切走再切回时位置还在。
• 响应式布局：根据screen.width切换紧凑/宽松布局，例如导航栏在窄窗口下自动换行排布。
• 主题系统：使用 components/theme.h 的令牌统一管理颜色，深浅色主题一键切换。

进阶参考：仓库里的"学习地图"

想继续深入，按这个顺序看仓库内容效率最高：

1. examples/ — 单屏 Demo，快速熟悉 API 手感
2. apps/calgary_gallery/ — 本文的完整案例：4 个页面 + 详情浮层 + 网络数据流
3. apps/gallery/ — 侧边栏导航式多页面应用，深浅主题实时切换
4. components/ — 30+ 现成组件：sidebar.h、tabs.h、navbar.h、scrollview.h

文档方面，重点推荐 docs/DSL.md（布局与 DSL 全貌）、docs/组件.md（组件清单）、docs/动画.md（transition 用法）和 docs/状态.md（Signal 状态绑定）。

总结

从单屏 Demo 到完整多页面项目，核心就四步：集中管理状态 → 统一切换入口 → 每页一个文件 → 补上动画与响应式细节。EUI-NEO 的 DSL 设计天然支持这种演进——compose()就是页面工厂，Signal 就是状态总线，框架负责布局、事件和脏区重绘，你只需要专注"页面该长什么样"。现在就可以打开仓库里的 calgary_gallery，一边跑一边改，体会完整的进阶之路 🎨

【免费下载链接】EUI-NEOEUI-NEO is a cross-platform, high-performance, low-overhead C++17 GPUI framework项目地址: https://gitcode.com/gh_mirrors/eui3/EUI-NEO