1/** 2 * Copyright (c) 2021 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'; 16import Router from '@system.router'; 17 18/** 19 * head custom component 20 */ 21@Component 22export default struct HeadComponent { 23 private isActive: boolean= true; 24 private icBackIsVisibility: boolean= true; 25 private headName: string | Resource = ''; 26 @State isTouch: boolean= false; 27 28 build() { 29 Row() { 30 Stack({ alignContent: Alignment.Center }) { 31 Image($r('app.media.ic_back')) 32 .width($r('app.float.wh_value_24')) 33 .height($r('app.float.wh_value_24')) 34 .fillColor($r("sys.color.ohos_id_color_primary")) 35 } 36 .margin({ right: $r('app.float.wh_value_16') }) 37 .backgroundColor(this.isTouch ? $r('app.color.color_E3E3E3_grey') : $r('app.color.color_00000000_transparent')) 38 .visibility(this.icBackIsVisibility ? Visibility.Visible : Visibility.None) 39 .onClick(() => { 40 Router.back(); 41 }) 42 .onTouch((event: TouchEvent) => { 43 if (event.type === TouchType.Down) { 44 this.isTouch = true; 45 } 46 if (event.type === TouchType.Up) { 47 this.isTouch = false; 48 } 49 }); 50 51 Text(this.headName) 52 .fontSize($r('app.float.head_font_24')) 53 .lineHeight($r('app.float.wh_value_33')) 54 .fontFamily('HarmonyHeiTi-Bold') 55 .fontWeight(FontWeight.Bold) 56 .fontColor($r('app.color.font_color_182431')) 57 .maxLines(ComponentConfig.MAX_LINES_1) 58 .textOverflow({ overflow: TextOverflow.Ellipsis }) 59 .textAlign(TextAlign.Start) 60 .margin({ top: $r('app.float.wh_value_13'), bottom: $r('app.float.wh_value_15') }); 61 } 62 .width(ComponentConfig.WH_100_100) 63 .padding({ left: $r('app.float.wh_value_12') }) 64 .height($r('app.float.wh_value_56')) 65 .alignItems(VerticalAlign.Center) 66 .align(Alignment.Start) 67 } 68}