组件:开关
开关(Switch)组件用于在两个互斥状态(开启/关闭)之间快速切换,以滑块形式呈现,并可在右侧显示文本标签。它支持自定义选中状态、禁用状态、尺寸(默认/小尺寸)、激活与非激活颜色,并提供状态改变回调。常用于设置项开关、功能启用/禁用、偏好设置等场景。
典型使用场景:
- 功能开关(推送通知、自动更新、夜间模式)
- 设置项开关(隐私设置、数据同步、语言切换)
- 偏好设置(主题颜色、字体大小、音效开关)
- 权限控制(权限启用/禁用、功能访问控制)
- 状态切换(开关状态、显示/隐藏、启用/禁用)
📌 继承自视图的成员速查
本组件继承自 视图 类,可直接使用以下属性和方法:
属性: ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用
方法: 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)
事件: 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)
💡 完整成员列表及详细说明请参考:
视图类
常用操作速查
| 操作 | 属性/方法 | 示例 |
|---|---|---|
| 设置开关状态(开/关) | 选中 | 开关1.选中 = 真 |
| 设置右侧文本标签 | 文本 | 开关1.文本 = "启用通知" |
| 设置开关尺寸(默认/小) | 尺寸 | 开关1.尺寸 = "small" |
| 设置开启时的轨道颜色 | 激活颜色 | 开关1.激活颜色 = "#52c41a" |
| 设置关闭时的轨道颜色 | 非激活颜色 | 开关1.非激活颜色 = "#d9d9d9" |
| 禁用/启用开关 | 禁用 | 开关1.禁用 = 真 |
| 切换选中状态 | 置选中(是否选中) | 开关1.置选中(假) |
| 设置状态改变回调 | 置状态被改变回调(回调函数) | 开关1.置状态被改变回调((源对象, 是否选中) => { ... }) |
样式美化参考
开关的外观可通过继承的视图属性以及特定属性进行自定义:
| 样式变体 | 属性组合 |
|---|---|
| 默认尺寸(default) | 尺寸 = "default",宽度和高度由组件自动确定(约 60×30) |
| 小尺寸(small) | 尺寸 = "small",宽度和高度自动缩小(约 40×24) |
| 自定义颜色(开启) | 激活颜色 = "#52c41a"(绿色),非激活颜色 = "#d9d9d9"(灰色) |
| 无文本标签 | 文本 = ""(空字符串隐藏标签) |
| 自定义文本样式 | 通过继承的 字体大小、文本颜色、字体粗细 控制右侧文本样式 |
| 禁用状态 | 禁用 = 真,组件变灰且不可交互 |
| 整体容器样式 | 通过 背景颜色、边框、边框圆角、内边距 等美化外层容器 |
开关的滑块和轨道颜色由
激活颜色和非激活颜色控制,滑块颜色通常固定为白色,可通过 CSS 类自定义。
基础示例
创建一个简单的开关,默认开启,右侧显示“启用通知”,状态改变时弹出提示。
变量 开关1 = 创建 开关()
开关1.左边 = 50
开关1.顶边 = 50
开关1.文本 = "启用通知"
开关1.选中 = 真
开关1.激活颜色 = "#52c41a"
开关1.非激活颜色 = "#d9d9d9"
开关1.字体大小 = "14px"
开关1.置状态被改变回调((源对象, 是否选中) => {
如果(是否选中)
弹出提示("通知已开启")
否则
弹出提示("通知已关闭")
结束 如果
})
添加组件(开关1)
综合示例:系统设置面板
本示例构建一个系统设置面板,包含多个开关项(夜间模式、自动更新、推送通知、Wi-Fi 自动连接),并实时显示当前状态。
' ========== 创建设置面板 ==========
变量 设置面板 = 创建 卡片框()
设置面板.左边 = 30
设置面板.顶边 = 30
设置面板.宽度 = 360
设置面板.标题 = "⚙️ 系统设置"
设置面板.边框 = "1px solid #e8e8e8"
设置面板.边框圆角 = "12px"
设置面板.内边距 = "16px"
添加组件(设置面板)
' 存储所有开关的引用,用于状态汇总
变量 开关列表 = []
' ========== 辅助函数:创建带开关的设置项 ==========
函数 创建设置项(标题文本, 初始状态, 颜色)
变量 容器 = 创建 弹性布局()
容器.方向 = "row"
容器.侧轴对齐 = "center"
容器.宽度 = 匹配父
容器.内边距 = "8px 0"
容器.边框底边 = "1px solid #f0f0f0"
变量 标签 = 创建 标签()
标签.文本 = 标题文本
标签.字体大小 = "15px"
标签.文本颜色 = "#333"
标签.宽度 = 200
容器.添加组件(标签)
变量 开关 = 创建 开关()
开关.选中 = 初始状态
开关.激活颜色 = 颜色
开关.非激活颜色 = "#d9d9d9"
开关.尺寸 = "small" ' 小尺寸节省空间
容器.添加组件(开关)
设置面板.添加组件(容器)
' 存储引用
添加成员(开关列表, 开关)
' 绑定事件(更新状态提示)
开关.置状态被改变回调((源对象, 是否选中) => {
变量 状态文本 = 是否选中 ? "✅ 开启" : "❌ 关闭"
弹出提示(标题文本 + ":" + 状态文本)
})
返回 开关
结束 函数
' 创建各个设置项
创建设置项("夜间模式", 假, "#1890ff")
创建设置项("自动更新", 真, "#52c41a")
创建设置项("推送通知", 真, "#faad14")
创建设置项("Wi-Fi 自动连接", 假, "#ff4d4f")
' 全选/取消全选按钮组
变量 按钮组 = 创建 弹性布局()
按钮组.方向 = "row"
按钮组.间距 = 12
按钮组.内边距 = "12px 0 0"
设置面板.添加组件(按钮组)
变量 全开按钮 = 创建 按钮()
全开按钮.文本 = "全部开启"
全开按钮.宽度 = 100
全开按钮.高度 = 32
全开按钮.背景颜色 = "#52c41a"
全开按钮.文本颜色 = "#ffffff"
全开按钮.边框圆角 = "4px"
按钮组.添加组件(全开按钮)
变量 全关按钮 = 创建 按钮()
全关按钮.文本 = "全部关闭"
全关按钮.宽度 = 100
全关按钮.高度 = 32
全关按钮.背景颜色 = "#d9d9d9"
全关按钮.文本颜色 = "#333"
全关按钮.边框圆角 = "4px"
按钮组.添加组件(全关按钮)
' ========== 全开/全关逻辑 ==========
全开按钮.置被单击回调((源对象) => {
变量循环(i = 0, 取数组成员数(开关列表), 1)
开关列表[i].选中 = 真
结束循环
弹出提示("所有开关已开启")
})
全关按钮.置被单击回调((源对象) => {
变量循环(i = 0, 取数组成员数(开关列表), 1)
开关列表[i].选中 = 假
结束循环
弹出提示("所有开关已关闭")
})
属性详解
选中
- 类型:
逻辑型 - 说明: 设置或获取开关的当前状态。
真表示开启,假表示关闭。设置后开关滑块会自动移动到对应位置,并触发状态被改变回调(如果值发生变化)。
禁用
- 类型:
逻辑型 - 说明: 设置或获取是否禁用开关。禁用后,用户无法点击切换,开关变灰且不可交互。默认为
假。
尺寸
- 类型:
文本型 - 说明: 设置或获取开关的尺寸大小。可选值:
"default":默认尺寸(约 60×30)"small":小尺寸(约 40×24) 默认为"default"。
激活颜色
- 类型:
文本型 - 说明: 设置或获取开关处于开启状态时轨道的颜色,支持 CSS 颜色值。默认为主题色(通常为蓝色或绿色)。
非激活颜色
- 类型:
文本型 - 说明: 设置或获取开关处于关闭状态时轨道的颜色,支持 CSS 颜色值。默认为灰色(
#d9d9d9)。
文本
- 类型:
文本型 - 说明: 设置或获取显示在开关右侧的文本标签。若设置为空字符串,则标签隐藏。
函数详解
置选中(是否选中)
- 功能: 以编程方式设置开关的选中状态,效果等同于直接修改
选中属性。 - 参数:
是否选中(逻辑型)。 - 返回值: 无。
- 示例:
开关1.置选中(假)关闭开关
置状态被改变回调(回调函数)
- 功能: 设置当开关状态发生变化时的回调函数。触发时机包括用户点击切换和通过代码修改
选中或调用置选中。 - 参数:
回调函数,格式为(源对象, 是否选中) => { ... }。源对象:触发事件的开关组件本身。是否选中:逻辑型,表示变化后的状态。
- 返回值: 无。
- 示例:
开关1.置状态被改变回调((源对象, 是否选中) => { 调试输出("开关状态:" + 是否选中) })
事件说明
状态被改变(源对象, 是否选中)
- 功能: 与
置状态被改变回调等效,适用于设计文件(.spldg)中定义的组件。 - 示例:
事件 开关1.状态被改变(源对象, 是否选中) 调试输出("状态变为:" + 是否选中) 结束 事件
⚠️ 注意事项
- 状态切换:点击开关的滑块区域或标签文本区域均可切换状态,方便用户操作。
- 禁用状态:
禁用 = 真时,开关不可交互,但仍然可以通过代码修改选中属性(但视觉上不会更新?实际测试中禁用后设置选中仍会更新显示,但用户无法操作)。 - 回调触发:
置状态被改变回调会在状态变化时触发,包括用户交互和代码修改。注意避免在回调中反复修改状态导致死循环。 - 文本标签:右侧文本标签默认显示在开关右侧,可通过继承的
字体大小、文本颜色、字体粗细控制样式。 - 尺寸选择:
尺寸 = "small"适用于空间有限的场景,但相应的滑块和轨道会缩小,视觉上可能不如默认尺寸清晰。 - 颜色定制:
激活颜色和非激活颜色仅改变轨道颜色,滑块颜色通常为白色,不可直接修改(可通过 CSS 类覆盖)。 - 无文本标签:若不需要文本标签,可将
文本设为空字符串,开关单独显示。 - 与多选框的区别:开关用于快速切换状态,视觉上更直观;多选框通常用于表单中的多项选择。
相关文档
- 文档
框架基础类_视图—— 视图类提供的所有通用属性和方法 - 文档
文本类组件_多选框—— 多选组件 - 文档
文本类组件_标签—— 配合显示文本 - 文档
轻语言网站:轻语言语法速查—— 拉姆达表达式、条件判断等 - 文档
综合演示:系统设置面板—— 实际应用示例