1# switch开发指导 2 3 4switch为开关选择器，切换开启或关闭状态。具体用法请参考[switch](../reference/apis-arkui/arkui-js/js-components-basic-switch.md)。 5 6 7## 创建switch组件 8 9在pages/index目录下的hml文件中创建一个switch组件。 10 11 12```html 13<!-- xxx.hml --> 14<div class="container"> 15 <switch checked="true"></switch> 16</div> 17``` 18 19 20```css 21/* xxx.css */ 22.container { 23 flex-direction: column; 24 background-color: #F1F3F5; 25} 26``` 27 28 29 30 31## 添加属性和方法 32 33 switch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 34 35```html 36<!-- xxx.hml --> 37<div class="container"> 38 <switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch> 39</div> 40``` 41 42 43```css 44/* xxx.css */ 45.container { 46 width: 100%; 47 height: 100%; 48 display: flex; 49 justify-content: center; 50 align-items: center; 51 background-color: #F1F3F5; 52} 53switch { 54 texton-color: #002aff; 55 textoff-color: silver; 56 text-padding: 20px; 57 font-size: 50px; 58} 59``` 60 61 62```js 63// xxx.js 64import promptAction from '@ohos.promptAction'; 65export default { 66 switchChange(e){ 67 if(e.checked){ 68 promptAction.showToast({ 69 message: "open" 70 }); 71 }else{ 72 promptAction.showToast({ 73 message: "close" 74 }); 75 } 76 } 77} 78``` 79 80 81 82 83 84> **说明：** 85> 86> 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。 87 88 89## 场景示例 90 91在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。 92 93 实现方法：创建switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 94 95```html 96<!-- xxx.hml --> 97<div class="container"> 98 <div class="change"> 99 <text>Choose default address:</text> 100 <switch showtext="true" texton="on" textoff="off" checked="true" @change="switchChange"></switch> 101 </div> 102 <div class="content"> 103 <text class="address"><span>Shipping address:</span><span class="textSpan">{{address}}</span></text> 104 </div> 105 <div class="myAddress" style="display: {{addressDisplay}};"> 106 <text style="font-size: 30px;margin-bottom: 50px;">Choose an address:</text> 107 <text class="addressText" style="background-color: {{item == address?'#0fabe7':''}};color: {{item == address?'white':'black'}};" 108 for="item in addressList"@click="changeAddress({{$idx}}})">{{item}}</text> 109 </div> 110</div> 111``` 112 113 114```css 115/* xxx.css */ 116.container { 117 width: 100%; 118 height: 100%; 119 background-color: #F1F3F5; 120 flex-direction: column; 121 padding: 50px; 122} 123.change{ 124 margin-top: 20%; 125 width: 100%; 126 justify-content: center; 127} 128switch{ 129 texton-color: #002aff; 130 textoff-color: silver; 131 text-padding: 20px; 132} 133.content{ 134 width: 70%; 135 text-align: center; 136 flex-direction: column; 137 border: 1px solid #002aff; 138 margin-left: 15%; 139 text-align: center; 140} 141.address{ 142 width: 100%; 143 height: 100px; 144 line-height: 100px; 145 text-align: center; 146 font-size: 28px; 147 margin-bottom: 50px; 148} 149.textSpan{ 150 color: #0aa9f1; 151} 152.myAddress{ 153 flex-direction: column; 154 margin-top: 50px; 155} 156.addressText{ 157 margin-left: 35%; 158 width: 30%; 159 height: 75px; 160 text-align: center; 161 color: white; 162 margin-bottom: 30px; 163 border-radius: 10px; 164 border: 1px solid #0fabe7; 165} 166``` 167 168 169```js 170// xxx.js 171export default { 172 data:{ 173 address: '', 174 addressDisplay: 'none', 175 addressList: ['family','company','commissary'], 176 }, 177 onInit(){ 178 // 初始化默认地址为地址列表中的第一个 179 this.address = this.addressList[0]; 180 }, 181 switchChange(e){ 182 if(e.checked){ 183 this.addressDisplay = "none"; 184 }else{ 185 this.addressDisplay = "flex"; 186 } 187 }, 188 changeAddress(i){ 189 this.address= this.addressList[i]; 190 } 191} 192``` 193 194 195
