鸿蒙API13开发【构建用户界面（switch开发）】ArkUI开发

switch为开关选择器，切换开启或关闭状态。

创建switch组件

在pages/index目录下的hml文件中创建一个switch组件。

<!-- xxx.hml -->
<div class="container">
    <switch checked="true"></switch>
</div>
html

/* xxx.css */
.container {
  flex-direction: column;
  background-color: #F1F3F5;
}
css

添加属性和方法

switch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。

<!-- xxx.hml -->
<div class="container">
  <switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
</div>
html

/* xxx.css */
.container {
  width: 100%;
  height: 100%; 
  display: flex;
  justify-content: cen