From c4b5e89ee4eadf16a080236b7664d6cb1608d409 Mon Sep 17 00:00:00 2001 From: yuxiaofei Date: Sat, 21 Jun 2025 17:05:00 +0800 Subject: [PATCH] splitLayout 1.2 add Signed-off-by: yuxiaofei --- adapter/ohos/build/BUILD.gn | 1 + advanced_ui_component_static/BUILD.gn | 24 ++ .../@ohos.arkui.advanced.splitLayout.ets | 256 ++++++++++++++++++ .../splitlayout/BUILD.gn | 35 +++ 4 files changed, 316 insertions(+) create mode 100644 advanced_ui_component_static/BUILD.gn create mode 100644 advanced_ui_component_static/splitlayout/@ohos.arkui.advanced.splitLayout.ets create mode 100644 advanced_ui_component_static/splitlayout/BUILD.gn diff --git a/adapter/ohos/build/BUILD.gn b/adapter/ohos/build/BUILD.gn index 248f196e2d9..59e98a6abad 100644 --- a/adapter/ohos/build/BUILD.gn +++ b/adapter/ohos/build/BUILD.gn @@ -20,6 +20,7 @@ group("ace_packages") { deps = [ "$ace_root/adapter/ohos/tools:tools_target", "$ace_root/advanced_ui_component:advanced_ui_component", + "$ace_root/advanced_ui_component_static:advanced_ui_component_static", "$ace_root/build:libace", "$ace_root/build:libace_compatible", "$ace_root/build:libace_engine_pa_ark", diff --git a/advanced_ui_component_static/BUILD.gn b/advanced_ui_component_static/BUILD.gn new file mode 100644 index 00000000000..890f4bc5ca1 --- /dev/null +++ b/advanced_ui_component_static/BUILD.gn @@ -0,0 +1,24 @@ +# Copyright (c) 2025 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("//build/ohos.gni") +import("//foundation/arkui/ace_engine/ace_config.gni") + +group("advanced_ui_component_static") { + deps = [] + if (!ace_engine_feature_wearable) { + deps += [ + "splitlayout:splitLayout", + ] + } +} diff --git a/advanced_ui_component_static/splitlayout/@ohos.arkui.advanced.splitLayout.ets b/advanced_ui_component_static/splitlayout/@ohos.arkui.advanced.splitLayout.ets new file mode 100644 index 00000000000..23850bbbcd4 --- /dev/null +++ b/advanced_ui_component_static/splitlayout/@ohos.arkui.advanced.splitLayout.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 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 { + Component, + Resource, + ResourceStr, + Column, + GridRow, + BreakpointsReference, + GridRowDirection, + Row, + GridCol, + Stack, + $r, + Alignment, + Image, + Scroll, + Text, + FontWeight, + TextAlign, + HorizontalAlign, + BarState, + NestedScrollMode, + Flex, + FlexAlign, + ItemAlign, + FlexDirection, + Area, + Color, + Padding, + LocalizedMargin, + Margin, + ClickEvent, + BreakPoints, + GridColColumnOption, + BuilderParam +} from '@ohos.arkui.component'; +import { LengthMetrics } from '@ohos.arkui.node'; +import { State, Link, Observed, Prop } from '@ohos.arkui.stateManagement'; +import hilog from '@ohos.hilog'; + +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'; + @Observed + @State mainImage: ResourceStr = ''; + @Prop primaryText: string = ''; + secondaryText?: string = ''; + tertiaryText?: string = ''; + + build() { + Column() { + if (this.areaWidth < 600) { + GridRow({ + columns: 4, + breakpoints: { + reference: BreakpointsReference.WindowSize + } as BreakPoints, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } as GridColColumnOption }) { + 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 } as Margin) + 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 } as Margin) + } + .alignItems(HorizontalAlign.Center) + .margin({ + left: $r('sys.float.ohos_id_max_padding_start'), + right: $r('sys.float.ohos_id_max_padding_end') + } as Margin) + }.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 + } as BreakPoints, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } as GridColColumnOption }) { + Column() { + Row() { + Image(this.mainImage) + .margin({ start: LengthMetrics.vp(96), end: LengthMetrics.vp(36) } as LocalizedMargin) + .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 } as Padding) + Text(this.tertiaryText) + .fontSize($r('sys.float.Caption_M')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .margin({ bottom: TEXT_MARGIN_BOTTOM_24 } as Padding) + } + .width('42%') + .alignItems(HorizontalAlign.Start) + .margin({ end: LengthMetrics.vp(96) } as LocalizedMargin) + }.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 + } as BreakPoints, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 4, sm: 4, md: 4, lg: 4 } as GridColColumnOption }) { + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, direction: FlexDirection.Column }) { + Image(this.mainImage) + .height('17%') + .width('34%') + .margin({ bottom: 36 } as Margin) + 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 } as Margin) + 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 + } as Margin) + 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 + } as Margin) + }.alignItems(HorizontalAlign.Center) + .margin({ + left: $r('sys.float.ohos_id_max_padding_start'), + right: $r('sys.float.ohos_id_max_padding_end') + } as Margin) + }.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 } as GridColColumnOption }) { + 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)); + }) + } +} diff --git a/advanced_ui_component_static/splitlayout/BUILD.gn b/advanced_ui_component_static/splitlayout/BUILD.gn new file mode 100644 index 00000000000..4e3d48cd59e --- /dev/null +++ b/advanced_ui_component_static/splitlayout/BUILD.gn @@ -0,0 +1,35 @@ +# Copyright (c) 2025 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("//build/config/components/ets_frontend/ets2abc_config.gni") +import("//build/ohos.gni") + +generate_static_abc("split_layout_ets_abc") { + base_url = "./" + files = [ "./@ohos.arkui.advanced.splitLayout.ets" ] + ui_enable = "True" + is_boot_abc = "True" + device_dst_file = "/system/framework/split_layout_ets_abc.abc" +} + +ohos_prebuilt_etc("split_layout_ets_abc_etc") { + source = "$target_out_dir/split_layout_ets_abc.abc" + module_install_dir = "framework" + subsystem_name = "arkui" + part_name = "ace_engine" + deps = [ ":split_layout_ets_abc" ] +} + +group("splitLayout"){ + deps = [":split_layout_ets_abc_etc"] +} \ No newline at end of file -- Gitee