Switch

自 2.2.1

Switch 是一个带动画效果的开/关切换器，外观呈滑动胶囊状。切换时，内部的指示器会从一端平滑滑到另一端，带有流畅的 CSS 过渡效果。它本身没有文字标签——如果你需要描述性文字，请使用 Label 或 Toggle。

从内部结构来看，Switch 是一个水平 flex 行，包含一个 flex 占位元素（placeholder）和一个 方形指示器（markIcon）。切换时，占位元素的 flex 值从 0 增长到 1，将指示器推至另一侧。

INFO

UIElement 中介绍的所有内容（布局、样式、事件、数据绑定等）同样适用于此处。

---

用法

var sw = new Switch();
sw.setOn(true);
sw.setOnSwitchChanged(isOn -> {
    // 当状态变化时调用
});
parent.addChild(sw);

switch({
    isOn = true
    onSwitch { isOn -> /* 状态已改变 */ }
}) { }

let sw = new Switch();
sw.setOn(true);
sw.setOnSwitchChanged(isOn => { /* ... */ });
parent.addChild(sw);

---

XML

<!-- 默认关闭状态的 Switch -->
<switch/>

<!-- 开启状态的 Switch -->
<switch is-on="true"/>

XML 属性	类型	描述
is-on	boolean	初始开/关状态。默认值：false。

---

内部结构

Switch 包含两个内部元素：

索引	字段	类型	CSS 类	描述
0	placeholder	UIElement	—	控制指示器滑动的 flex 占位元素。
1	markIcon	UIElement	.__switch_mark-icon__	滑动的方形指示器。

---

Switch 样式

SwitchStyle 控制四张纹理：容器在两种状态下的背景，以及指示器在两种状态下的纹理。

INFO

base-background

Switch 处于关闭状态时的容器背景。

默认值：Sprites.RECT_RD_DARK

sw.switchStyle(style -> style.baseTexture(myOffBg));

switch({ switchStyle = { baseTexture(myOffBg) } }) { }

switch {
    base-background: rect(#3a3a3a, 4);
}

INFO

pressed-background

Switch 处于开启状态时的容器背景。

默认值：Sprites.RECT_RD_T

sw.switchStyle(style -> style.pressedTexture(myOnBg));

switch({ switchStyle = { pressedTexture(myOnBg) } }) { }

switch {
    pressed-background: rect(#3d7a4f, 4);
}

INFO

unmark-background

Switch 处于关闭状态时，滑动指示器的纹理。

默认值：Sprites.RECT_RD

sw.switchStyle(style -> style.unmarkTexture(myOffIndicator));

switch({ switchStyle = { unmarkTexture(myOffIndicator) } }) { }

switch {
    unmark-background: rect(#888888, 3);
}

INFO

mark-background

Switch 处于开启状态时，滑动指示器的纹理。

默认值：Sprites.RECT_RD

sw.switchStyle(style -> style.markTexture(myOnIndicator));

switch({ switchStyle = { markTexture(myOnIndicator) } }) { }

switch {
    mark-background: rect(#FFFFFF, 3);
}

---

值绑定

Switch 继承自 BindableUIElement<Boolean>，因此它可以与数据绑定系统集成：

sw.bind(DataBindingBuilder.bool(
    () -> config.isEnabled(),
    val -> config.setEnabled(val)
).build());

详细信息请参阅 数据绑定。

---

字段

名称	类型	访问权限	描述
placeholder	UIElement	public final	驱动滑动动画的 flex 占位元素。
markIcon	UIElement	public final	可见的滑动指示器。
switchStyle	SwitchStyle	private (getter)	当前 Switch 样式。
isOn	boolean	private (getter)	当前开/关状态。

---

方法

方法	返回	描述
setOn(boolean)	Switch	设置开/关状态并通知监听器。
setOnSwitchChanged(BooleanConsumer)	Switch	注册状态变化的监听器。
switchStyle(Consumer<SwitchStyle>)	Switch	以流式方式配置 SwitchStyle。
getValue()	Boolean	返回当前开/关状态。