滑块可以用来显示进度、调节音量、调整图片、定义价格范围等。使用Slider组件就不用重头开始搭建了。
Slider组件由3个图层构成:滑块本身、填充物、旋钮。滑块本身是指轨迹部分(一般是颜色较浅),旋钮是用来改变滑块的值 value
,填充 fill
表示当前选中的值。这些图层的外观可以和其他图层一样自定义。
Slider组件特有的属性:
- min (最小值)
- max (最大值)
- value (起始值)
- knobSize (旋钮的宽高)
# 创建滑块
slider = new SliderComponent
min: 0
max: 100
value: 50
knobSize: 40
# 给填充定义颜色
slider.fill.backgroundColor = "#fff"
滑块本身就是一个图层,也就说所有的可视属性都可以被更改。
# 定义滑块颜色
slider.backgroundColor = "#DDD"
# 定义填充颜色
slider.fill.backgroundColor = "#00AAFF"
# 定义旋钮投影
slider.knob.shadowY = 2
值的变化 Value Changes
onValueChange
标签可以检测值的更改,并在更改时检索当前值。
# 添加滑块
slider = new SliderComponent
min: 0
max: 100
value: 50
# 获取当前值
slider.onValueChange ->
print slider.value