自动化助手

    滑动条

    • 更新时间:2026-03-15 10:38:37

    滑动条-slider

    原生类型:{com.google.android.material.slider.Slider}

    滚动条：常用于动态设置数字参数，通过滑动就可以变换数值。

    一、常用属性

    from - 开始值

    设置开始值

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100 -->
        <slider  />
        <!-- 滑动条 设置开始值 from="20" -->
        <slider from="20" />
    </linear>
</ui>

    to - 结束值

    设置结束值

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100 -->
        <slider  />
        <!-- 滑动条
        设置开始值 from="20"
        设置结束值 to="30"
        -->
        <slider from="20" to="30" />
    </linear>
</ui>

    value - 初始值

    设置初始值

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100
        设置当前值为 50
        -->
        <slider value="50" />
    </linear>
</ui>

    step - 进步值

    设置进步值

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100
        设置进步值为 1
        -->
        <slider step="1" />
    </linear>
</ui>

    color - 主题颜色

    设置主题颜色

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 设置主题颜色 color="#518855" -->
        <slider />
        <slider color="#518855" />
        <slider color="#B44A4A" />
    </linear>
</ui>

    label - 标签文字

    设置标签文字

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100
        设置标签 label="进度:"
        -->
        <slider label="进度:" />
    </linear>
</ui>

    labelEnd - 标签文字尾部

    设置标签文字尾部

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100
        设置尾部标签 labelEnd="个"
        注意：label和labelEnd只能有一个生效，避免重复设置
        -->
        <slider labelEnd="个" />
    </linear>
</ui>

    padding - 内边距

    设置内边距

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100 -->
        <!--padding顺序是:左,上,右,下-->
        <!--padding只设置一个值：则设置所有方向的内边距-->
        <!--padding只设置两个值：则设置左右和上下方向的内边距-->
        <slider padding="5" />
        <slider padding="10" />
        <slider padding="15" />
    </linear>
</ui>

    bg - 背景颜色

    设置背景颜色

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100
        设置背景颜色 bg="#518855"
        -->
        <slider bg="#518855" />
        <slider bg="#B44A4A" />
    </linear>
</ui>

    bgImg - 背景图片

    设置背景图片

    <ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center">
        <!-- 滑动条 默认开始值是0 结束值是100
        设置背景图片 bgImg="/res/bg_slider.png"
        -->
        <slider bgImg="/res/bg_slider.png" />
    </linear>
</ui>

    二、常用函数

    setBg(color)

    设置背景颜色

    • 参数 : color {int} 颜色值
    • 版本 : 1.8.2
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置背景颜色
slider.setBg($color.RED);

    setBg(color)

    设置背景颜色

    • 参数 : color {string} 颜色字符串
    • 版本 : 1.8.2
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置背景颜色
slider.setBg("#1E1F22");

    setColor(color)

    设置主题颜色

    • 参数 : color {int} 颜色值
    • 版本 : 1.8.2
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置主题颜色
slider.setColor($color.RED);

    setColor(color)

    设置主题颜色

    • 参数 : color {string} 颜色字符串
    • 版本 : 1.8.2
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置主题颜色
slider.setColor("#1E1F22");

    onLabel(callback)

    设置标签格式化

    • 参数 : callback {(floatValue)=>{ return "标签"; }} 格式化回调

    onChange(callback)

    设置数值变化监听

    注意:只监听由用户手动触发的数值变化,若为编程时设置的数值,则忽略

    • 参数 : callback {(value)=>{}}
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置选中的下标
slider.onChange((value)=>{
    //..
});

    getValue()

    获取当前进度值

    • 返回 : {float} 当前数值
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//获取当前进度值
let val = slider.getValue();

    setValue(value)

    设置数据

    • 参数 : value {float} 当前值
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置当前值
slider.setValue(10);

    setFrom(from)

    设置数据

    • 参数 : from {float} 开始值
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置开始大小
slider.setFrom(0);

    setStep(step)

    设置数据

    • 参数 : step {float} 进步值
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置进步值
slider.setStep(1);

    setTo(to)

    设置数据

    • 参数 : to {float} 结束值
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置结束大小
slider.setTo(100);

    setData(from, to)

    设置数据

    • 参数 : from {float} 开始值(当前值一致)
    • 参数 : to {float} 结束值
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置数据(开始,结束)
slider.setData(0,100);

    setData(from, to, value)

    设置数据

    • 参数 : from {float} 开始值
    • 参数 : to {float} 结束值
    • 参数 : value {float} 当前值
    //解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let slider = ui.id("mSlider");
//设置数据(开始,结束,当前值)
slider.setData(0,100,20);