跳转至

SSkinGradation 渐变皮肤

概述

SSkinGradation 是 SOUI 中用于创建渐变效果的皮肤类型。它支持线性渐变，可以在两个颜色之间创建平滑的过渡效果，广泛用于创建现代化的界面效果。

类定义

class SOUI_EXP SSkinGradation : public SSkinObjBase
{
protected:
    COLORREF    m_crFrom;    // 起始颜色
    COLORREF    m_crTo;      // 结束颜色
    BOOL        m_bVertical; // 垂直渐变标志
};

属性列表

属性名 类型 默认值 说明
name string - 皮肤名
scale float - 比例
alpha int - alpha
enableColorize bool - enableColorize（是:1
colorFrom color - 渐变起始颜色(colorFrom)
colorTo color - 渐变终止颜色(colorTo)
vertical bool - 渐变方向（水平:0

XML示例

<!-- 垂直渐变 -->
<gradation name="header_bg" 
          colorFrom="#e0e0e0" 
          colorTo="#ffffff" 
          vertical="1"/>

<!-- 水平渐变 -->
<gradation name="progress_bg" 
          colorFrom="#2196F3" 
          colorTo="#64B5F6" 
          vertical="0"/>

<!-- 带透明度的渐变 -->
<gradation name="transparent_gradation" 
          colorFrom="#ff0000" 
          colorTo="#0000ff" 
          vertical="1"
          alpha="128"/>

<!-- 可颜色化的渐变 -->
<gradation name="colorizable_gradation" 
          colorFrom="#ffffff" 
          colorTo="#000000" 
          vertical="0"
          enableColorize="1"/>

使用场景

1. 标题栏背景

  • 渐变标题栏
  • 工具栏背景
  • 状态栏背景

2. 进度指示

  • 进度条背景
  • 加载指示器
  • 进度环背景

3. 装饰元素

  • 分隔线
  • 背景装饰
  • 卡片背景

4. 特殊效果

  • 悬浮效果
  • 选中高亮
  • 焦点指示

最佳实践

  1. 方向选择：根据界面布局选择合适的渐变方向，垂直渐变适合高度较大的区域，水平渐变适合宽度较大的区域
  2. 颜色搭配：选择和谐的颜色组合，避免颜色对比过于强烈导致视觉不适
  3. 透明度控制：通过 alpha 属性控制渐变透明度，实现更丰富的视觉效果
  4. 性能优化：合理使用 enableColorize 属性，在需要动态改变颜色时启用颜色化功能

常见问题

Q: 渐变方向不符合预期怎么办？

A: 检查 vertical 属性设置，0为水平渐变，1为垂直渐变。

Q: 渐变颜色过渡不自然怎么办？

A: 调整 colorFrom 和 colorTo 的颜色值，选择更协调的颜色组合。

Q: 如何实现动态颜色变化？

A: 设置 enableColorize 为 1，然后通过代码动态设置颜色参数。

相关皮肤

相关链接