Skip to Content

创作

组件组合是 DearOreUI 的核心创作方式:用 ComponentSpec 树描述界面,运行时负责渲染。这一页教你如何组合组件构建完整界面。

组件树

ComponentSpec 支持嵌套,通过 children 构建组件树:

#include "component/ComponentSpec.h" using namespace dearoreui::component; // 面板 → 标题 + 按钮组 ComponentSpec panel; panel.kind = ComponentKind::Panel; panel.label = "设置"; ComponentSpec title; title.kind = ComponentKind::Text; title.variant = "heading"; title.label = "显示设置"; ComponentSpec button; button.kind = ComponentKind::Button; button.variant = "primary"; button.label = "应用"; panel.children.push_back(title); panel.children.push_back(button);

组合模式

模式说明示例
容器 + 内容面板/卡片承载子组件Panel → Text + Button
列表多个 ListItem 组成菜单ListItem × N
导航TabBar 切换内容TabBar → Panel
表单Input + Button 组合Input + Button

原始 DOM

需要完全控制时,可以用 body 字段注入原始 DOM:

ComponentSpec panel; panel.kind = ComponentKind::Panel; panel.body = { /* render::DomNode 树 */ };

相关