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