跳转至

SSkinButton 按钮皮肤

概述

SSkinButton 是 SOUI 中专门为按钮控件设计的皮肤类型，它继承自 SSkinObjBase，提供了丰富的按钮状态和外观定制选项。这种皮肤类型特别适合需要快速创建具有良好视觉效果的按钮界面。

类定义

class SOUI_EXP SSkinButton : public SSkinObjBase
{
protected:
    COLORREF m_crBorder;          // 边框颜色
    COLORREF m_crUp[4];           // 正常状态渐变起始色
    COLORREF m_crDown[4];         // 正常状态渐变终止色
    int      m_nCornerRadius;     // 圆角半径
};

属性列表

属性名 类型 默认值 说明
name string - 皮肤名
scale float - 比例
alpha int - alpha
enableColorize bool - enableColorize（是:1
colorBorder color - colorBorder
colorBorderHover color - colorBorderHover
colorBorderPush color - colorBorderPush
colorBorderDisable color - colorBorderDisable
colorUp color - 正常状态渐变起始颜色
colorDown color - 正常状态渐变终止颜色
colorUpHover color - 浮动状态渐变起始颜色
colorDownHover color - 浮动状态渐变终止颜色
colorUpPush color - 下压状态渐变起始颜色
colorDownPush color - 下压状态渐变终止颜色
colorUpDisable color - 禁用状态渐变起始颜色
colorDownDisable color - 禁用状态渐变终止颜色
cornerRadius int - 圆角大小
cornerPercent float 0.6 圆角 百分比

XML示例

<!-- 基本按钮 -->
<button name="basic_btn" 
        colorUp="#ffffff"
        colorDown="#eeeeee"
        colorBorder="#000000"/>

<!-- 圆角按钮 -->
<button name="round_btn"
        cornerRadius="5"
        cornerPercent="0.6"
        colorUp="#2196F3"
        colorDown="#1976D2"
        colorUpHover="#42A5F5"
        colorDownHover="#1E88E5"/>

<!-- 多状态按钮 -->
<button name="multi_state_btn"
        colorUp="#ffffff"
        colorDown="#eeeeee"
        colorUpHover="#f0f0f0"
        colorDownHover="#e0e0e0"
        colorUpPush="#d0d0d0"
        colorDownPush="#c0c0c0"
        colorUpDisable="#cccccc"
        colorDownDisable="#aaaaaa"
        colorBorder="#000000"
        colorBorderHover="#ff0000"
        colorBorderPush="#00ff00"
        colorBorderDisable="#888888"/>

使用场景

1. 标准按钮

  • 确认、取消等操作按钮
  • 工具栏按钮
  • 导航按钮

2. 状态按钮

  • 开关按钮
  • 选中状态按钮
  • 禁用状态按钮

3. 特殊样式按钮

  • 圆角按钮
  • 渐变按钮
  • 带边框按钮

最佳实践

  1. 颜色搭配：合理设置各种状态的颜色，确保用户能够清晰识别按钮状态
  2. 圆角设计：通过 cornerRadius 和 cornerPercent 属性创建美观的圆角效果
  3. 边框使用：使用不同状态的边框颜色增强视觉反馈
  4. 渐变效果：通过 colorUp 和 colorDown 系列属性创建立体感的渐变效果

常见问题

Q: 按钮状态颜色不明显怎么办？

A: 调整不同状态的颜色值，确保正常、悬停、按下、禁用状态之间有明显区别。

Q: 圆角效果不理想怎么办？

A: 合理设置 cornerRadius 和 cornerPercent 值，根据按钮尺寸调整圆角大小。

Q: 边框显示异常怎么办？

A: 检查 colorBorder 系列属性是否正确设置，确保各状态边框颜色符合设计要求。

相关皮肤