跳转至

滑块控件 (SSliderBar)

滑块是一种可以通过拖动来调节数值的控件，常用于音量控制、亮度调节等场景。支持水平和垂直两种方向。

基本信息

  • 类名：SSliderBar
  • 控件标签：sliderbar
  • 基类：SProgress
  • 功能：提供可拖动的数值调节

属性说明

基本属性

属性名 类型 默认值 说明
value int 0 当前值
min int 0 最小值
max int 100 最大值
vertical bool 0 是否垂直显示（0-水平，1-垂直）
thumbInRail bool 0 是否限制滑块在轨道内（0-不限制，1-限制）

外观属性

属性名 类型 默认值 说明
thumbSkin string - 滑块皮肤
bkgndSkin string - 背景皮肤
posSkin string - 数值显示皮肤

使用示例

基本滑块

<sliderbar name="sliderBasic" 
           pos="10,10,210,30" 
           value="50"
           min="0"
           max="100"/>

垂直滑块

<sliderbar name="sliderVertical" 
           pos="10,50,30,200" 
           vertical="1" 
           value="75"/>

限制滑块范围的滑块

<sliderbar name="sliderRail" 
           pos="10,210,210,230" 
           value="30"
           thumbInRail="1"/>

自定义皮肤的滑块

<sliderbar name="sliderStyled" 
           pos="10,240,210,260" 
           value="60"
           thumbSkin="skin_slider_thumb"
           bkgndSkin="skin_slider_bkgnd"
           posSkin="skin_slider_pos"/>

事件处理

滑块控件支持以下事件：

事件名 EventID 说明
EVT_SLIDER_POS EventSliderPos::EventID 滑块位置变化事件 
// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_HANDLER(L"sliderBasic", EventSliderPos::EventID, OnSliderPosChanged)
EVENT_MAP_END()

void OnSliderPosChanged(IEvtArgs *pEvt)
{
    EventSliderPos *pRealEvt = sobj_cast<EventSliderPos>(pEvt);
    int nPos = pRealEvt->nPos;
    // 处理滑块位置变化
}

数值控制

代码操作

// 查找滑块控件
SSliderBar *pSlider = FindChildByName2<SSliderBar>(L"sliderBasic");

// 设置当前值
pSlider->SetValue(75);

// 获取当前值
int nValue = pSlider->GetValue();

// 设置范围
pSlider->SetRange(0, 200);

// 获取范围
int nMin, nMax;
pSlider->GetRange(&nMin, &nMax);

样式定制

基本样式

<style>
    <class name="sliderStyle"
           bkgndSkin="slider_bg"
           channelSkin="slider_channel"
           thumbSkin="slider_thumb"
           showTip="1"/>
</style>

<sliderbar class="sliderStyle"
           value="50"/>

自定义提示

<sliderbar tipFormat="Level: %d"
           showTip="1"/>

最佳实践

  1. 合理设置范围：根据实际需要设置合适的 min 和 max 值
  2. 视觉反馈：通过不同皮肤区分滑块的不同状态
  3. 交互体验：使用 thumbInRail 属性控制滑块移动范围
  4. 方向选择：根据界面布局选择合适的 vertical 方向

常见问题

拖动不流畅

  • 检查步进值设置
  • 确认事件处理逻辑
  • 验证性能瓶颈

滑块皮肤显示异常怎么办？

A: 检查 thumbSkin、bkgndSkin 和 posSkin 是否正确设置。

相关控件