按钮控件 (SButton)¶

Warning

The current page still doesn't have a translation for this language.

You can read it through google translate.

按钮是 SOUI 中最常用的交互控件之一，用于触发操作或响应用户点击。

基本信息¶

类名：SButton
控件标签：button
基类：SWindow
皮肤类：SSkinButton

属性说明¶

基本属性¶

属性名	类型	默认值	说明
text	字符串	-	按钮文本
accel	字符串	-	快捷键
animate	整数	0	浮动状态是否显示动画（0-无动画，1-有动画）
animateStep	整数	-	动画切换帧数，帧数越大动画越平滑但耗时越长
disableAccelIfInvisible	布尔值	false	隐藏时不接收快捷键（true-启用，false-禁用）

外观属性¶

属性名	类型	默认值	说明
colorBorder	color	-	边框颜色
colorText	color	-	文本颜色
colorTextHover	color	-	Hover状态文本颜色
colorTextPush	color	-	Push状态文本颜色
colorTextDisable	color	-	Disable状态文本颜色
skin	string	-	按钮皮肤
font	string	-	文本字体
fontHover	string	-	Hover状态文本字体
fontPush	string	-	Push状态文本字体
fontDisable	string	-	Disable状态文本字体

使用示例¶

基本按钮¶

<button name="btnOK" 
        pos="10,10,110,40" 
        text="确定"/>

带图标的按钮¶

<button name="btnSave" 
        pos="10,50,110,80" 
        text="保存"
        icon="skin:icons.save"/>

自定义样式按钮¶

<button name="btnCustom" 
        pos="10,90,110,120" 
        text="自定义按钮"
        colorBorder="#cccccc"
        colorUp="#ffffff"
        colorDown="#f0f0f0"
        colorUpHover="#e0e0e0"
        colorDownHover="#d0d0d0"/>

带动画效果的按钮¶

<button name="btnAnimated" 
        pos="10,50,110,80" 
        text="动画按钮"
        animate="1"
        animateStep="5"/>

事件处理¶

按钮控件支持以下事件：

事件名	EventID	说明
EVT_CMD	EventCmd::EventID	按钮点击事件

// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_COMMAND(L"btnOK", OnBtnOK)
EVENT_MAP_END()

void OnBtnOK()
{
    // 处理按钮点击
}

状态切换¶

按钮有以下几种状态： 1. 正常状态：默认显示状态 2. 悬停状态：鼠标移动到按钮上 3. 按下状态：鼠标点击按钮时 4. 禁用状态：按钮不可用时

状态切换示例¶

// 禁用按钮
SButton *pBtn = FindChildByName2<SButton>(L"btnOK");
if(pBtn) {
    pBtn->EnableWindow(FALSE);
}

// 恢复按钮
pBtn->EnableWindow(TRUE);

自定义按钮¶

自定义皮肤¶

<style>
    <!-- 自定义按钮样式 -->
    <class name="customBtn"
           font="face:微软雅黑,size:14"
           colorText="#333333"
           colorTextHover="#000000"
           colorBorder="#cccccc"
           colorUp="#ffffff"
           colorDown="#f0f0f0"/>
</style>

<button class="customBtn"
        pos="10,10,110,40"
        text="自定义样式"/>

自定义绘制¶

class CMyButton : public SButton
{
    SOUI_CLASS_NAME(CMyButton, L"mybutton")
public:
    void OnPaint(IRenderTarget *pRT)
    {
        // 自定义绘制代码
    }
};

最佳实践¶

合理使用快捷键：为常用操作的按钮设置快捷键，提升用户体验
状态反馈：通过不同颜色或字体区分按钮的不同状态
动画效果：适当使用动画效果增强交互体验，但避免过度使用
文本对齐：根据按钮用途选择合适的文本对齐方式

常见问题¶

Q: 按钮无法接收快捷键怎么办？¶

A: 检查是否设置了 disableAccelIfInvisible 属性为 true，且按钮当前处于隐藏状态。

Q: 按钮动画效果不明显怎么办？¶

A: 增大 animateStep 属性值，使动画过渡更平滑。