From dd00f019cbd66c60071bd4bd758bfff7d58f7002 Mon Sep 17 00:00:00 2001 From: pengyuan2023 Date: Thu, 3 Aug 2023 11:04:10 +0800 Subject: [PATCH] add splitlayout component Signed-off-by: pengyuan2023 --- interface/splitlayout/BUILD.gn | 46 +++ interface/splitlayout/splitlayout.cpp | 48 +++ interface/splitlayout/splitlayout.js | 524 ++++++++++++++++++++++++++ source/SplitLayout/SplitLayout.ets | 167 ++++++++ 4 files changed, 785 insertions(+) create mode 100644 interface/splitlayout/BUILD.gn create mode 100644 interface/splitlayout/splitlayout.cpp create mode 100644 interface/splitlayout/splitlayout.js create mode 100644 source/SplitLayout/SplitLayout.ets diff --git a/interface/splitlayout/BUILD.gn b/interface/splitlayout/BUILD.gn new file mode 100644 index 0000000..8a0a21c --- /dev/null +++ b/interface/splitlayout/BUILD.gn @@ -0,0 +1,46 @@ +# Copyright (c) 2023-2023 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") +import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni") + +es2abc_gen_abc("gen_splitlayout_abc") { + src_js = rebase_path("splitlayout.js") + dst_file = rebase_path(target_out_dir + "/splitlayout.abc") + in_puts = [ "splitlayout.js" ] + out_puts = [ target_out_dir + "/splitlayout.abc" ] + extra_args = [ "--module" ] +} + +gen_js_obj("splitlayout_abc") { + input = get_label_info(":gen_splitlayout_abc", "target_out_dir") + "/splitlayout.abc" + output = target_out_dir + "/splitlayout_abc.o" + dep = ":gen_splitlayout_abc" +} + +ohos_shared_library("splitlayout") { + sources = [ "splitlayout.cpp" ] + + deps = [ ":splitlayout_abc" ] + + external_deps = [ + "hilog:libhilog", + "napi:ace_napi", + ] + + subsystem_name = "arkui" + part_name = "advanced_ui_component" + + relative_install_dir = "module/arkui/advanced" +} \ No newline at end of file diff --git a/interface/splitlayout/splitlayout.cpp b/interface/splitlayout/splitlayout.cpp new file mode 100644 index 0000000..154b774 --- /dev/null +++ b/interface/splitlayout/splitlayout.cpp @@ -0,0 +1,48 @@ +/* + * Copyright (c) 2023-2023 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. + */ + +#include "native_engine/native_engine.h" + +#include "napi/native_api.h" +#include "napi/native_node_api.h" + +extern const char _binary_splitlayout_abc_start[]; +extern const char _binary_splitlayout_abc_end[]; + +// Napi get abc code function +extern "C" __attribute__((visibility("default"))) +void NAPI_splitlayout_GetABCCode(const char **buf, int *buflen) +{ + if (buf != nullptr) { + *buf = _binary_splitlayout_abc_start; + } + if (buflen != nullptr) { + *buflen = _binary_splitlayout_abc_end - _binary_splitlayout_abc_start; + } +} + +static napi_module splitlayoutModule = { + .nm_version = 1, + .nm_flags = 0, + .nm_filename = nullptr, + .nm_modname = "splitlayout", + .nm_priv = ((void*)0), + .reserved = { 0 }, +}; + +extern "C" __attribute__((constructor)) void splitlayoutRegisterModule(void) +{ + napi_module_register(&splitlayoutModule); +} \ No newline at end of file diff --git a/interface/splitlayout/splitlayout.js b/interface/splitlayout/splitlayout.js new file mode 100644 index 0000000..85792d4 --- /dev/null +++ b/interface/splitlayout/splitlayout.js @@ -0,0 +1,524 @@ +/* + * Copyright (c) 2023-2023 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. + */ + +export class splitlayout extends ViewPU { + constructor(e, t, o, r = -1) { + super(e, o, r); + this.container = void 0; + this.__sizeValue = new ObservedPropertySimplePU("", this, "sizeValue"); + this.__areaWidth = new ObservedPropertySimplePU(0, this, "areaWidth"); + this.__imageBackgroundColor = new ObservedPropertySimplePU("#FFFFFF", this, "imageBackgroundColor"); + this.__mainImage = new SynchedPropertyObjectOneWayPU(t.mainImage, this, "mainImage"); + this.__primaryText = new SynchedPropertySimpleOneWayPU(t.primaryText, this, "primaryText"); + this.secondaryText = "私人订制新歌精选站，为你推荐专属优质新歌;为你推荐专属优质新歌"; + this.tertiaryText = "每日更新"; + this.setInitiallyProvidedValue(t) + } + + setInitiallyProvidedValue(e) { + void 0 !== e.container && (this.container = e.container); + void 0 !== e.sizeValue && (this.sizeValue = e.sizeValue); + void 0 !== e.areaWidth && (this.areaWidth = e.areaWidth); + void 0 !== e.imageBackgroundColor && (this.imageBackgroundColor = e.imageBackgroundColor); + void 0 !== e.mainImage ? this.__mainImage.set(e.mainImage) : this.__mainImage.set({ + id: -1, + type: 2e4, + params: ["app.media.music"], + bundleName: "", + moduleName: "" + }); + void 0 !== e.primaryText ? this.__primaryText.set(e.primaryText) : this.__primaryText.set("新歌推荐"); + void 0 !== e.secondaryText && (this.secondaryText = e.secondaryText); + void 0 !== e.tertiaryText && (this.tertiaryText = e.tertiaryText) + } + + updateStateVars(e) { + this.__mainImage.reset(e.mainImage); + this.__primaryText.reset(e.primaryText) + } + + purgeVariableDependenciesOnElmtId(e) { + this.__sizeValue.purgeDependencyOnElmtId(e); + this.__areaWidth.purgeDependencyOnElmtId(e); + this.__imageBackgroundColor.purgeDependencyOnElmtId(e); + this.__mainImage.purgeDependencyOnElmtId(e); + this.__primaryText.purgeDependencyOnElmtId(e) + } + + aboutToBeDeleted() { + this.__sizeValue.aboutToBeDeleted(); + this.__areaWidth.aboutToBeDeleted(); + this.__imageBackgroundColor.aboutToBeDeleted(); + this.__mainImage.aboutToBeDeleted(); + this.__primaryText.aboutToBeDeleted(); + SubscriberManager.Get().delete(this.id__()); + this.aboutToBeDeletedInternal() + } + + get sizeValue() { + return this.__sizeValue.get() + } + + set sizeValue(e) { + this.__sizeValue.set(e) + } + + get areaWidth() { + return this.__areaWidth.get() + } + + set areaWidth(e) { + this.__areaWidth.set(e) + } + + get imageBackgroundColor() { + return this.__imageBackgroundColor.get() + } + + set imageBackgroundColor(e) { + this.__imageBackgroundColor.set(e) + } + + get mainImage() { + return this.__mainImage.get() + } + + set mainImage(e) { + this.__mainImage.set(e) + } + + get primaryText() { + return this.__primaryText.get() + } + + set primaryText(e) { + this.__primaryText.set(e) + } + + initialRender() { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.onAreaChange(((e, t) => { + console.info(`Ace: on area change, oldValue is ${JSON.stringify(e)} value is ${JSON.stringify(t)}`); + this.sizeValue = JSON.stringify(t); + this.areaWidth = parseInt(t.width.toString(), 0); + console.info("pingAce: on area change, oldValue is" + this.areaWidth); + console.info("pingAce: on area change, oldValue is" + parseInt(t.height.toString(), 0)) + })); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + If.create(); + this.areaWidth < 600 ? this.ifElseBranchUpdateFunction(0, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridRow.create({ + columns: 4, + breakpoints: { reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }); + t || GridRow.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Stack.create({ alignContent: Alignment.Bottom }); + Stack.height("34%"); + Stack.width("100%"); + t || Stack.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.mainImage); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.alignItems(HorizontalAlign.Center); + Column.margin({ + left: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_start"], + bundleName: "", + moduleName: "" + }, + right: { + id: -1, + type: 10002, + params: ["sys.float.ohos_id_max_padding_end"], + bundleName: "", + moduleName: "" + } + }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.primaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.secondaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ top: 4, bottom: 8 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.tertiaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_caption"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ bottom: 24 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop(); + Stack.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.height("66%"); + Column.width("100%"); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.container.bind(this)(); + Column.pop(); + Column.pop(); + GridCol.pop(); + GridRow.pop() + })) : 600 < this.areaWidth && this.areaWidth < 840 ? this.ifElseBranchUpdateFunction(1, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridRow.create({ + columns: 8, + breakpoints: { reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }); + t || GridRow.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Row.create(); + Row.backgroundColor(this.imageBackgroundColor); + Row.height("34%"); + t || Row.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.mainImage); + Image.margin({ left: 96, right: 36 }); + Image.height("60%"); + Image.width("20%"); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.alignItems(HorizontalAlign.Start); + Column.margin({ right: 96 }); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.primaryText); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.secondaryText); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ top: 4, bottom: 8 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.tertiaryText); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_caption"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop(); + Row.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.height("66%"); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.container.bind(this)(); + Column.pop(); + Column.pop(); + GridCol.pop(); + GridRow.pop() + })) : this.areaWidth > 840 && this.ifElseBranchUpdateFunction(2, (() => { + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridRow.create({ + columns: 12, + breakpoints: { reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }); + t || GridRow.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); + GridCol.height("100%"); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Column.create(); + Column.height("100%"); + Column.backgroundColor(this.imageBackgroundColor); + Column.justifyContent(FlexAlign.Center); + Column.alignItems(HorizontalAlign.Center); + t || Column.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Image.create(this.mainImage); + Image.height("17%"); + Image.width("34%"); + Image.margin({ bottom: 36 }); + t || Image.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.primaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_headline7"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ left: 48, right: 48 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.secondaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body1"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_primary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ top: 4, bottom: 8, left: 48, right: 48 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + Text.create(this.tertiaryText); + Text.textAlign(TextAlign.Center); + Text.fontSize({ + id: -1, + type: 10002, + params: ["sys.float.ohos_id_text_size_body2"], + bundleName: "", + moduleName: "" + }); + Text.fontColor({ + id: -1, + type: 10001, + params: ["sys.color.ohos_id_color_text_secondary"], + bundleName: "", + moduleName: "" + }); + Text.margin({ bottom: 24, left: 48, right: 48 }); + t || Text.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + Text.pop(); + Column.pop(); + GridCol.pop(); + this.observeComponentCreation(((e, t) => { + ViewStackProcessor.StartGetAccessRecordingFor(e); + GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); + t || GridCol.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + this.container.bind(this)(); + GridCol.pop(); + GridRow.pop() + })); + t || If.pop(); + ViewStackProcessor.StopGetAccessRecording() + })); + If.pop(); + Column.pop() + } + + rerender() { + this.updateDirtyElements() + } +} \ No newline at end of file diff --git a/source/SplitLayout/SplitLayout.ets b/source/SplitLayout/SplitLayout.ets new file mode 100644 index 0000000..9fb74a2 --- /dev/null +++ b/source/SplitLayout/SplitLayout.ets @@ -0,0 +1,167 @@ +/* + * Copyright (c) 2023-2023 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. + */ + +@Component +export struct splitlayout { + @BuilderParam container: () => void + @State sizeValue: string = '' + @State areaWidth: number = 0 + @State imageBackgroundColor: string = "#19000000" + @Prop mainImage: Resource = $r("app.media.music") + @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) + + Column() { + Text(this.primaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + Text(this.secondaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ top: 4, bottom: 8 }) + Text(this.tertiaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_caption')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .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'), }) + } + .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({ left: 96, right: 36 }) + .height('60%') + .width('20%') + Column() { + Text(this.primaryText) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + Text(this.secondaryText) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ top: 4, bottom: 8 }) + Text(this.tertiaryText) + .fontSize($r('sys.float.ohos_id_text_size_caption')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + } + .alignItems(HorizontalAlign.Start) + .margin({ right: 96 }) + } + .backgroundColor(this.imageBackgroundColor) + .height('34%') + + Column() { + this.container() + } + .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 } }) { + Column() { + Image(this.mainImage) + .height('17%') + .width('34%') + .margin({ bottom: 36 }) + Text(this.primaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ left: 48, right: 48 }) + Text(this.secondaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_body1')) + .fontColor($r('sys.color.ohos_id_color_text_primary')) + .margin({ top: 4, bottom: 8, left: 48, right: 48 }) + Text(this.tertiaryText) + .textAlign(TextAlign.Center) + .fontSize($r('sys.float.ohos_id_text_size_body2')) + .fontColor($r('sys.color.ohos_id_color_text_secondary')) + .margin({ bottom: 24, left: 48, right: 48 }) + } + .height('100%') + .backgroundColor(this.imageBackgroundColor) + .justifyContent(FlexAlign.Center) + .alignItems(HorizontalAlign.Center) + } + .height('100%') + + GridCol({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }) { + this.container() + } + + } + } + } + + .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)) + }) + } +}