1/* 2 * Copyright (c) 2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the 'License'); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an 'AS IS' BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16interface BorderBoleTrue { 17 topLeft: number; 18 topRight: number; 19}; 20 21interface BorderBoleFalse { 22 bottomLeft: number; 23 bottomRight: number; 24}; 25 26interface Length { 27 topLeft: number; 28 topRight: number; 29 bottomLeft: number; 30 bottomRight: number; 31}; 32 33@Component 34export struct settingPublicLayout { 35 private icon: Resource = $r('app.string.CONTENT_TYPE_UNKNOWN'); 36 private modeMessage: Resource = $r('app.string.CONTENT_TYPE_UNKNOWN'); 37 private getModeBol: (mirrorBol: boolean) => void = (mirrorBol: boolean) => { 38 }; 39 private setModeBol: boolean = false; 40 private isModeBol: boolean = false; 41 private borderBol: boolean = false; 42 private borderBole: boolean = false; 43 private iconModeBol: boolean = false; 44 private backNum: number = 1; 45 @State backClBol: boolean = false; 46 @Link @Watch('leftSliderChange') leftSliderIndex: number; 47 private borderBoleTrue: BorderBoleTrue = { 48 topLeft: 16, 49 topRight: 16 50 }; 51 private borderBoleFalse: BorderBoleFalse = { 52 bottomLeft: 16, 53 bottomRight: 16 54 }; 55 private length: Length = { 56 topLeft: 16, 57 topRight: 16, 58 bottomLeft: 16, 59 bottomRight: 16 60 }; 61 62 leftSliderChange() { 63 if (this.backNum == this.leftSliderIndex) { 64 this.backClBol = true; 65 } else { 66 this.backClBol = false; 67 } 68 } 69 70 aboutToAppear() { 71 this.leftSliderChange(); 72 } 73 74 isBorderFn() { 75 if (this.isModeBol) { 76 if (this.borderBol) { 77 if (this.borderBole) { 78 return this.borderBoleTrue; 79 } else { 80 return this.borderBoleFalse; 81 } 82 } else { 83 return this.length; 84 } 85 } else { 86 return null; 87 } 88 } 89 90 build() { 91 Row() { 92 Row() { 93 Row() { 94 Image(this.icon).width(20).height(20).margin({ left: '15px' }); 95 Text(this.modeMessage).margin({ left: '20px' }) 96 } 97 98 if (this.iconModeBol) { 99 Toggle({ type: ToggleType.Switch, isOn: this.setModeBol }) 100 .selectedColor($r('app.color.theme_color')) 101 .switchPointColor('#FFFFFF') 102 .onChange((isOn: boolean) => { 103 this.getModeBol(isOn); 104 console.info('Component status:' + isOn) 105 }) 106 } else { 107 Image($r('app.media.ic_camera_set_arrow')).width(20).height(20).margin({ right: 10 }) 108 } 109 } 110 .onClick(() => { 111 this.leftSliderIndex = this.backNum; 112 console.info('leftSliderIndex status:' + this.leftSliderIndex); 113 console.info('backNum status:' + this.backNum); 114 }) 115 .justifyContent(FlexAlign.SpaceBetween) 116 .width('100%') 117 .borderRadius(15) 118 .height('90px') 119 .backgroundColor(this.backClBol ? 'rgba(255,0,52,0.10)' : '') 120 } 121 .padding(2) 122 .width('100%') 123 .height('100px') 124 .borderRadius(this.isBorderFn()) 125 .backgroundColor(Color.White) 126 } 127}