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