开关

  • 更新时间:2025-12-02 10:12:47

开关-switch

原生类型:{com.google.android.material.materialswitch.MaterialSwitch}

开关:顾名思义,就是开关的意思,只有打开或者关闭两种状态。

一、常用属性

color - 主题颜色

设置主题颜色

<ui>
    <statusbar />
    <linear w="max" h="max" dir="h" gravity="center" padding="20">
        <switch color="#57965C" text="主题色为绿色" />
    </linear>
</ui>

text - 文本

设置文本

<ui>
    <statusbar />
    <linear w="max" h="max" dir="h" gravity="center" padding="20">
        <switch text="我是文本" />
    </linear>
</ui>

textColor - 文本颜色

设置文本颜色

<ui>
    <statusbar />
    <linear w="max" h="max" dir="h" gravity="center" padding="20">
        <switch text="文本颜色"  textColor="#B44A4A" />
    </linear>
</ui>

check - 是否选中

设置是否选中

<ui>
    <statusbar />
    <linear w="max" h="max" dir="h" gravity="center" padding="20">
        <switch text="默认选中"  check="true" />
    </linear>
</ui>

minW - 最小宽度

设置最小宽度

<ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center" padding="20">
        <switch text="开关" />
        <switch text="开关" minW="200" />
    </linear>
</ui>

minH - 最小高度

设置最小高度

<ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center" padding="20">
        <switch text="开关" />
        <switch text="开关" minH="40" />
        <switch text="开关" minH="70" />
    </linear>
</ui>

padding - 内边距

设置内边距

<ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center" padding="20">
        <!--padding 顺序是:左,上,右,下-->
        <!--padding 只设置一个值:则设置所有方向的内边距-->
        <!--padding 只设置两个值:则设置左右和上下方向的内边距-->
        <switch padding="8" text="内边距" />
        <switch padding="12" text="内边距" />
        <switch padding="16" text="内边距" />
    </linear>
</ui>

gravity - 重力

设置重力

<ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center" padding="20">
        <switch text="开关" w="max" />
        <switch text="开关" gravity="center" w="max" />
        <switch text="开关" gravity="end" w="max" />
    </linear>
</ui>

bg - 背景颜色

设置背景颜色

<ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center" padding="20">
        <switch text="开关" bg="#518855" />
        <switch text="开关" bg="#B44A4A" />
    </linear>
</ui>

bgImg - 背景图片

设置背景图片

<ui>
    <statusbar />
    <linear w="max" h="max" dir="v" gravity="center" padding="20">
        <switch text="开关" bgImg="/res/bg-switch.png" padding="15" />
    </linear>
</ui>

二、常用函数

check(checked)

设置选中状态

  • 参数 : checked {boolean} 是否选中

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//设置选中状态
switzh.check(true);

isChecked()

判断选中状态

  • 返回 : {boolean} 是否选中了

  • 版本 : 1.8.2

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//判断选中状态
if(switzh.isChecked()){
    log("选中了");
}

onCheck(callback)

设置状态改变监听

  • 参数 : callback ((checked)=>{}) 回调

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//设置状态改变监听
switzh.onCheck((checked)=>{
    //..
});

setGravity(gravity)

设置控件的对齐方式

  • 参数 : gravity {String} 例如:"center|bottom"

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//设置控件的对齐方式
switzh.setGravity("center|bottom");

setText(text)

设置文字

  • 参数 : text {String} 文字

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//设置文字
switzh.setText("是否开启");

getText()

获取文字

  • 返回 : {String} 文字

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//获得文字
let text = switzh.getText();

setColor(color)

设置主题颜色

  • 参数 : color {String} 颜色

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//设置主题颜色
switzh.setColor("#26282E");

setTextColor(color)

设置文字颜色

  • 参数 : color {String} 颜色

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let switzh = ui.id("mSwitch");
//设置文字颜色
switzh.setTextColor("#26282E");