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