1/** 2 * Copyright (c) 2022 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 */ 15import MmsBoolean from "../data/MmsBoolean" 16/** 17 * Options: dual title, 1 switch 18 */ 19@Component 20export struct SettingItemSwitch { 21 primaryTitle: string | Resource; 22 secondaryTitle?: string | Resource; 23 @ObjectLink isEnable: MmsBoolean; 24 showBottomDivider ?: boolean = false; 25 visibilityShow ?: Visibility = Visibility.Visible; 26 onChange: (isOn: boolean) => void; 27 28 build() { 29 Column() { 30 Flex({ 31 direction: FlexDirection.Row, 32 justifyContent: FlexAlign.SpaceBetween, 33 alignItems: ItemAlign.Center 34 }) { 35 Flex({ 36 direction: FlexDirection.Column, 37 justifyContent: FlexAlign.Center, 38 alignItems: ItemAlign.Start 39 }) { 40 Text(this.primaryTitle) 41 .height($r("app.float.settings_item_primary_title_height")) 42 .fontWeight(FontWeight.Medium) 43 .fontSize($r("app.float.settings_item_primary_title_font_size")) 44 .fontColor($r("sys.color.ohos_id_color_text_primary")) 45 46 if (this.secondaryTitle != undefined) { 47 Text(this.secondaryTitle) 48 .height($r("app.float.settings_item_secondary_title_height")) 49 .margin({ top: $r("app.float.settings_item_title_space") }) 50 .fontWeight(FontWeight.Regular) 51 .fontSize($r("app.float.settings_item_secondary_title_font_size")) 52 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 53 } 54 } 55 .layoutWeight(1) 56 57 Toggle({ type: ToggleType.Switch, isOn: this.isEnable.value }) 58 .width($r("app.float.settings_item_switch_width")) 59 .offset({ x: 4, y: 0 }) 60 .selectedColor($r("sys.color.ohos_id_color_activated")) 61 .onChange((isOn: boolean) => { 62 if (typeof isOn === "number") { 63 let newIsOn: number = isOn; 64 switch (newIsOn) { 65 case 1: 66 isOn = true; 67 break; 68 case 0: 69 isOn = false; 70 break; 71 default: 72 break; 73 } 74 } 75 this.onChange(isOn); 76 }) 77 } 78 .layoutWeight(1) 79 80 if (this.showBottomDivider) { 81 Divider() 82 .vertical(false) 83 .strokeWidth(1) 84 .color($r("sys.color.ohos_id_color_list_separator")) 85 .lineCap(LineCapStyle.Round) 86 } 87 } 88 .width("100%") 89 .height(this.secondaryTitle != undefined ? $r("app.float.settings_item_height_2") : 90 $r("app.float.settings_item_height_1")) 91 .visibility(this.visibilityShow) 92 } 93} 94 95/** 96 * Setting items: double title, one status, and one next icon 97 */ 98@Component 99export struct SettingItemJump { 100 primaryTitle: string | Resource; 101 secondaryTitle ?: string | Resource; 102 @Consume statusTitle : Resource; 103 showBottomDivider ?: boolean = false; 104 visibilityShow ?: Visibility = Visibility.Visible; 105 OnClick: (event?: ClickEvent) => void; 106 107 build() { 108 Column() { 109 Flex({ 110 direction: FlexDirection.Row, 111 justifyContent: FlexAlign.SpaceBetween, 112 alignItems: ItemAlign.Center 113 }) { 114 Flex({ 115 direction: FlexDirection.Column, 116 justifyContent: FlexAlign.Center, 117 alignItems: ItemAlign.Start 118 }) { 119 Text(this.primaryTitle) 120 .height($r("app.float.settings_item_primary_title_height")) 121 .fontWeight(FontWeight.Medium) 122 .fontSize($r("app.float.settings_item_primary_title_font_size")) 123 .fontColor($r("sys.color.ohos_id_color_text_primary")) 124 125 if (this.secondaryTitle != undefined) { 126 Text(this.secondaryTitle) 127 .height($r("app.float.settings_item_secondary_title_height")) 128 .margin({ top: $r("app.float.settings_item_title_space") }) 129 .fontWeight(FontWeight.Regular) 130 .fontSize($r("app.float.settings_item_secondary_title_font_size")) 131 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 132 } 133 } 134 .layoutWeight(1) 135 136 Row() { 137 if (this.statusTitle != undefined) { 138 Text(this.statusTitle) 139 .height($r("app.float.settings_item_secondary_title_height")) 140 .margin({ right: $r("app.float.settings_item_status_title_margin_right") }) 141 .fontWeight(FontWeight.Regular) 142 .fontSize($r("app.float.settings_item_secondary_title_font_size")) 143 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 144 } 145 146 Image($rawfile("icon/ic_next.svg")) 147 .width($r("app.float.settings_item_next_image_width")) 148 .height($r("app.float.settings_item_next_image_height")) 149 } 150 } 151 .layoutWeight(1) 152 .onClick(this.OnClick) 153 154 if (this.showBottomDivider) { 155 Divider() 156 .vertical(false) 157 .strokeWidth(1) 158 .color($r("sys.color.ohos_id_color_list_separator")) 159 .lineCap(LineCapStyle.Round) 160 } 161 } 162 .width("100%") 163 .height(this.secondaryTitle != undefined ? $r("app.float.settings_item_height_2") : 164 $r("app.float.settings_item_height_1")) 165 .visibility(this.visibilityShow) 166 } 167}
