基础概念¶

本节介绍 SOUI5 的基本概念和核心原理，帮助您建立对 SOUI5 的整体认识。

什么是 SOUI5¶

SOUI5（Simple/Small/So UI）是一个专为 Windows 桌面应用开发设计的轻量级 C++ DirectUI 界面库。它融合了金山卫士 Bkwin 库的优秀基因，通过持续的重构和优化，现已发展成为一个成熟的界面开发框架。

核心特点¶

轻量精简
核心库体积 < 2MB
零第三方依赖
发布包极小
高性能表现
优化的渲染管线
高效的内存管理
智能的刷新机制
灵活扩展
模块化架构设计
完整的插件体系
丰富的扩展接口
广泛兼容
支持从 VS2005 到最新版 Visual Studio
兼容 Windows XP及以上版本
全面支持Linux, macOS
支持多种编译配置

DirectUI 架构¶

DirectUI 架构概述¶

DirectUI 是一种现代的界面架构模式，它与传统的基于窗口句柄（HWND）的 UI 架构有着本质的区别：

传统 HWND 架构的特点¶

特性	描述	影响
控件实现	每个控件都是独立窗口	系统资源消耗大
消息处理	每个控件独立处理消息	开发维护复杂
视觉效果	受限于 Windows 原生绘制	界面表现力受限
性能表现	随控件数量显著下降	难以处理复杂界面

DirectUI 架构的优势¶

特性	实现方式	优势
控件实现	轻量级绘制对象	极低的资源占用
消息处理	统一的消息分发机制	简化开发维护
视觉效果	完全自定义的绘制系统	丰富的界面表现
性能表现	扁平化的对象管理	高效处理复杂界面

SOUI5 的 DirectUI 实现¶

graph TD
    A[主窗口 HWND] --> B[根控件 SWindow]
    B --> C[容器控件]
    B --> D[普通控件]
    C --> E[子控件1]
    C --> F[子控件2]
    D --> G[按钮]
    D --> H[文本]

SOUI5 核心架构¶

SOUI5 采用模块化的分层架构，各个组件职责明确，协同工作。

核心组件体系¶

1. SApplication - 应用程序核心¶

graph TD
    A[SApplication] --> B[生命周期管理]
    A --> C[全局资源配置]
    A --> D[模块协调]
    B --> E[初始化]
    B --> F[运行]
    B --> G[清理]

2. SWindow - 窗口控件基类¶

graph TD
    A[SWindow] --> B[绘制系统]
    A --> C[布局引擎]
    A --> D[消息处理]
    A --> E[控件树管理]

3. SHostWnd - 宿主窗口¶

graph TD
    A[SHostWnd] --> B[Win32窗口]
    A --> C[DirectUI容器]
    A --> D[消息转发]

4. 渲染引擎系统¶

引擎类型	特点	适用场景
GDI	轻量、兼容性好	普通界面
Skia	高性能、效果丰富	复杂动画
自定义	可扩展	特殊需求

5. 资源管理系统¶

资源类型
图片资源
字体资源
样式定义
布局模板
加载方式
文件系统
内存加载
PE 资源
ZIP 压缩包
特性支持
热重载
延迟加载
缓存管理
资源监控

架构图¶

graph TB
    subgraph "应用层"
        A[用户代码]
        B[事件处理]
        C[业务逻辑]
    end

    subgraph "SOUI 框架层"
        D[SApplication]
        E[SHostWnd]
        F[SWindow Tree]
        G[Event System]
        H[Layout Engine]
    end

    subgraph "资源层"
        I[Resource Manager]
        J[Skin Manager]
        K[Style Manager]
    end

    subgraph "渲染层"
        L[Render Factory]
        M[GDI Renderer]
        N[Skia Renderer]
    end

    subgraph "系统层"
        O[Windows API]
        P[File System]
        Q[Memory]
    end

    A --> D
    B --> G
    D --> E
    E --> F
    F --> H
    G --> F
    I --> J
    I --> K
    L --> M
    L --> N
    M --> O
    N --> O
    I --> P

SOUI5 基本概念¶

控件系统（Control System）¶

SOUI 采用统一的控件体系，所有界面元素都是控件的派生类：

控件分类¶

类型	描述	示例
基础控件	最基本的交互元素	按钮、文本框、标签
容器控件	用于组织和管理其他控件	窗口、面板、分组框
高级控件	复杂的交互组件	列表、树形控件、表格

示例代码¶

// 创建按钮控件
SButton *pBtn = new SButton();
pBtn->SetAttribute(L"text", L"确定");
container->AddChild(pBtn);

属性系统（Attribute System）¶

属性系统提供了声明式的界面定义方式：

XML 方式¶

<button name="btnOK"
        pos="10,10,100,40" 
        text="确定" 
        skin="btn_skin" 
        colorText="#333333">
  <tip>点击确定</tip>
</button>

常用属性¶

属性类型	描述	示例
布局属性	控制位置和大小	`pos="10,10,100,40"`
外观属性	定义视觉效果	`colorBkgnd="#FFFFFF"`
行为属性	设置交互特性	`enable="1"`

皮肤系统（Skin System）¶

皮肤系统实现了控件的视觉外观定制：

皮肤类型¶

graph TD
    A[皮肤系统] --> B[图片皮肤]
    A --> C[渐变皮肤]
    A --> D[边框皮肤]
    B --> E[普通图片]
    B --> F[九宫格图片]
    C --> G[线性渐变]
    C --> H[辐射渐变]

配置示例¶

<!-- 图片皮肤 -->
<imglist name="btn_normal" src="img:button.png" states="4"/>

