add splitlayout component

Signed-off-by: pengyuan2023 <lipengyuan4@huawei.com>

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"
+}

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);
+}

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()
+  }
+}

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))
+    })
+  }
+}