跳转至

样式与主题系统

SOUI的样式与主题系统提供了完整的UI外观定制能力，通过资源化的方式统一管理颜色、尺寸、字体、字符串等各种UI元素，支持主题切换和样式复用。

核心概念

样式与主题系统基于以下核心概念构建： - 资源化管理：所有UI元素都作为资源统一管理 - 主题切换：支持运行时动态切换不同主题 - 样式复用：定义一次，多处使用 - 层次化组织：支持基础样式和扩展样式的层级结构

文档导航

📁 样式资源定义

📁 主题系统

📁 资源组织

快速开始

1. 创建基础资源文件

在项目的values目录下创建基础资源文件：

project/
├── uires/
│   ├── values/
│   │   ├── colors.xml      # 颜色定义
│   │   ├── dimensions.xml  # 尺寸定义
│   │   ├── fonts.xml       # 字体样式
│   │   ├── strings.xml     # 字符串资源
│   │   └── styles.xml      # 样式定义
│   └── themes/
│       ├── light.xml       # 浅色主题
│       └── dark.xml        # 深色主题

2. 注册资源文件

在uires.idx中注册所有资源：

<resources>
    <values>
        <file name="colors" path="values\colors.xml"/>
        <file name="dimensions" path="values\dimensions.xml"/>
        <file name="fonts" path="values\fonts.xml"/>
        <file name="strings" path="values\strings.xml"/>
        <file name="styles" path="values\styles.xml"/>
    </values>

    <themes>
        <file name="light" path="themes\light.xml"/>
        <file name="dark" path="themes\dark.xml"/>
    </themes>
</resources>

3. 在应用中使用

<!-- 使用颜色资源 -->
<window background="@color/background_primary">
    <text text="@string/app_title" font="@font/title" color="@color/text_primary"/>
    <button text="@string/btn_ok" width="@dimen/button_width" height="@dimen/button_height"/>
</window>

设计原则

  1. 语义化命名：使用描述性的名称而非具体值
  2. 模块化组织：按功能模块分组相关资源
  3. 主题一致性：确保同一主题内风格统一
  4. 性能优化：避免过度复杂的样式层次

学习路径

初学者

  1. 先阅读颜色资源了解基础概念
  2. 学习字符串资源掌握文本管理
  3. 尝试字体样式定义文本外观

进阶开发者

  1. 深入研究模板系统提高复用性
  2. 掌握主题配置实现动态切换
  3. 学习皮肤对象创建复杂视觉效果

高级用户

  1. 研究样式表的高级特性
  2. 探索资源组织的最佳实践
  3. 优化大型项目的样式管理策略

相关资源

常见问题

Q: 如何选择合适的资源粒度？ A: 建议按功能模块组织，保持单个文件不超过200个定义。

Q: 主题切换会影响性能吗？ A: 合理使用缓存机制，主题切换对性能影响很小。

Q: 可以自定义资源类型吗？ A: SOUI支持通过扩展机制添加自定义资源类型。