关于harmonyos:37HarmonyOS鸿蒙开发组件Switch

40次阅读

共计 3492 个字符,预计需要花费 9 分钟才能阅读完成。

3.7【HarmonyOS 鸿蒙开发】组件 Switch

作者:韩茹

公司:程序咖(北京)科技有限公司

鸿蒙巴士专栏作家

Switch 是切换单个设置开 / 关两种状态的组件。

一、反对的 XML 属性

Switch 的共有 XML 属性继承自:Text

Switch 的自有 XML 属性见下表:

属性名称 中文形容 取值 取值阐明 应用案例
text_state_on 开启时显示的文本 string 类型 能够间接设置文本字串,也能够援用 string 资源。ohos:text_state_on=” 分割 ”
ohos:text_state_on=”$string:test_str”
text_state_off 敞开时显示的文本 string 类型 能够间接设置文本字串,也能够援用 string 资源。ohos:text_state_off=” 分割 ”
ohos:text_state_off=”$string:test_str”
track_element 轨迹款式 Element 类型 可间接配置色值,也可援用 color 资源或援用 media/graphic 下的图片资源。ohos:track_element=”#FF0000FF”
ohos:track_element=”color:black”
ohos:track_element=”media:media_src”
ohos:track_element=”$graphic:graphic_src”
thumb_element thumb 款式 Element 类型 可间接配置色值,也可援用 color 资源或援用 media/graphic 下的图片资源。ohos:thumb_element=”#FF0000FF”
ohos:thumb_element=”color:black”
ohos:thumb_element=”media:media_src”
ohos:thumb_element=”$graphic:graphic_src”
marked 以后状态 boolean 类型 能够间接设置 true/false,也能够援用 boolean 资源。ohos:marked=”true”
ohos:marked=”$boolean:true”
check_element 状态标记款式 Element 类型 可间接配置色值,也可援用 color 资源或援用 media/graphic 下的图片资源。ohos:check_element=”#000000″
ohos:check_element=”color:black”
ohos:check_element=”media:media_src”
ohos:check_element=”$graphic:graphic_src”

二、创立 Switch

在 layout 目录下的 xml 文件中创立 Switch。

<Switch
    ohos:id="$+id:btn_switch"
    ohos:height="30vp"
    ohos:width="60vp"/>

Switch 成果:

三、设置 Switch

1、设置 Switch 在开启和敞开时的文本。

在 xml 中设置:

<Switch
    ...
    ohos:text_state_off="OFF"
    ohos:text_state_on="ON"/>

在 Java 代码中设置:

Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
btnSwitch.setStateOffText("OFF");
btnSwitch.setStateOnText("ON");

设置开启和敞开文本成果:

2、设置 Switch 的滑块和轨迹的款式。

定义 Switch 在开启和敞开状态下滑块和轨迹的款式。

在 MainAbilitySlice.java 的 onStart() 办法中,增加以下代码:

ShapeElement elementThumbOn = new ShapeElement();
elementThumbOn.setShape(ShapeElement.OVAL);
elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
elementThumbOn.setCornerRadius(50);
// 敞开状态下滑块的款式
ShapeElement elementThumbOff = new ShapeElement();
elementThumbOff.setShape(ShapeElement.OVAL);
elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
elementThumbOff.setCornerRadius(50);
// 开启状态下轨迹款式
ShapeElement elementTrackOn = new ShapeElement();
elementTrackOn.setShape(ShapeElement.RECTANGLE);
elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
elementTrackOn.setCornerRadius(50);
// 敞开状态下轨迹款式
ShapeElement elementTrackOff = new ShapeElement();
elementTrackOff.setShape(ShapeElement.RECTANGLE);
elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
elementTrackOff.setCornerRadius(50);


通过以下办法,按状态将款式整合到 StateElement 中。

private StateElement trackElementInit(ShapeElement on, ShapeElement off){StateElement trackElement = new StateElement();
    trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
    trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
    return trackElement;
}
private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {StateElement thumbElement = new StateElement();
    thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
    thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
    return thumbElement;
}

设置 Switch 的滑块与轨迹的款式。

  Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
  btnSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
  btnSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));

设置滑块与轨迹款式成果:

3、设置响应 Switch 状态扭转的事件。

btnSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
    // 回调解决 Switch 状态扭转事件
    @Override
    public void onCheckedChanged(AbsButton button, boolean isChecked) {}});




更多内容:

1、社区:鸿蒙巴士 https://www.harmonybus.net/

2、公众号:HarmonyBus

3、技术交换 QQ 群:714518656

4、视频课:https://www.chengxuka.com

正文完
 0