跳转至

Switch

自 2.2.1

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

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

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 控制四张纹理：容器在两种状态下的背景，以及指示器在两种状态下的纹理。

base-background

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

默认值：Sprites.RECT_RD_DARK

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

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

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

pressed-background

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

默认值：Sprites.RECT_RD_T

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

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

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

unmark-background

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

默认值：Sprites.RECT_RD

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

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

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

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 返回当前开/关状态。