/*
* Copyright (c) 2023-2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { LengthMetrics } from '@ohos.arkui.node';
const TEXT_MARGIN_TOP_4: number = 4;
const TEXT_MARGIN_BOTTOM_8: number = 8;
const TEXT_MARGIN_BOTTOM_24: number = 24;
const TEXT_MARGIN_LEFT_48: number = 48;
const TEXT_MARGIN_RIGHT_48: number = 48;
@Component
export struct SplitLayout {
@BuilderParam container: () => void;
@State sizeValue: string = '';
@State areaWidth: number = 0;
@State imageBackgroundColor: string = '#19000000';
@State mainImage?: Resource = undefined;
@Prop primaryText: string = '';
secondaryText?: string = '';
tertiaryText?: string = '';
build() {
Column() {
if (this.areaWidth <= 600) {
GridRow({
columns: 4,
breakpoints: {
reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row
}) {
GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) {
Column() {
Stack({ alignContent: Alignment.Bottom }) {
Image(this.mainImage)
.height('100%')
.width('100%')
Scroll() {
Column() {
Text(this.primaryText)
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Center)
.fontSize($r('sys.float.Title_M'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
Text(this.secondaryText)
.textAlign(TextAlign.Center)
.fontSize($r('sys.float.Body_M'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({ top: TEXT_MARGIN_TOP_4, bottom: TEXT_MARGIN_BOTTOM_8 })
Text(this.tertiaryText)
.textAlign(TextAlign.Center)
.fontSize($r('sys.float.Caption_M'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.margin({ bottom: TEXT_MARGIN_BOTTOM_24 })
}
.alignItems(HorizontalAlign.Center)
.margin({
left: $r('sys.float.ohos_id_max_padding_start'),
right: $r('sys.float.ohos_id_max_padding_end'), })
}.scrollBar(BarState.On)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST,
})
}
.height('34%')
.width('100%')
Column() {
this.container()
}
.height('66%')
.width('100%')
}
}
}
} else if (600 < this.areaWidth && this.areaWidth <= 840) {
GridRow({
columns: 8,
breakpoints: {
reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row
}) {
GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) {
Column() {
Row() {
Image(this.mainImage)
.margin({ start: LengthMetrics.vp(96), end: LengthMetrics.vp(36) })
.height('60%')
.width('20%')
Scroll() {
Column() {
Text(this.primaryText)
.fontWeight(FontWeight.Medium)
.fontSize($r('sys.float.Title_M'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
Text(this.secondaryText)
.fontSize($r('sys.float.Body_M'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({ top: TEXT_MARGIN_TOP_4, bottom: TEXT_MARGIN_BOTTOM_8 })
Text(this.tertiaryText)
.fontSize($r('sys.float.Caption_M'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.margin({ bottom: TEXT_MARGIN_BOTTOM_24})
}
.width('42%')
.alignItems(HorizontalAlign.Start)
.margin({ end: LengthMetrics.vp(96) })
}.scrollBar(BarState.On)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST,
})
}
.backgroundColor(this.imageBackgroundColor)
.height('34%')
.width('100%')
Column() {
this.container()
}
.width('100%')
.height('66%')
}
}
}
} else if (this.areaWidth > 840) {
GridRow({
columns: 12,
breakpoints: {
reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row
}) {
GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }) {
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column }) {
Image(this.mainImage)
.height('17%')
.width('34%')
.margin({ bottom: 36 })
Scroll() {
Column() {
Text(this.primaryText)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.fontSize($r('sys.float.Title_M'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({ left: TEXT_MARGIN_LEFT_48, right: TEXT_MARGIN_RIGHT_48 })
Text(this.secondaryText)
.textAlign(TextAlign.Center)
.fontSize($r('sys.float.Body_M'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({ top: TEXT_MARGIN_TOP_4, bottom: TEXT_MARGIN_BOTTOM_8,
left: TEXT_MARGIN_LEFT_48, right: TEXT_MARGIN_RIGHT_48 })
Text(this.tertiaryText)
.textAlign(TextAlign.Center)
.fontSize($r('sys.float.Caption_M'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.margin({ left: TEXT_MARGIN_LEFT_48, right: TEXT_MARGIN_RIGHT_48, bottom: TEXT_MARGIN_BOTTOM_24 })
}.alignItems(HorizontalAlign.Center)
.margin({
left: $r('sys.float.ohos_id_max_padding_start'),
right: $r('sys.float.ohos_id_max_padding_end'), })
}.scrollBar(BarState.On)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST,
})
}
.width('100%')
.height('100%')
.backgroundColor(this.imageBackgroundColor)
}
.height('100%')
GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) {
this.container()
}
}.width('100%')
}
}
.onAreaChange((oldValue: Area, newValue: Area) => {
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.sizeValue = JSON.stringify(newValue)
this.areaWidth = parseInt(newValue.width.toString(), 0);
console.info(`pingAce: on area change, oldValue is` + this.areaWidth)
console.info(`pingAce: on area change, oldValue is` + parseInt(newValue.height.toString(), 0))
})
}
}
