1/* 2 * Copyright (c) 2023-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 16@Component 17export struct SplitLayout { 18 @BuilderParam container: () => void 19 @State sizeValue: string = '' 20 @State areaWidth: number = 0 21 @State imageBackgroundColor: string = "#19000000" 22 @Prop mainImage: Resource 23 @Prop primaryText: string = "" 24 secondaryText?: string = "" 25 tertiaryText?: string = "" 26 27 build() { 28 Column() { 29 if (this.areaWidth < 600) { 30 GridRow({ 31 columns: 4, 32 breakpoints: { 33 reference: BreakpointsReference.WindowSize }, 34 direction: GridRowDirection.Row 35 }) { 36 GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) { 37 Column() { 38 Stack({ alignContent: Alignment.Bottom }) { 39 Image(this.mainImage) 40 .height('34%') 41 .width('100%') 42 Column() { 43 Text(this.primaryText) 44 .fontWeight(FontWeight.Medium) 45 .textAlign(TextAlign.Center) 46 .fontSize($r('sys.float.ohos_id_text_size_headline7')) 47 .fontColor($r('sys.color.ohos_id_color_text_primary')) 48 Text(this.secondaryText) 49 .textAlign(TextAlign.Center) 50 .fontSize($r('sys.float.ohos_id_text_size_body2')) 51 .fontColor($r('sys.color.ohos_id_color_text_primary')) 52 .margin({ top: 4, bottom: 8 }) 53 Text(this.tertiaryText) 54 .textAlign(TextAlign.Center) 55 .fontSize($r('sys.float.ohos_id_text_size_caption')) 56 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 57 .margin({ bottom: 24 }) 58 } 59 .alignItems(HorizontalAlign.Center) 60 .margin({ 61 left: $r('sys.float.ohos_id_max_padding_start'), 62 right: $r('sys.float.ohos_id_max_padding_end'), }) 63 } 64 .height('34%') 65 .width('100%') 66 67 Column() { 68 this.container() 69 } 70 .height('66%') 71 .width('100%') 72 } 73 } 74 } 75 } else if (600 < this.areaWidth && this.areaWidth < 840) { 76 GridRow({ 77 columns: 8, 78 breakpoints: { 79 reference: BreakpointsReference.WindowSize }, 80 direction: GridRowDirection.Row 81 }) { 82 GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) { 83 Column() { 84 Row() { 85 Image(this.mainImage) 86 .margin({ left: 96, right: 36 }) 87 .height('60%') 88 .width('20%') 89 Column() { 90 Text(this.primaryText) 91 .fontWeight(FontWeight.Medium) 92 .fontSize($r('sys.float.ohos_id_text_size_headline7')) 93 .fontColor($r('sys.color.ohos_id_color_text_primary')) 94 Text(this.secondaryText) 95 .fontSize($r('sys.float.ohos_id_text_size_body2')) 96 .fontColor($r('sys.color.ohos_id_color_text_primary')) 97 .margin({ top: 4, bottom: 8 }) 98 Text(this.tertiaryText) 99 .fontSize($r('sys.float.ohos_id_text_size_caption')) 100 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 101 } 102 .width('42%') 103 .alignItems(HorizontalAlign.Start) 104 .margin({ right: 96 }) 105 } 106 .backgroundColor(this.imageBackgroundColor) 107 .height('34%') 108 .width('100%') 109 110 Column() { 111 this.container() 112 } 113 .width('100%') 114 .height('66%') 115 } 116 117 } 118 } 119 120 } else if (this.areaWidth > 840) { 121 GridRow({ 122 columns: 12, 123 breakpoints: { 124 reference: BreakpointsReference.WindowSize }, 125 direction: GridRowDirection.Row 126 }) 127 { 128 GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) { 129 Column() { 130 Image(this.mainImage) 131 .height('17%') 132 .width('34%') 133 .margin({ bottom: 36 }) 134 Text(this.primaryText) 135 .textAlign(TextAlign.Center) 136 .fontWeight(FontWeight.Medium) 137 .fontSize($r('sys.float.ohos_id_text_size_headline7')) 138 .fontColor($r('sys.color.ohos_id_color_text_primary')) 139 .margin({ left: 48, right: 48 }) 140 Text(this.secondaryText) 141 .textAlign(TextAlign.Center) 142 .fontSize($r('sys.float.ohos_id_text_size_body2')) 143 .fontColor($r('sys.color.ohos_id_color_text_primary')) 144 .margin({ top: 4, bottom: 8, left: 48, right: 48 }) 145 Text(this.tertiaryText) 146 .textAlign(TextAlign.Center) 147 .fontSize($r('sys.float.ohos_id_text_size_caption')) 148 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 149 .margin({ left: 48, right: 48 }) 150 } 151 .width('100%') 152 .height('100%') 153 .backgroundColor(this.imageBackgroundColor) 154 .justifyContent(FlexAlign.Center) 155 .alignItems(HorizontalAlign.Center) 156 } 157 .height('100%') 158 159 GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) { 160 this.container() 161 } 162 163 }.width('100%') 164 } 165 } 166 .onAreaChange((oldValue: Area, newValue: Area) => { 167 console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) 168 this.sizeValue = JSON.stringify(newValue) 169 this.areaWidth = parseInt(newValue.width.toString(), 0); 170 console.info(`pingAce: on area change, oldValue is` + this.areaWidth) 171 console.info(`pingAce: on area change, oldValue is` + parseInt(newValue.height.toString(), 0)) 172 }) 173 } 174} 175