1/** 2 * Copyright (c) 2021-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 */ 15 16import ComponentConfig from './ComponentConfig'; 17import ConfigData from '../../../../../utils/src/main/ets/default/baseUtil/ConfigData'; 18 19/** 20 * item custom component 21 */ 22@Component 23export default struct EntryComponent { 24 @State isShow: Boolean = true; 25 @State settingIcon: string = ""; 26 @State endTextIsShow: Boolean= true; 27 private settingTitle: string | Resource; 28 @State settingSummary: any = ''; 29 @State settingValue: string = ""; 30 @State settingArrow: any = ''; 31 @State settingArrowStyle: string = ""; 32 private settingUri: string; 33 @State titleFontColor: any = $r('sys.color.ohos_id_color_text_primary'); 34 private isEnabled: boolean = true; 35 private onArrowClick?: () => void; 36 @State isTouched: boolean = false; 37 private heights ?= $r('app.float.wh_value_70'); 38 private image_wh ?= $r('app.float.wh_value_50'); 39 private fontSize ?= $r('sys.float.ohos_id_text_size_body1'); 40 private valueFontSize ?= $r('sys.float.ohos_id_text_size_body2'); 41 42 build() { 43 Row() { 44 Row() { 45 Image(this.settingIcon) 46 .width(this.image_wh) 47 .height(this.image_wh) 48 .margin({ right: $r('app.float.wh_10') }) 49 .visibility('' === this.settingIcon ? Visibility.None : Visibility.Visible) 50 .objectFit(ImageFit.Contain) 51 .fillColor($r("sys.color.ohos_id_color_primary")) 52 Column() { 53 Text(this.settingTitle) 54 .fontColor(this.isEnabled ? this.titleFontColor : $r("sys.color.ohos_id_color_primary")) 55 .fontSize(this.fontSize) 56 .textAlign(TextAlign.Start) 57 .maxLines(ComponentConfig.MAX_LINES_3) 58 .textOverflow({ overflow: TextOverflow.Ellipsis }) 59 .fontWeight(500) 60 Row() { 61 Text($r('app.string.version')) 62 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 63 .fontSize($r('sys.float.ohos_id_text_size_body2')) 64 .textAlign(TextAlign.Start) 65 .maxLines(ComponentConfig.MAX_LINES_1) 66 .textOverflow({ overflow: TextOverflow.Ellipsis }) 67 .visibility('pages/applicationInfo' === this.settingUri ? Visibility.Visible : Visibility.None) 68 .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') }); 69 70 Text(this.settingSummary) 71 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 72 .fontSize($r('sys.float.ohos_id_text_size_body2')) 73 .fontWeight('sans-serif') 74 .textAlign(TextAlign.Start) 75 .maxLines(ComponentConfig.MAX_LINES_1) 76 .textOverflow({ overflow: TextOverflow.Ellipsis }) 77 .visibility('' === this.settingSummary || undefined === this.settingSummary ? Visibility.None : Visibility.Visible) 78 .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') }); 79 } 80 } 81 .alignItems(HorizontalAlign.Start); 82 } 83 .flexShrink(0) 84 .alignItems(VerticalAlign.Center) 85 .align(Alignment.Start) 86 .layoutWeight(ConfigData.LAYOUT_WEIGHT_1) 87 88 Row() { 89 Text(this.settingValue) 90 .fontSize(this.valueFontSize) 91 .fontColor($r("sys.color.ohos_id_color_primary")) 92 .opacity($r('sys.float.ohos_id_alpha_content_secondary')) 93 .fontWeight('HwChinese-medium') 94 .height($r('app.float.wh_value_40')) 95 .margin({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l'), right: $r('app.float.wh_value_4') }) 96 .align(Alignment.End); 97 98 if (!this.settingArrowStyle && this.settingArrow) { 99 Image(this.settingArrow) 100 .visibility('' === this.settingArrow ? Visibility.None : Visibility.Visible) 101 .width($r("app.float.wh_value_12")) 102 .height($r("app.float.wh_value_24")) 103 .margin({ right: $r('app.float.wh_value_8') }) 104 .fillColor($r("sys.color.ohos_id_color_primary")) 105 .opacity($r("app.float.opacity_0_2")) 106 } else if (this.settingArrow) { 107 Image(this.settingArrow) 108 .visibility('' === this.settingArrow ? Visibility.None : Visibility.Visible) 109 .fillColor($r("sys.color.ohos_id_color_primary")) 110 .width($r('app.float.wh_value_24')) 111 .height($r('app.float.wh_value_24')) 112 .margin({ right: $r('app.float.wh_value_12') }) 113 .borderRadius($r("sys.float.ohos_id_corner_radius_default_l")) 114 .onClick(this.onArrowClick) 115 116 } 117 } 118 .alignItems(VerticalAlign.Center) 119 .align(Alignment.End); 120 } 121 .opacity(this.isEnabled?1:$r('sys.float.ohos_id_alpha_disabled')) 122 .height(this.heights) 123 .width(ComponentConfig.WH_100_100) 124 .padding({ left: $r('sys.float.ohos_id_card_margin_start') }) 125 .borderRadius($r("sys.float.ohos_id_corner_radius_default_l")) 126 .linearGradient((this.isEnabled && this.isTouched) ? { 127 angle: 90, 128 direction: GradientDirection.Right, 129 colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]] 130 } : { 131 angle: 90, 132 direction: GradientDirection.Right, 133 colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]] 134 }) 135 .alignItems(VerticalAlign.Center) 136 .onTouch((event: TouchEvent) => { 137 if (event.type === TouchType.Down) { 138 this.isTouched = true; 139 } 140 if (event.type === TouchType.Up) { 141 this.isTouched = false; 142 } 143 }) 144 } 145}