<!-- 渐变皮肤 -->
<gradientSkin name="header_bg" 
              colorFrom="#E0E0E0" 
              colorTo="#F5F5F5"/>

样式系统（Style System）¶

样式系统提供了属性的集中管理和复用机制：

样式定义¶

<style>
    <!-- 基础按钮样式 -->
    <class name="btn_basic" 
           font="face:微软雅黑,size:14" 
           colorText="#333333"
           margin="5,5,5,5"/>

    <!-- 主要按钮样式 -->
    <class name="btn_primary" 
           extend="btn_basic"
           colorBkgnd="#2196F3"
           colorText="#FFFFFF"/>
</style>

样式使用¶

<button class="btn_primary" 
        text="确定"/>

样式继承¶

graph TD
    A[基础样式] --> B[主题样式]
    B --> C[组件样式]
    C --> D[实例样式]

布局系统（Layout System）¶

SOUI5 提供了灵活的布局系统，支持多种布局方式：

布局类型¶

布局方式	描述	适用场景
锚点布局	使用坐标定位，坐标可以相对父控件及兄弟控件进行定位	适用父窗口位置确定，子窗口相对复杂的场景
相对布局	相对父控件定位	自适应界面
表格布局	网格式排列	规则的界面结构

布局属性示例¶

<!-- 绝对定位 -->
<window pos="0,0,400,300">
    <!-- 相对定位（左上角对齐） -->
    <button pos="10,10,-10,-10" offset="-1,-1"/>

    <!-- 居中定位 -->
    <text pos="|0,|0" offset="-0.5,-0.5"/>
</window>

布局计算流程¶

graph TD
    A[布局开始] --> B[解析布局属性]
    B --> C[计算相对位置]
    C --> D[应用偏移量]
    D --> E[处理边界约束]
    E --> F[更新布局缓存]

事件系统（Event System）¶

SOUI5 实现了完整的事件处理机制：

事件分类¶

graph TD
    A[事件系统] --> B[系统事件]
    A --> C[控件事件]
    A --> D[自定义事件]
    B --> E[鼠标事件]
    B --> F[键盘事件]
    B --> G[绘制事件]
    C --> H[值变化]
    C --> I[状态改变]
    C --> J[焦点变化]

事件处理示例¶

// 在头文件中声明事件映射
EVENT_MAP_BEGIN()
    EVENT_NAME_COMMAND(L"btnOK", OnOKClick)
    EVENT_NAME_HANDLER(L"editName", EventRENotify::EventID, OnNameChanged)
EVENT_MAP_END()

// 事件处理函数
void OnOKClick() {
    // 处理确定按钮点击
}

void OnNameChanged(IEvtArgs *e) {
    EventRENotify *ev = sobj_cast<EventRENotify>(e);
    // 处理名称变化
}

事件订阅方式¶

// 使用订阅方式处理事件
pBtn->GetEventSet()->subscribeEvent(EVT_CMD, 
    [](EventArgs *e) -> bool {
        // 事件处理逻辑
        return true;
    });

开发模式¶

界面与逻辑分离¶

SOUI 推崇界面与逻辑分离的开发模式：

界面定义（XML）

<button name="btn_ok" 
        pos="10,10,100,40" 
        text="确定"/>

逻辑处理（C++）

EVENT_MAP_BEGIN()
    EVENT_NAME_COMMAND(L"btn_ok", OnOK)
EVENT_MAP_END()

void OnOK() {
    // 处理按钮点击事件
}

资源驱动¶

界面外观通过外部资源文件驱动： - XML 布局文件：定义界面结构 - 图片资源：提供视觉元素 - 样式配置：统一界面风格

组件化开发¶

复杂界面可以分解为多个组件： - 窗口组件：独立的功能模块 - 控件组件：可复用的界面元素 - 皮肤组件：可切换的外观主题

生命周期¶

应用程序生命周期¶

graph TD
    A[程序启动] --> B[创建 SApplication]
    B --> C[初始化资源]
    C --> D[创建主窗口]
    D --> E[进入消息循环]
    E --> F[处理用户交互]
    F --> G[程序退出]
    G --> H[清理资源]
    H --> I[销毁 SApplication]

控件生命周期¶

graph TD
    A[创建控件] --> B[初始化属性]
    B --> C[加载资源]
    C --> D[计算布局]
    D --> E[绘制控件]
    E --> F[处理事件]
    F --> G[更新状态]
    G --> H[重新绘制]
    H --> F
    F --> I[销毁控件]

内存管理¶

SOUI 使用引用计数进行内存管理：

智能指针¶

SAutoRefPtr<IWindow> pWnd;  // 自动管理引用计数
SAutoRefPtr<ISkin> pSkin;   // 自动管理引用计数

对象生命周期¶

控件对象：由父控件管理
资源对象：由资源管理器管理
临时对象：使用智能指针自动管理

扩展机制¶

自定义控件¶

class MyControl : public SWindow
{
    DEF_SOBJECT(SWindow, L"mycontrol")

public:
    MyControl();

protected:
    void OnPaint(IRenderTarget* pRT);

    SOUI_MSG_MAP_BEGIN()
        MSG_WM_PAINT_EX(OnPaint)
    SOUI_MSG_MAP_END()
};

自定义皮肤¶

class MySkin : public SSkinBase
{
public:
    void Draw(IRenderTarget* pRT, LPCRECT rcDraw, DWORD dwState) override;
};

下一步¶

掌握了基础概念后，建议继续学习：

项目结构 - 了解项目组织方式
资源管理 - 学习资源系统
布局系统 - 掌握布局原理

这些基础概念将贯穿整个 SOUI 开发过程，建议认真理解和掌握。