1/* 2 * Copyright (c) 2022-2023 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 { AppItem, MyAppSource } from '../model/HomeDataType' 17 18@Component 19export default struct IndexApps { 20 private title: Resource 21 @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md' 22 private apps: AppItem[] = [] 23 24 @Builder 25 appListHeader() { 26 Row() { 27 Text(this.title) 28 .width(100) 29 .fontSize(16) 30 .textAlign(TextAlign.Start) 31 .fontWeight(500) 32 Blank() 33 Text($r('app.string.more')) 34 .fontSize(14) 35 .textAlign(TextAlign.End) 36 .fontWeight(400) 37 .margin({ right: 2 }) 38 Image($r('app.media.ic_public_arrow_right')) 39 .width(12) 40 .height(18) 41 .opacity(0.9) 42 .objectFit(ImageFit.Fill) 43 } 44 .margin({ bottom: 9, top: 9 }) 45 .width('100%') 46 .alignItems(VerticalAlign.Bottom) 47 } 48 49 @Builder 50 appListItem(app:AppItem) { 51 Column() { 52 Image(app.image) 53 .width(this.currentBreakpoint === 'lg' ? 80 : 56) 54 .height(this.currentBreakpoint === 'lg' ? 80 : 56) 55 .margin({ bottom: 8 }) 56 Text(app.title) 57 .width(this.currentBreakpoint === 'lg' ? 80 : 56) 58 .height(16) 59 .fontSize(12) 60 .textAlign(TextAlign.Center) 61 .fontColor('#18181A') 62 .margin({ bottom: 8 }) 63 Text($r('app.string.install')) 64 .width(this.currentBreakpoint === 'lg' ? 80 : 56) 65 .height(28) 66 .fontColor('#0A59F7') 67 .textAlign(TextAlign.Center) 68 .borderRadius(this.currentBreakpoint === 'lg' ? 26 : 20) 69 .fontWeight(500) 70 .fontSize(12) 71 .padding({ top: 6, bottom: 6, left: 8, right: 8 }) 72 .backgroundColor('rgba(0,0,0,0.05)') 73 } 74 } 75 76 77 build() { 78 Column() { 79 this.appListHeader() 80 List({ space: this.currentBreakpoint === 'lg' ? 44 : 20}) { 81 LazyForEach(new MyAppSource(this.apps), app => { 82 ListItem() { 83 this.appListItem(app) 84 } 85 }, app => app.id) 86 } 87 .width('100%') 88 .height(this.currentBreakpoint === 'lg' ? 140 : 120) 89 .listDirection(Axis.Horizontal) 90 } 91 .width('100%') 92 .height(this.currentBreakpoint === 'lg' ? 188 : 164) 93 .padding({ bottom: 8, left: 12, right: 12 }) 94 } 95} 96 97 98