鸿蒙应用开发 | 揭开神秘 开关（Switch）的功能与用法

原文链接
下面我们开始今天的文章，还是老规矩，通过如下几点来说：
 

1，简介 
2，用到的属性 
3，实战

简介
Switch是一个可以在两种状态切换的开关控件。只有开关两种状态。

一般引用在手机应用的设置界面 做一些开关操作，或者某一个功能的开关操作。

用到的属性
Switch的共有XML属性还是继承自：Text

属性中 有两个比较重要 ：
text_state_on // 开启显示的文本
text_state_off //关闭显示的文本

实战

先来创建一个基本的开关试试把。
1，开关默认效果

1. <Switch

2. ohos:id="$+id:switch_opt"

3. ohos:height="match_content"

4. ohos:width="match_content"

5. ohos:text_state_off="关闭"

6. ohos:text_state_on="开启"

7. ohos:padding="5vp"

8. ohos:text_size="16fp"

9. />

1，默认效果 添加了 几个属性，开启和关闭文字，字体大小

查看一下效果：

2，设置背景样式

ShapeElement elementThumbOn = new ShapeElement();
elementThumbOn.setShape(ShapeElement.OVAL);
elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
elementThumbOn.setCornerRadius(50);

1，设置背景演示和圆角

3，设置背景状态

1. // 滑块样式的设置

2. private StateElement trackElementInit(ShapeElement on, ShapeElement off){

3. StateElement trackElement = new StateElement();

4. trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);

5. trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);

6. return trackElement;

7. }

1. 设置状态，状态是两种背景样式设置的切换

完整代码：

1. <?xml version="1.0" encoding="utf-8"?>

2. <DirectionalLayout

3. xmlns:ohos="http://schemas.huawei.com/res/ohos"

4. ohos:height="match_parent"

5. ohos:width="match_parent"

6. ohos:alignment="center"

7. ohos:orientation="vertical">

9. <Switch

10. ohos:id="$+id:switch_opt"

11. ohos:height="match_content"

12. ohos:width="match_content"

13. ohos:text_state_off="关闭"

14. ohos:text_state_on="开启"

15. ohos:padding="5vp"

16. ohos:text_size="16fp"

17. />

19. </DirectionalLayout>

代码逻辑：

1. package com.example.aswitch.slice;

3. import com.example.aswitch.ResourceTable;

4. import ohos.aafwk.ability.AbilitySlice;

5. import ohos.aafwk.content.Intent;

6. import ohos.agp.colors.RgbColor;

7. import ohos.agp.components.ComponentState;

8. import ohos.agp.components.Switch;

9. import ohos.agp.components.element.ShapeElement;

10. import ohos.agp.components.element.StateElement;

12. public class MainAbilitySlice extends AbilitySlice {

13. @Override

14. public void onStart(Intent intent) {

15. super.onStart(intent);

16. super.setUIContent(ResourceTable.Layout_ability_main);

18. // 开启状态下滑块的样式

19. ShapeElement elementThumbOn = new ShapeElement();

20. elementThumbOn.setShape(ShapeElement.OVAL);

21. elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));

22. elementThumbOn.setCornerRadius(50);

24. // 关闭状态下滑块的样式

25. ShapeElement elementThumbOff = new ShapeElement();

26. elementThumbOff.setShape(ShapeElement.OVAL);

27. elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));

28. elementThumbOff.setCornerRadius(50);

30. // 开启状态下轨迹样式

31. ShapeElement elementTrackOn = new ShapeElement();

32. elementTrackOn.setShape(ShapeElement.RECTANGLE);

33. elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));

34. elementTrackOn.setCornerRadius(50);

36. // 关闭状态下轨迹样式

37. ShapeElement elementTrackOff = new ShapeElement();

38. elementTrackOff.setShape(ShapeElement.RECTANGLE);

39. elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));

40. elementTrackOff.setCornerRadius(50);

43. // 设置切换属性

44. Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_switch_opt);

45. btnSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));

46. btnSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));

47. }

49. // 滑块样式的设置

50. private StateElement trackElementInit(ShapeElement on, ShapeElement off){

51. StateElement trackElement = new StateElement();

52. trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);

53. trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);

54. return trackElement;

55. }

56. // 轨迹样式的设置

57. private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {

58. StateElement thumbElement = new StateElement();

59. thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);

60. thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);

61. return thumbElement;

62. }

64. @Override

65. public void onActive() {

66. super.onActive();

67. }

69. @Override

70. public void onForeground(Intent intent) {

71. super.onForeground(intent);

72. }

73. }

源码：
Switch ： https://gitee.com/codegrowth/haomony-develop/tree/master/Switch

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/118399361