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