1# switch开发指导 2 3 4switch为开关选择器，切换开启或关闭状态。具体用法请参考[switch](../reference/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> 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。 86 87 88## 场景示例 89 90在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。 91 92 实现方法：创建switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 93 94```html 95<!-- xxx.hml --> 96<div class="container"> 97 <div class="change"> 98 <text>Choose default address:</text> 99 <switch showtext="true" texton="on" textoff="off" checked="true" @change="switchChange"></switch> 100 </div> 101 <div class="content"> 102 <text class="address"><span>Shipping address:</span><span class="textSpan">{{address}}</span></text> 103 </div> 104 <div class="myAddress" style="display: {{addressDisplay}};"> 105 <text style="font-size: 30px;margin-bottom: 50px;">Choose an address:</text> 106 <text class="addressText" style="background-color: {{item == address?'#0fabe7':''}};color: {{item == address?'white':'black'}};" 107 for="item in addressList"@click="changeAddress({{$idx}}})">{{item}}</text> 108 </div> 109</div> 110``` 111 112 113```css 114/* xxx.css */ 115.container { 116 width: 100%; 117 height: 100%; 118 background-color: #F1F3F5; 119 flex-direction: column; 120 padding: 50px; 121} 122.change{ 123 margin-top: 20%; 124 width: 100%; 125 justify-content: center; 126} 127switch{ 128 texton-color: #002aff; 129 textoff-color: silver; 130 text-padding: 20px; 131} 132.content{ 133 width: 70%; 134 text-align: center; 135 flex-direction: column; 136 border: 1px solid #002aff; 137 margin-left: 15%; 138 text-align: center; 139} 140.address{ 141 width: 100%; 142 height: 100px; 143 line-height: 100px; 144 text-align: center; 145 font-size: 28px; 146 margin-bottom: 50px; 147} 148.textSpan{ 149 color: #0aa9f1; 150} 151.myAddress{ 152 flex-direction: column; 153 margin-top: 50px; 154} 155.addressText{ 156 margin-left: 35%; 157 width: 30%; 158 height: 75px; 159 text-align: center; 160 color: white; 161 margin-bottom: 30px; 162 border-radius: 10px; 163 border: 1px solid #0fabe7; 164} 165``` 166 167 168```js 169// xxx.js 170export default { 171 data:{ 172 address: '', 173 addressDisplay: 'none', 174 addressList: ['family','company','commissary'], 175 }, 176 onInit(){ 177 // 初始化默认地址为地址列表中的第一个 178 this.address = this.addressList[0]; 179 }, 180 switchChange(e){ 181 if(e.checked){ 182 this.addressDisplay = "none"; 183 }else{ 184 this.addressDisplay = "flex"; 185 } 186 }, 187 changeAddress(i){ 188 this.address= this.addressList[i]; 189 } 190} 191``` 192 193 194
