!8674 Add ace_ets_component_common_attrs test

Merge pull request !8674 from wangchao/master

arkui/BUILD.gn

@@ -17,6 +17,7 @@ group("arkui") {
     "ace_ets_component:ActsAceEtsComponentTest",
     "ace_ets_component_apilack:ActsAceEtsApiLackTest",
     "ace_ets_component_attrlack:ActsAceEtsAttrLackTest",
+    "ace_ets_component_common_attrs:ActsAceEtsComponentCommonAttrsTest",
     "ace_ets_component_completion:componentCompletionTest",
     "ace_ets_component_five:ActsAceEtsComponentFiveTest",
     "ace_ets_component_four:ActsAceEtsComponentFourTest",

arkui/ace_ets_component_common_attrs/AppScope/app.json

+{
+  "app": {
+    "bundleName": "com.acts.arkui.component.common.attrs.test",
+    "vendor": "huawei",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name",
+    "description": "$string:description_application",
+    "distributedNotificationEnabled": true,
+    "keepAlive": true,
+    "singleUser": true,
+    "minAPIVersion": 10,
+    "targetAPIVersion": 10,
+    "car": {
+      "apiCompatibleVersion": 10,
+      "singleUser": false
+    }
+  }
+}

arkui/ace_ets_component_common_attrs/AppScope/resources/base/element/string.json

+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "ActsAceEtsComponentCommonAttrsTest"
+    },
+    {
+      "name": "description_application",
+      "value": "ActsAceEtsComponentCommonAttrsTest"
+    }
+  ]
+}

arkui/ace_ets_component_common_attrs/BUILD.gn

+# Copyright (c) 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("//test/xts/tools/build/suite.gni")
+
+ohos_js_hap_suite("ActsAceEtsComponentCommonAttrsTest") {
+  hap_profile = "entry/src/main/module.json"
+  js_build_mode = "debug"
+  deps = [
+    ":arkui_component_common_attrs_js_assets",
+    ":arkui_component_common_attrs_resources",
+  ]
+  ets2abc = true
+  certificate_profile = "signature/openharmony_sx.p7b"
+  hap_name = "ActsAceEtsComponentCommonAttrsTest"
+}
+
+ohos_app_scope("arkui_component_common_attrs_app_profile") {
+  app_profile = "AppScope/app.json"
+  sources = [ "AppScope/resources" ]
+}
+
+ohos_js_assets("arkui_component_common_attrs_js_assets") {
+  source_dir = "entry/src/main/ets"
+}
+
+ohos_resources("arkui_component_common_attrs_resources") {
+  sources = [ "entry/src/main/resources" ]
+  deps = [ ":arkui_component_common_attrs_app_profile" ]
+  hap_profile = "entry/src/main/module.json"
+}

arkui/ace_ets_component_common_attrs/Test.json

+{
+    "description": "Configuration for aceEtsComponentCommonAttrs Tests",
+    "driver": {
+        "type": "OHJSUnitTest",
+        "test-timeout": "180000",
+        "bundle-name": "com.acts.arkui.component.common.attrs.test",
+        "module-name": "phone",
+        "shell-timeout": "600000",
+        "testcase-timeout": 60000
+    },
+    "kits": [{
+        "test-file-name": [
+            "ActsAceEtsComponentCommonAttrsTest.hap"
+        ],
+        "type": "AppInstallKit",
+        "cleanup-apps": true
+    }, {
+        "type": "ShellKit",
+        "run-command": [
+            "power-shell wakeup",
+            "power-shell setmode 602"
+        ]
+
+    }]
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/Application/AbilityStage.ts

+/*
+ * Copyright (c) 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 AbilityStage from '@ohos.app.ability.AbilityStage';
+
+export default class MyAbilityStage extends AbilityStage {
+  onCreate() {
+    console.log('[Demo] MyAbilityStage onCreate');
+    globalThis.stageOnCreateRun = 1;
+    globalThis.stageContext = this.context;
+  }
+}

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/MainAbility.ts

+/*
+ * Copyright (c) 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 Ability from '@ohos.app.ability.UIAbility';
+
+export default class MainAbility extends Ability {
+  onCreate(want, launchParam) {
+    // Ability is creating, initialize resources for this ability
+    console.log('[Demo] MainAbility onCreate');
+    globalThis.abilityWant = want;
+    globalThis.abilityLaunchParam = launchParam;
+  }
+
+  onDestroy() {
+    // Ability is destroying, release resources for this ability
+    console.log('[Demo] MainAbility onDestroy');
+  }
+
+  onWindowStageCreate(windowStage) {
+    // Main window is created, set main page for this ability
+    console.log('[Demo] MainAbility onWindowStageCreate windowStage=' + windowStage);
+    globalThis.windowStage = windowStage;
+    globalThis.abilityContext = this.context;
+    windowStage.setUIContent(this.context, 'MainAbility/pages/index/Index', null);
+  }
+
+  onWindowStageDestroy() {
+    //Main window is destroyed, release UI related resources
+    console.log('[Demo] MainAbility onWindowStageDestroy');
+  }
+
+  onForeground() {
+    // Ability has brought to foreground
+    console.log('[Demo] MainAbility onForeground');
+  }
+
+  onBackground() {
+    // Ability has back to background
+    console.log('[Demo] MainAbility onBackground');
+  }
+};
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/AttrsManager.ets

+/*
+ * Copyright (c) 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 { Constants } from '../../constants/Constants';
+import events_emitter from '@ohos.events.emitter';
+
+export class AttrsManager {
+  callBack;
+
+  static change(caseName, setValue) {
+    let eventData = { data: { src: JSON.stringify({ value: setValue }) } }
+    this.emitEvent(caseName, Constants.EVENT_ID_CHANGE_DATA, eventData);
+  }
+
+  registerDataChange(callBack) {
+    this.callBack = callBack
+    this.onEvent(Constants.EVENT_ID_CHANGE_DATA);
+  }
+
+  private onEvent(eventId: number) {
+    let stateChangeEvent = {
+      eventId: eventId,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.off(eventId);
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  private static emitEvent(tag, eventId, eventData) {
+    let innerEvent = {
+      eventId: eventId,
+      priority: events_emitter.EventPriority.LOW
+    }
+    console.info(tag + ' start to publish emit');
+    events_emitter.emit(innerEvent, eventData);
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info('[stateChangCallBack] stateChangCallBack ');
+    if (eventData != null) {
+      console.info('[stateChangCallBack] state change called: ' + JSON.stringify(eventData));
+      if (eventData.data.src != null) {
+        let src = JSON.parse(eventData.data.src);
+        this.callBack(src.value);
+      }
+    }
+  }
+}
+
+let attrsManager = new AttrsManager();
+
+export default attrsManager as AttrsManager;
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/Utils.ets

+/*
+ * Copyright (c) 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 router from '@ohos.router';
+
+export default class Utils {
+  public static instance;
+
+  static sleep(time) {
+    return new Promise((resolve, reject) => {
+      try {
+        setTimeout(() => {
+          resolve(0)
+        }, time)
+      } catch (err) {
+        console.error('sleep error:' + err);
+        reject()
+      }
+    }).then(() => {
+      console.info(`sleep ${time} over...`)
+    })
+  }
+
+  static getStringFromFile(fileName): Promise<string> {
+    return globalThis.abilityContext
+      .resourceManager
+      .getRawFileContent(fileName)
+      .then(data => {
+        return new Promise((resolve, reject) => {
+          if (data) {
+            resolve(String.fromCharCode.apply(null, data))
+          } else {
+            reject('')
+          }
+        })
+      })
+  }
+
+  static async pushPage(obj) {
+    try {
+      let pages = router.getState();
+      console.info('get ' + obj.pageName + ' state pages: ' + JSON.stringify(pages));
+      if (!(obj.pageName == pages.name)) {
+        console.info('get ' + obj.pageName + ' state pages.name:' + JSON.stringify(pages.name));
+        let result = await router.pushUrl({
+          url: obj.pageUrl,
+          params: {
+            view: obj
+          }
+        });
+        await Utils.sleep(2000);
+        console.info('push ' + obj.pageName + ' page result:' + JSON.stringify(result));
+      }
+    } catch (err) {
+      console.error('push ' + obj.pageName + ' page error:' + err);
+    }
+  }
+
+  static async back() {
+    if (!('Index' == router.getState().name)) {
+      router.back()
+    }
+    await Utils.sleep(1000);
+    router.clear();
+  }
+
+  static getComponentRect(key) {
+    let strJson = getInspectorByKey(key);
+    let obj = JSON.parse(strJson);
+    console.info('[getInspectorByKey] key is: ' + key);
+    return Utils.getComponentRectByObj(obj);
+  }
+
+  static getComponentRectByObj(obj) {
+    console.info('[getInspectorByKey] current component is: ' + obj.$type);
+    let rectInfo = JSON.parse('[' + obj.$rect + ']');
+    let rect_value = {
+      'left': JSON.parse('[' + rectInfo[0] + ']')[0],
+      'top': JSON.parse('[' + rectInfo[0] + ']')[1],
+      'right': JSON.parse('[' + rectInfo[1] + ']')[0],
+      'bottom': JSON.parse('[' + rectInfo[1] + ']')[1]
+    };
+    console.info(JSON.stringify(rect_value));
+    return rect_value;
+  }
+
+  static getComponentByKey(componentKey) {
+    let strJson = getInspectorByKey(componentKey);
+    let obj = JSON.parse(strJson);
+    console.info('[' + componentKey + '] obj is: ' + JSON.stringify(obj));
+    return obj;
+  }
+
+  static getRectHorizontalCenterX(rect) {
+    (rect.right - rect.left) / 2 + rect.left;
+  }
+
+  static getRectVerticalCenterY(rect) {
+    (rect.bottom - rect.top) / 2 + rect.top;
+  }
+}
+
+
+
+

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/alignRules/AlignRulesPage.ets

+/*
+ * Copyright (c) 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 attrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+import { StepperView } from '../../view/alignRules/StepperView';
+
+/**
+ * Test page of common attribute:alignRules
+ */
+
+@Entry
+@Component
+struct AlignRules {
+  @State show: boolean = false //For Panel
+  @State _alignRules: Object = { center: { anchor: '__container__', align: VerticalAlign.Center },
+    middle: { anchor: '__container__', align: HorizontalAlign.Center } };
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+  @State subassemblyWidth: number = router.getParams() ? router.getParams()['view']['subassemblyWidth'] : 0
+  @State subassemblyHeight: number = router.getParams() ? router.getParams()['view']['subassemblyHeight'] : 0
+  @State subassemblyCenter: Object = router.getParams() ? router.getParams()['view']['subassemblyCenter'] : {}
+  @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
+  @State referenceComponentKey: string =
+    router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
+
+  onPageShow() {
+    console.info('[ButtonDimensionsOne] page show called ')
+
+    //Register data change call back.
+    attrsManager.registerDataChange(value => this._alignRules = value)
+  }
+  /**
+   * Set common style.
+   *
+   */
+  @Styles commonStyle(){
+    .alignRules(this._alignRules)
+    .id(this.componentKey)
+  }
+
+  build() {
+    RelativeContainer() {
+      //Set view by page config.
+      if (this.targetView == 'Button') {
+        Button('button1')
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Radio') {
+        Radio({ value: 'Radio1', group: 'radioGroup' })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Select') {
+        Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
+          { value: 'bbb', icon: '/common/public_icon.svg' }])
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Checkbox') {
+        Checkbox({ name: 'checkbox1' })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'CheckboxGroup') {
+        CheckboxGroup()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'DataPanel') {
+        DataPanel({ values: [25] })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'DatePicker') {
+        DatePicker({})
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Divider') {
+        Divider()
+          .strokeWidth(10)
+          .color(Color.Black)
+          .vertical(false)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Gauge') {
+        Gauge({ value: 0 })
+          .colors([[0x317AF7, 1], [0x9C554B, 1]])
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'LoadingProgress') {
+        LoadingProgress()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Marquee') {
+        Marquee({ start: true, src: 'Marquee' })
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Navigation') {
+        Navigation()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Image') {
+        Image($r('app.media.icon'))
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'ImageAnimator') {
+        ImageAnimator()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'AlphabetIndexer') {
+        AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Progress') {
+        Progress({ value: 10, type: ProgressType.Ring })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'QRCode') {
+        QRCode('Hello Harmony')
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Rating') {
+        Rating({ rating: 3.5 })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Search') {
+        Search()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Slider') {
+        Slider()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Text') {
+        Text('Text')
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'TextArea') {
+        TextArea()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'TextClock') {
+        TextClock()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'TextInput') {
+        TextInput()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'TextPicker') {
+        TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'TimePicker') {
+        TimePicker()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Toggle') {
+        Toggle({ type: ToggleType.Switch })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Badge') {
+        Badge({ value: '', style: { badgeSize: 6, badgeColor: Color.Red } }) {
+          Button('BadgeContent')
+        }
+        .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Column') {
+        Column()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Counter') {
+        Counter()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Flex') {
+        Flex()
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Grid') {
+        Grid() {
+          ForEach(['0', '1', '2', '3', '4'], () => {
+            ForEach(['0', '1', '2', '3', '4'], (day: string) => {
+              GridItem() {
+                Text(day).backgroundColor(Color.White)
+                  .width('100%').height('100%').textAlign(TextAlign.Center)
+              }
+            })
+          })
+        }
+        .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'GridRow') {
+        GridRow({
+          columns: 5,
+          gutter: { x: 5, y: 10 },
+          breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
+          direction: GridRowDirection.Row
+        }) {
+          ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown],
+            (color) => {
+              GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+                Row().width('100%').height('20vp')
+              }.borderColor(color).borderWidth(2)
+            })
+        }
+        .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'List') {
+        List()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'RelativeContainer') {
+        RelativeContainer() {
+          Row()
+            .width(100)
+            .height(100)
+            .backgroundColor('#FF3333')
+            .alignRules({
+              top: { anchor: '__container__', align: VerticalAlign.Top },
+              left: { anchor: '__container__', align: HorizontalAlign.Start }
+            })
+            .id('alignRules')
+        }
+        .backgroundColor(Color.Blue)
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .commonStyle()
+      } else if (this.targetView == 'Row') {
+        Row()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Scroll') {
+        Scroll() {
+          Column() {
+            ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
+              Text('Scroll' + item.toString())
+                .width('90%')
+                .height(150)
+                .backgroundColor(Color.White)
+                .textAlign(TextAlign.Center)
+            }, item => item)
+          }.width('100%')
+        }
+        .scrollBar(BarState.On)
+        .backgroundColor(Color.Blue)
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .commonStyle()
+      } else if (this.targetView == 'SideBarContainer') {
+        SideBarContainer(SideBarContainerType.Embed) {
+          Column() {
+            ForEach([1, 2, 3], (item) => {
+              Column({ space: 5 }) {
+                Image($r('app.media.icon')).width(64).height(64)
+                Text('Index0' + item).fontSize(25)
+              }
+            })
+          }.width('100%')
+          .justifyContent(FlexAlign.SpaceEvenly)
+          .backgroundColor(Color.Green)
+
+          Column() {
+            Text('SideBarContainer content').fontSize(25)
+          }.backgroundColor(Color.Orange)
+        }
+        .backgroundColor(Color.Blue)
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .commonStyle()
+      } else if (this.targetView == 'Stack') {
+        Stack()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Swiper') {
+        Swiper() {
+          ForEach([1, 2, 3], (item: string) => {
+            Text('Swiper' + item).width('90%').height(160)
+          }, item => item)
+        }
+        .indicator(true)
+        .backgroundColor(Color.White)
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .commonStyle()
+      } else if (this.targetView == 'Tabs') {
+        Tabs()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'WaterFlow') {
+        WaterFlow()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Circle') {
+        Circle()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Ellipse') {
+        Ellipse()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Line') {
+        Line()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Polyline') {
+        Polyline()
+          .points([[50, 10], [50, 50], [90, 90]])
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Polygon') {
+        Polygon()
+          .points([[50, 10], [50, 50], [90, 90]])
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Path') {
+        Path()
+          .commands('M100 0 L200 240 L0 240 Z')
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Rect') {
+        Rect()
+          .backgroundColor(Color.Blue)
+          .width(this.subassemblyWidth)
+          .height(this.subassemblyHeight)
+          .commonStyle()
+      } else if (this.targetView == 'Shape') {
+        Shape() {
+          Rect().width('100%').height('100%').id('Rect')
+        }
+        .backgroundColor(Color.Blue)
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .commonStyle()
+      } else if (this.targetView == 'Panel') {
+        Panel(this.show = true) {
+          Column() {
+          }
+        }
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .alignRules(this.subassemblyCenter)
+        .commonStyle()
+      } else if (this.targetView == 'Refresh') {
+        Refresh({ refreshing: false }) {
+          Text('Pull Down and refresh:0 ')
+        }
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .alignRules(this.subassemblyCenter)
+        .commonStyle()
+      } else if (this.targetView == 'RowSplit') {
+        RowSplit() {
+          Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+        }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'ColumnSplit') {
+        ColumnSplit() {
+          Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+        }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Navigator') {
+        Navigator() {
+          Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
+        }
+        .backgroundColor(Color.Blue)
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .commonStyle()
+      } else if (this.targetView == 'TextTimer') {
+        TextTimer({ isCountDown: true, count: 30000 })
+          .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle()
+      } else if (this.targetView == 'Stepper') {
+        StepperView({ _alignRules: $_alignRules,
+          subassemblyWidth: this.subassemblyWidth,
+          subassemblyHeight: this.subassemblyHeight,
+          componentKey: this.componentKey });
+      } else if (this.targetView == 'ScrollBar') {
+        ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
+          Text().width(20).height(100).borderRadius(10)
+            .backgroundColor('#C0C0C0')
+        }
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .backgroundColor('#ededed')
+        .commonStyle()
+      } else if (this.targetView == 'Menu') {
+        Menu() {
+          MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+        }
+        .backgroundColor(Color.Yellow)
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .commonStyle()
+      }
+      Button('button')
+        .width(this.subassemblyWidth)
+        .height(this.subassemblyHeight)
+        .alignRules(this.subassemblyCenter)
+        .id(this.referenceComponentKey)
+    }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/constraintSize/ConstraintSizePage.ets

+/*
+ * Copyright (c) 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 AttrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct ConstraintSizePage {
+  @State _constraintSize: ConstraintSizeOptions = {
+    minWidth: 0,
+    maxWidth: Infinity,
+    minHeight: 0,
+    maxHeight: Infinity
+  };
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0
+  @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0
+  @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
+
+  onPageShow() {
+    console.info('ConstraintSize page show called ')
+    AttrsManager.registerDataChange(value => this._constraintSize = value)
+  }
+
+  @Styles commonStyle(){
+    .constraintSize(this._constraintSize)
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .key(this.componentKey)
+  }
+
+  build() {
+    Row() {
+      Column() {
+        if (this.targetView == 'Button') {
+          Button('button1').commonStyle()
+        } else if (this.targetView == 'Text') {
+          Text('text1').commonStyle()
+        } else if (this.targetView == 'AlphabetIndexer') {
+          AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
+        } else if (this.targetView == 'Blank') {
+          Blank().backgroundColor(Color.Yellow).commonStyle()
+        } else if (this.targetView == 'Checkbox') {
+          Checkbox().commonStyle()
+        } else if (this.targetView == 'CheckboxGroup') {
+          CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
+        } else if (this.targetView == 'DataPanel') {
+          DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle()
+        } else if (this.targetView == 'DatePicker') {
+          DatePicker({
+            start: new Date('1970-1-1'),
+            end: new Date('2100-1-1'),
+          }).commonStyle()
+        } else if (this.targetView == 'Divider') {
+          Divider().commonStyle()
+        } else if (this.targetView == 'Gauge') {
+          Gauge({ value: 105 })
+            .commonStyle()
+            .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+        } else if (this.targetView == 'Image') {
+          Image($r('app.media.icon')).commonStyle()
+        } else if (this.targetView == 'ImageAnimator') {
+          ImageAnimator()
+            .images([
+              {
+                src: $r('app.media.icon')
+              }
+            ]).commonStyle()
+        } else if (this.targetView == 'LoadingProgress') {
+          LoadingProgress().commonStyle()
+        } else if (this.targetView == 'Marquee') {
+          Marquee({
+            start: true,
+            step: 50,
+            loop: Infinity,
+            fromStart: true,
+            src: 'Running Marquee starts rolling'
+          }).commonStyle()
+        } else if (this.targetView == 'Navigation') {
+          Navigation() {
+          }.commonStyle()
+        } else if (this.targetView == 'Menu') {
+          Menu() {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+          }.backgroundColor(Color.Yellow).commonStyle()
+        } else if (this.targetView == 'NavRouter') {
+          NavRouter() {
+            Row() {
+              Image($r('app.media.icon'))
+            }
+
+            NavDestination() {
+              Text('NavDestination').fontSize(10)
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'Progress') {
+          Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle()
+        } else if (this.targetView == 'QRCode') {
+          QRCode('Running Marquee starts rolling').commonStyle()
+        } else if (this.targetView == 'Radio') {
+          Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
+        } else if (this.targetView == 'Rating') {
+          Rating({ rating: 3.5, indicator: false }).commonStyle()
+        } else if (this.targetView == 'ScrollBar') {
+          ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
+            Text()
+              .width(20)
+              .height(100)
+              .borderRadius(10)
+              .backgroundColor('#C0C0C0')
+          }.commonStyle()
+        } else if (this.targetView == 'Search') {
+          Search().commonStyle()
+        } else if (this.targetView == 'Select') {
+          Select([{ value: 'aaa' },
+            { value: 'bbb' }]).commonStyle()
+        } else if (this.targetView == 'Slider') {
+          Slider({
+            value: 50,
+            min: 0,
+            max: 100,
+            style: SliderStyle.OutSet
+          })
+            .showTips(true)
+            .commonStyle()
+        } else if (this.targetView == 'Stepper') {
+          Stepper() {
+            StepperItem() {
+              Column() {
+                Text('Page One')
+              }
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'TextArea') {
+          TextArea({
+            placeholder: 'The text area can hold an unlimited amount of text. input your word...'
+          }).commonStyle()
+        } else if (this.targetView == 'TextClock') {
+          TextClock({ timeZoneOffset: -8 })
+            .format('hms')
+            .commonStyle()
+        } else if (this.targetView == 'TextInput') {
+          TextInput({ placeholder: 'input your word...' }).commonStyle()
+        } else if (this.targetView == 'TextPicker') {
+          TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle()
+        } else if (this.targetView == 'TextTimer') {
+          TextTimer({ isCountDown: true, count: 30000 })
+            .format('mm:ss.SS')
+            .fontColor(Color.Black)
+            .commonStyle()
+        } else if (this.targetView == 'TimePicker') {
+          TimePicker({
+            selected: new Date('2022-07-22T08:00:00'),
+          }).commonStyle()
+        } else if (this.targetView == 'Toggle') {
+          Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle()
+        } else if (this.targetView == 'Web') {
+          Web({ src: 'www.example.com', controller: new WebController() }).commonStyle()
+        } else if (this.targetView == 'Circle') {
+          Circle().commonStyle()
+        } else if (this.targetView == 'Ellipse') {
+          Ellipse().commonStyle()
+        } else if (this.targetView == 'Line') {
+          Line()
+            .commonStyle()
+            .startPoint([0, 0])
+            .endPoint([50, 100])
+            .backgroundColor(Color.Black)
+        } else if (this.targetView == 'Polyline') {
+          Polyline().commonStyle()
+        } else if (this.targetView == 'Polygon') {
+          Polygon().commonStyle()
+        } else if (this.targetView == 'Path') {
+          Path().commonStyle()
+        } else if (this.targetView == 'Rect') {
+          Rect().commonStyle()
+        } else if (this.targetView == 'Shape') {
+          Shape() {
+            Rect().width(100).height(50)
+          }.commonStyle()
+        } else if (this.targetView == 'Badge') {
+          Badge({
+            count: 50,
+            style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+          }) {
+            Button('message')
+              .width(100).height(50).backgroundColor(0x317aff)
+          }.commonStyle()
+        } else if (this.targetView == 'Column') {
+          Column() {
+            Column().width('100%').height(30).backgroundColor(0xAFEEEE)
+          }.commonStyle()
+        } else if (this.targetView == 'ColumnSplit') {
+          ColumnSplit() {
+            Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          }.commonStyle()
+        } else if (this.targetView == 'Counter') {
+          Counter() {
+          }.commonStyle()
+        } else if (this.targetView == 'Flex') {
+          Flex() {
+            Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
+          }.commonStyle()
+        } else if (this.targetView == 'GridRow') {
+          GridRow({
+            columns: 1,
+            direction: GridRowDirection.Row
+          }) {
+            ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => {
+              GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+                Row().width('100%').height('20vp')
+              }.borderColor(color).borderWidth(2)
+            })
+          }.commonStyle()
+        } else if (this.targetView == 'Grid') {
+          Grid() {
+            ForEach(['0', '1', '2', '3', '4'], () => {
+              ForEach(['0', '1', '2', '3', '4'], (day: string) => {
+                GridItem() {
+                  Text(day).backgroundColor(Color.White)
+                    .width('100%').height('100%').textAlign(TextAlign.Center)
+                }
+              })
+            })
+          }
+          .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
+          .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
+          .commonStyle()
+          .backgroundColor(0xFAEEE0)
+        } else if (this.targetView == 'GridItem') {
+          Grid() {
+            GridItem() {
+              Text('4')
+                .backgroundColor(0xFAEEE0)
+                .width('100%')
+                .height('100%')
+                .textAlign(TextAlign.Center)
+            }.rowStart(1).rowEnd(4).commonStyle()
+          }
+        } else if (this.targetView == 'List') {
+          List() {
+          }.commonStyle()
+        } else if (this.targetView == 'ListItem') {
+          List({ space: 20, initialIndex: 0 }) {
+            ListItem() {
+              Text('item1')
+                .width('100%')
+                .textAlign(TextAlign.Center)
+                .backgroundColor(Color.White)
+            }.commonStyle()
+          }
+          .width(400)
+          .height(400)
+        } else if (this.targetView == 'ListItemGroup') {
+          List({ space: 0, initialIndex: 0 }) {
+            ListItemGroup()
+              .backgroundColor(Color.Yellow)
+              .commonStyle()
+          }.backgroundColor(Color.Pink)
+          .width(400)
+          .height(400)
+        } else if (this.targetView == 'Navigator') {
+          Navigator() {
+            Text('Go to back page').width('100%').height(20)
+          }.commonStyle().backgroundColor(Color.Red)
+        } else if (this.targetView == 'Panel') {
+          Panel(true) {
+            Text('Text')
+          }.backgroundColor(Color.Yellow).commonStyle()
+        } else if (this.targetView == 'Refresh') {
+          Refresh({ refreshing: true }) {
+            Text('123')
+          }.commonStyle()
+        } else if (this.targetView == 'RelativeContainer') {
+          RelativeContainer() {
+            Row()
+              .width(100)
+              .height(100)
+              .backgroundColor('#FF3333')
+              .alignRules({
+                top: { anchor: '__container__', align: VerticalAlign.Top },
+                left: { anchor: '__container__', align: HorizontalAlign.Start }
+              })
+              .id('constraintSize')
+          }.commonStyle()
+        } else if (this.targetView == 'Row') {
+          Row().commonStyle()
+        } else if (this.targetView == 'RowSplit') {
+          RowSplit() {
+            Text('Text')
+          }.commonStyle()
+        } else if (this.targetView == 'Scroll') {
+          Scroll() {
+            Column() {
+              ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
+                Text('Scroll' + item.toString())
+                  .width('90%')
+                  .height(50)
+                  .backgroundColor(Color.White)
+                  .textAlign(TextAlign.Center)
+              }, item => item)
+            }.width('100%')
+          }.scrollBar(BarState.On).commonStyle()
+        } else if (this.targetView == 'SideBarContainer') {
+          SideBarContainer(SideBarContainerType.Embed) {
+            Column() {
+              ForEach([1, 2, 3], (item) => {
+                Column({ space: 5 }) {
+                  Image($r('app.media.icon')).width(50).height(50)
+                  Text('Index0' + item).fontSize(25)
+                }
+              })
+            }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green)
+
+            Column() {
+              Text('SideBarContainer content').fontSize(25)
+            }.backgroundColor(Color.Orange)
+          }.commonStyle()
+        } else if (this.targetView == 'Stack') {
+          Stack() {
+          }.commonStyle()
+        } else if (this.targetView == 'Swiper') {
+          Swiper() {
+            ForEach([1, 2, 3], (item: string) => {
+              Text('Swiper' + item).width('90%').height(50)
+            }, item => item)
+          }
+          .indicator(true)
+          .backgroundColor(Color.White)
+          .commonStyle()
+        } else if (this.targetView == 'Tabs') {
+          Tabs() {
+            TabContent() {
+              Column().width('100%').height('100%').backgroundColor('#00CB87')
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'TabContent') {
+          Tabs() {
+            TabContent() {
+              Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White)
+            }.tabBar('Tabs1').commonStyle()
+
+            TabContent() {
+              Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White)
+            }.tabBar('Tabs2').key(this.referenceComponentKey)
+          }
+        } else if (this.targetView == 'WaterFlow') {
+          WaterFlow() {
+            ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
+              FlowItem() {
+                Column() {
+                  Text('WaterFlow' + item).fontSize(12).height('16')
+                  Image($r('app.media.icon'))
+                    .width(50)
+                    .height(50)
+                    .objectFit(ImageFit.Fill)
+                }
+              }
+            }, item => item)
+          }.commonStyle()
+        } else if (this.targetView == 'StepperItem') {
+          Stepper() {
+            StepperItem() {
+              Column() {
+                Text('Page One')
+              }
+            }
+            .backgroundColor(Color.Red)
+            .commonStyle()
+          }
+          .backgroundColor(Color.Yellow)
+          .width(400)
+          .height(400)
+        } else if (this.targetView == 'GridCol') {
+          GridRow({
+            columns: 1,
+            direction: GridRowDirection.Row
+          }) {
+            GridCol() {
+              Row().width('100%').height('20vp')
+            }
+            .commonStyle()
+            .backgroundColor(Color.Yellow)
+          }
+          .backgroundColor(Color.Pink)
+          .width(400)
+          .height(400)
+        } else if (this.targetView == 'FlowItem') {
+          WaterFlow() {
+            ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
+              FlowItem() {
+                Column() {
+                  Text('WaterFlow' + item).fontSize(12).height('16')
+                  Image($r('app.media.icon'))
+                    .width(50)
+                    .height(50)
+                    .objectFit(ImageFit.Fill)
+                }
+              }
+              .commonStyle()
+              .backgroundColor(Color.Yellow)
+            }, item => item)
+          }
+          .backgroundColor(Color.Pink)
+          .width(400)
+          .height(400)
+        } else if (this.targetView == 'GridItem') {
+          Grid() {
+            GridItem() {
+              Text('4')
+                .backgroundColor(0xFAEEE0)
+                .width('100%')
+                .height('100%')
+                .textAlign(TextAlign.Center)
+            }.rowStart(1).rowEnd(4)
+            .commonStyle()
+            .backgroundColor(Color.Yellow)
+          }
+          .backgroundColor(Color.Pink)
+          .width(400)
+          .height(400)
+        } else if (this.targetView == 'MenuItem') {
+          Row() {
+            Menu() {
+              MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+                .commonStyle()
+            }.backgroundColor(Color.Yellow)
+            .width(400)
+            .height(400)
+          }.width('100%').height('100%').backgroundColor(Color.Green)
+        } else if (this.targetView == 'MenuItemGroup') {
+          Row() {
+            Menu() {
+              MenuItemGroup({ header: 'MenuItemGroup' }) {
+                MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+              }
+              .commonStyle()
+            }.backgroundColor(Color.Yellow)
+            .width(400)
+            .height(400)
+          }.width('100%').height('100%').backgroundColor(Color.Green)
+        }
+      }
+      .backgroundColor(Color.Pink)
+
+    }.backgroundColor(Color.Yellow)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultPage.ets

+/*
+ * Copyright (c) 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 router from '@ohos.router'
+
+@Entry
+@Component
+struct DefaultPage {
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker
+  private Marquee_src: string = 'Running Marquee starts rolling A B C D E F G H I J K L'; //Use by Marquee QRCode
+  controller: WebController = new WebController() //Use by Web
+  textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer
+  private scroller: Scroller = new Scroller() //Use by ScrollBar Scroll
+
+  onPageShow() {
+    console.info('DefaultPage show called ')
+  }
+
+  /*
+   * Set common style.
+   */
+  @Styles commonStyle(){
+    .key(this.componentKey)
+  }
+
+  //Draw screen
+  build() {
+    Row() {
+      if (this.targetView == 'AlphabetIndexer') {
+        AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle()
+      } else if (this.targetView == 'Blank') {
+        Blank().commonStyle()
+      } else if (this.targetView == 'Button') {
+        Button('button').commonStyle()
+      } else if (this.targetView == 'Checkbox') {
+        Checkbox().commonStyle()
+      } else if (this.targetView == 'CheckboxGroup') {
+        CheckboxGroup().commonStyle()
+      } else if (this.targetView == 'DataPanel') {
+        DataPanel({ values: [25] }).commonStyle()
+      } else if (this.targetView == 'DatePicker') {
+        DatePicker().commonStyle()
+      } else if (this.targetView == 'Divider') {
+        Divider().commonStyle()
+      } else if (this.targetView == 'Gauge') {
+        Gauge({ value: 75 }).commonStyle()
+      } else if (this.targetView == 'Image') {
+        Image($r('app.media.icon')).commonStyle()
+      } else if (this.targetView == 'ImageAnimator') {
+        ImageAnimator()
+          .images([{ src: $r('app.media.icon') }])
+          .commonStyle()
+      } else if (this.targetView == 'LoadingProgress') {
+        LoadingProgress().commonStyle()
+      } else if (this.targetView == 'Marquee') {
+        Marquee({
+          start: true,
+          src: this.Marquee_src
+        }).commonStyle()
+      } else if (this.targetView == 'Menu') {
+        Menu() {
+          MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+        }.commonStyle()
+      } else if (this.targetView == 'MenuItem') {
+        Menu() {
+          MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle()
+        }
+      } else if (this.targetView == 'MenuItemGroup') {
+        Menu() {
+          MenuItemGroup({ header: 'MenuItemGroup' }) {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+          }.commonStyle()
+        }
+      } else if (this.targetView == 'Navigation') {
+        Navigation().commonStyle()
+      } else if (this.targetView == 'NavRouter') {
+        NavRouter().commonStyle()
+      } else if (this.targetView == 'Progress') {
+        Progress({ value: 20 }).commonStyle()
+      } else if (this.targetView == 'QRCode') {
+        QRCode(this.Marquee_src).commonStyle()
+      } else if (this.targetView == 'Radio') {
+        Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
+      } else if (this.targetView == 'Rating') {
+        Rating().commonStyle()
+      } else if (this.targetView == 'RichText') {
+        RichText('RichText').commonStyle()
+      } else if (this.targetView == 'ScrollBar') {
+        ScrollBar({ scroller: this.scroller }).commonStyle()
+      } else if (this.targetView == 'Search') {
+        Search().commonStyle()
+      } else if (this.targetView == 'Select') {
+        Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]).commonStyle()
+      } else if (this.targetView == 'Slider') {
+        Slider().commonStyle()
+      } else if (this.targetView == 'Stepper') {
+        Stepper() {
+          StepperItem()
+        }.commonStyle()
+      } else if (this.targetView == 'StepperItem') {
+        Stepper() {
+          StepperItem().commonStyle()
+        }
+      } else if (this.targetView == 'Text') {
+        Text('text').commonStyle()
+      } else if (this.targetView == 'TextArea') {
+        TextArea().commonStyle()
+      } else if (this.targetView == 'TextClock') {
+        TextClock().commonStyle()
+      } else if (this.targetView == 'TextInput') {
+        TextInput().commonStyle()
+      } else if (this.targetView == 'TextPicker') {
+        TextPicker({ range: this.value }).commonStyle()
+      } else if (this.targetView == 'TextTimer') {
+        TextTimer({ controller: this.textTimerController }).commonStyle()
+      } else if (this.targetView == 'TimePicker') {
+        TimePicker().commonStyle()
+      } else if (this.targetView == 'Toggle') {
+        Toggle({ type: ToggleType.Switch }).commonStyle()
+      } else if (this.targetView == 'Web') {
+        Web({ src: 'www.example.com', controller: this.controller }).commonStyle()
+      } else if (this.targetView == 'Badge') {
+        Badge({
+          value: '',
+          style: { badgeSize: 6, badgeColor: '#FA2A2D' }
+        }).commonStyle()
+      } else if (this.targetView == 'Column') {
+        Column().commonStyle()
+      } else if (this.targetView == 'ColumnSplit') {
+        ColumnSplit() {
+          Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+          Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+        }.commonStyle()
+      } else if (this.targetView == 'Counter') {
+        Counter().commonStyle()
+      } else if (this.targetView == 'Flex') {
+        Flex().commonStyle()
+      } else if (this.targetView == 'FlowItem') {
+        WaterFlow() {
+          FlowItem().commonStyle()
+        }
+      } else if (this.targetView == 'GridCol') {
+        GridRow() {
+          GridCol().commonStyle()
+        }
+      } else if (this.targetView == 'GridRow') {
+        GridRow().commonStyle()
+      } else if (this.targetView == 'Grid') {
+        Grid().commonStyle()
+      } else if (this.targetView == 'GridItem') {
+        Grid() {
+          GridItem().commonStyle()
+        }
+      } else if (this.targetView == 'List') {
+        List().commonStyle().width(100).height(100)
+      } else if (this.targetView == 'ListItem') {
+        List() {
+          ListItem()
+            .commonStyle()
+        }.width(100).height(100)
+      } else if (this.targetView == 'ListItemGroup') {
+        List() {
+          ListItemGroup()
+            .commonStyle()
+        }.width(100).height(100)
+      } else if (this.targetView == 'Navigator') {
+        Navigator().commonStyle()
+      } else if (this.targetView == 'Panel') {
+        Panel(true).commonStyle()
+      } else if (this.targetView == 'Refresh') {
+        Refresh({ refreshing: false }).commonStyle()
+      } else if (this.targetView == 'RelativeContainer') {
+        RelativeContainer().commonStyle()
+      } else if (this.targetView == 'Row') {
+        Row().commonStyle()
+      } else if (this.targetView == 'RowSplit') {
+        RowSplit() {
+          Text('1')
+          Text('2')
+        }.commonStyle()
+      } else if (this.targetView == 'Scroll') {
+        Scroll(this.scroller).commonStyle()
+      } else if (this.targetView == 'SideBarContainer') {
+        SideBarContainer(SideBarContainerType.Embed).commonStyle()
+      } else if (this.targetView == 'Stack') {
+        Stack().commonStyle()
+      } else if (this.targetView == 'Swiper') {
+        Swiper().commonStyle()
+      } else if (this.targetView == 'Tabs') {
+        Tabs().commonStyle()
+      } else if (this.targetView == 'TabContent') {
+        Tabs() {
+          TabContent().commonStyle()
+        }
+      } else if (this.targetView == 'WaterFlow') {
+        WaterFlow().commonStyle()
+      } else if (this.targetView == 'Circle') {
+        Circle().commonStyle()
+      } else if (this.targetView == 'Ellipse') {
+        Ellipse().commonStyle()
+      } else if (this.targetView == 'Line') {
+        Line()
+          .startPoint([0, 0])
+          .endPoint([50, 100])
+          .commonStyle()
+      } else if (this.targetView == 'Polyline') {
+        Polyline().commonStyle()
+      } else if (this.targetView == 'Polygon') {
+        Polygon().commonStyle()
+      } else if (this.targetView == 'Path') {
+        Path().commonStyle()
+      } else if (this.targetView == 'Rect') {
+        Rect().commonStyle()
+      } else if (this.targetView == 'Shape') {
+        Shape().commonStyle()
+      }
+    }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/height/HeightPage.ets

+/*
+ * Copyright (c) 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 attrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct heightPage {
+  //Use for TimePicker.
+  private selectedTime: Date = new Date('2022-07-22T08:00:00')
+  //Use for QRCode,Marquee.
+  private src: string = 'Running Marquee starts rolling'
+  //Use for AlphabetIndexer,TextPicker.
+  private value: string[] = ['#', 'A', 'B']
+  //Use for Scroll,Grid,DataPanel.
+  public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10]
+  @State _height: number | string = 0
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+  @State parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : ''
+  @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
+  @State BackGroundColor: string = router.getParams() ? router.getParams()['view']['BackGroundColor'] : ''
+
+  onPageShow() {
+    console.info('height page show called ')
+    attrsManager.registerDataChange(value => this._height = value.height)
+  }
+
+  @Styles commonStyle(){
+    .height(this._height)
+    .key(this.componentKey)
+  }
+
+  build() {
+    Column() {
+      if (this.targetView == 'Button') {
+        Button('button1').commonStyle().width(100)
+      } else if (this.targetView == 'Text') {
+        Text('text1').commonStyle().width(100)
+      } else if (this.targetView == 'AlphabetIndexer') {
+        AlphabetIndexer({ arrayValue: this.value, selected: 0 })
+          .commonStyle().width(100)
+      } else if (this.targetView == 'BlankRow') {
+        Row() {
+          Blank().color(this.BackGroundColor).commonStyle()
+        }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'BlankColumn') {
+        Blank().color(this.BackGroundColor).commonStyle().width(100)
+      } else if (this.targetView == 'Checkbox') {
+        Checkbox().backgroundColor(this.BackGroundColor).commonStyle().width(100)
+      } else if (this.targetView == 'CheckboxGroup') {
+        CheckboxGroup({ group: 'checkboxGroup' }).commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'DataPanel') {
+        DataPanel({ values: this.valueArr }).commonStyle().width(100)
+      } else if (this.targetView == 'DatePicker') {
+        DatePicker({
+          start: new Date('1970-1-1'),
+          end: new Date('2100-1-1')
+        }).commonStyle().width(100)
+      } else if (this.targetView == 'Divider') {
+        Divider().strokeWidth(8).color(Color.Red).commonStyle().width(100)
+      } else if (this.targetView == 'Gauge') {
+        Gauge({ value: 105 }).commonStyle().colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+          .width(100)
+      } else if (this.targetView == 'Image') {
+        Image($r('app.media.icon')).commonStyle().width(110).backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'ImageAnimator') {
+        ImageAnimator()
+          .images([
+            {
+              src: $r('app.media.icon')
+            }
+          ]).commonStyle().width(100)
+      } else if (this.targetView == 'LoadingProgress') {
+        LoadingProgress().backgroundColor(this.BackGroundColor).commonStyle().width(100)
+      } else if (this.targetView == 'Marquee') {
+        Marquee({
+          start: true,
+          step: 50,
+          loop: Infinity,
+          fromStart: true,
+          src: this.src
+        }).commonStyle().width(100)
+      } else if (this.targetView == 'Navigation') {
+        Navigation().commonStyle().width(100)
+      } else if (this.targetView == 'NavRouter') {
+        NavRouter().commonStyle().width(100)
+      } else if (this.targetView == 'Progress') {
+        Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle().width(100)
+      } else if (this.targetView == 'QRCode') {
+        QRCode(this.src).commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'Radio') {
+        Radio({ value: 'Radio1', group: 'radioGroup' }).width(100).commonStyle().backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'Rating') {
+        Rating({ rating: 3.5 }).commonStyle().width(100)
+      } else if (this.targetView == 'RichText') {
+        RichText('RichText').commonStyle().width(100).backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'ScrollBar') {
+        ScrollBar({ scroller: new Scroller() }) {
+          Text().width(10).height(50).backgroundColor('#C0C0C0')
+        }.commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'Search') {
+        Search().commonStyle().width(100)
+      } else if (this.targetView == 'Select') {
+        Select([{ value: 'aaa' },
+          { value: 'bbb' }]).backgroundColor(this.BackGroundColor).commonStyle().width(100)
+      } else if (this.targetView == 'Slider') {
+        Slider({
+          value: 50
+        }).showTips(true).commonStyle().width(100)
+      } else if (this.targetView == 'TextArea') {
+        TextArea({ placeholder: 'TextArea' }).commonStyle().width(100)
+      } else if (this.targetView == 'TextClock') {
+        TextClock({ timeZoneOffset: -8 }).format('hms').fontSize(30)
+          .commonStyle()
+          .backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'TextInput') {
+        TextInput({ placeholder: 'input your word...' })
+          .commonStyle().width(100)
+      } else if (this.targetView == 'TextPicker') {
+        TextPicker({ range: this.value }).commonStyle().width(100)
+      } else if (this.targetView == 'TextTimer') {
+        TextTimer({ isCountDown: true, count: 30000 }).format('mm:ss.SS')
+          .commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'TimePicker') {
+        TimePicker({
+          selected: this.selectedTime
+        }).useMilitaryTime(true).commonStyle().width(100)
+      } else if (this.targetView == 'Toggle') {
+        Toggle({ type: ToggleType.Switch }).commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'Web') {
+        Web({ src: 'www.example.com', controller: new WebController() }).commonStyle().width(100)
+      } else if (this.targetView == 'Circle') {
+        Circle().commonStyle().width(100)
+      } else if (this.targetView == 'Ellipse') {
+        Ellipse().commonStyle().width(100)
+      } else if (this.targetView == 'Line') {
+        Line()
+          .startPoint([0, 0])
+          .endPoint([50, 100])
+          .commonStyle()
+          .width(100)
+          .backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'Polyline') {
+        Polyline()
+          .commonStyle().width(100).points([[20, 0], [0, 100], [100, 90]]).backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'Polygon') {
+        Polygon()
+          .commonStyle()
+          .width(100)
+          .points([[0, 0], [0, 100], [100, 100], [100, 0]])
+          .backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'Path') {
+        Path().commonStyle().width(100).backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'Rect') {
+        Rect().commonStyle().width(100)
+      } else if (this.targetView == 'Shape') {
+        Shape() {
+          Rect().width(100).height(50)
+        }.commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'Badge') {
+        Badge({
+          count: 50,
+          style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+        }) {
+          Button('message')
+        }.commonStyle().width(100)
+      } else if (this.targetView == 'Column') {
+        Column() {
+          Column().width('100%').height(30).backgroundColor(0xAFEEEE)
+        }.commonStyle().width(100)
+      } else if (this.targetView == 'ColumnSplit') {
+        Column() {
+          ColumnSplit() {
+            Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          }.commonStyle().width(100)
+        }
+      } else if (this.targetView == 'Counter') {
+        Counter() {}.commonStyle().width(100)
+      } else if (this.targetView == 'Flex') {
+        Flex() {
+          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
+        }.commonStyle().width(100)
+      } else if (this.targetView == 'GridRow') {
+        GridRow({
+          columns: 5,
+          gutter: { x: 5, y: 10 },
+          breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
+          direction: GridRowDirection.Row
+        }) {
+          ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink], (color) => {
+            GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+              Row().width('100%').height('20vp')
+            }.borderColor(color).borderWidth(2)
+          })
+        }.commonStyle().width(100)
+      } else if (this.targetView == 'Grid') {
+        Grid() {
+          ForEach(this.valueArr, (day: string) => {
+            GridItem() {
+              Text(day)
+            }
+          }, day => day)
+        }.columnsTemplate('1fr 1fr 1fr 1fr 1fr').commonStyle().width(100).backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'List') {
+        List() {
+        }.commonStyle().width(200).backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'ListItem') {
+        List() {
+          ListItem() {
+          }.commonStyle()
+        }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'Panel') {
+        Panel(true) {
+          Column() {
+          }
+        }.commonStyle().width(100)
+      } else if (this.targetView == 'Refresh') {
+        Refresh({ refreshing: false }) {
+          Text('Pull Down and refresh:0 ')
+        }.commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'Row') {
+        Row() {
+          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+        }.commonStyle().width(100).backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'RowSplit') {
+        RowSplit() {
+          Text('1').width('20%').height(100).backgroundColor(0xF5DEB3)
+        }.commonStyle().width(100)
+      } else if (this.targetView == 'Scroll') {
+        Scroll() {
+          List() {
+            ForEach(this.valueArr, (item) => {
+              ListItem() {
+                Text('ListItem' + item)
+              }.width('100%').height(100)
+            }, item => item)
+          }.width(200).height(200)
+        }.commonStyle().width(100).backgroundColor(this.BackGroundColor)
+      } else if (this.targetView == 'SideBarContainer') {
+        SideBarContainer(SideBarContainerType.Embed) {
+          Column() {
+            ForEach([1, 2, 3], (item) => {
+              Column({ space: 5 }) {
+                Image($r('app.media.icon')).width(50).height(50)
+                Text('Index0' + item).fontSize(25)
+              }
+            })
+          }.width('100%')
+          .justifyContent(FlexAlign.SpaceEvenly)
+          .backgroundColor(Color.Green)
+
+          Column() {
+            Text('SideBarContainer content').fontSize(25)
+          }.backgroundColor(Color.Orange)
+        }.commonStyle()
+      } else if (this.targetView == 'Stack') {
+        Stack() {}.commonStyle().width(100)
+      } else if (this.targetView == 'Swiper') {
+        Swiper() {
+          ForEach([1, 2, 3], (item: string) => {
+            Text('Swiper' + item).width('90%').height(50)
+          }, item => item)
+        }.indicator(true).commonStyle().width(100)
+      } else if (this.targetView == 'Tabs') {
+        Tabs() {
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor('#00CB87')
+          }
+        }.commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      } else if (this.targetView == 'WaterFlow') {
+        WaterFlow().commonStyle().backgroundColor(this.BackGroundColor).width(100)
+      }
+      else if (this.targetView == 'Stepper') {
+        Stepper() {
+          StepperItem()
+        }.commonStyle().width(100)
+      } else if (this.targetView == 'StepperItem') {
+        Stepper() {
+          StepperItem() {
+            Text('Page One')
+          }.commonStyle()
+        }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight)
+      } else if (this.targetView == 'FlowItem') {
+        WaterFlow() {
+          FlowItem().commonStyle()
+        }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight)
+      } else if (this.targetView == 'GridCol') {
+        GridRow() {
+          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+            Row().width('100%').height('20vp')
+          }.commonStyle()
+        }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight)
+      } else if (this.targetView == 'GridItem') {
+        Grid() {
+          GridItem().commonStyle()
+        }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight)
+      } else if (this.targetView == 'RelativeContainer') {
+        RelativeContainer() {
+          Row()
+            .width('100%')
+            .height('100%')
+            .backgroundColor('#FF3333')
+            .alignRules({
+              center: { anchor: '__container__', align: VerticalAlign.Center },
+              middle: { anchor: '__container__', align: HorizontalAlign.Center }
+            })
+        }.backgroundColor(Color.Green).commonStyle().width(100)
+      } else if (this.targetView == 'Navigator') {
+        Navigator().commonStyle().width(100)
+      } else if (this.targetView == 'Menu') {
+        Menu() {
+          MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+        }.backgroundColor(Color.Yellow).commonStyle().width(100)
+      } else if (this.targetView == 'MenuItem') {
+        Row() {
+          Menu() {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+              .height(this._height)
+              .key(this.componentKey)
+          }.backgroundColor(this.BackGroundColor)
+          .width(this.parentWidth)
+          .height(this.parentHeight).key(this.parentComponentKey)
+        }
+      } else if (this.targetView == 'MenuItemGroup') {
+        Row() {
+          Menu() {
+            MenuItemGroup({ header: 'MenuItemGroup' }) {
+              MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+            }.key(this.componentKey).height(this._height)
+          }.backgroundColor(Color.Yellow)
+          .height(this.parentHeight)
+          .width(this.parentWidth).key(this.parentComponentKey)
+        }
+      }
+    }
+    .height(this.parentHeight)
+    .width(this.parentWidth)
+    .backgroundColor(this.parentBackGroundColor)
+    .key(this.parentComponentKey)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/index/Index.ets

+/*
+ * Copyright (c) 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 AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry'
+import { Hypium } from '@ohos/hypium'
+import testsuite from '../../../test/List.test';
+
+@Entry
+@Component
+struct Index {
+  aboutToAppear() {
+    console.info('start run testcase!!!!')
+    let abilityDelegator: any
+    abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
+    let abilityDelegatorArguments: any
+    abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
+    console.info('start run testcase!!!')
+    Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite)
+  }
+
+  build() {
+    Flex({
+      direction: FlexDirection.Column,
+      alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center
+    }) {
+      Text('ACE ETS TEST')
+        .fontSize(50)
+        .fontWeight(FontWeight.Bold)
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPage.ets

+/*
+ * Copyright (c) 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 AttrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct LayoutWeightPage {
+  @State _layoutWeight: number | string = 0;
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0
+  @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+
+  onPageShow() {
+    console.info('LayoutWeight page show called ')
+    AttrsManager.registerDataChange(value => this._layoutWeight = value.layoutWeight)
+  }
+
+  @Styles commonStyle(){
+    .layoutWeight(this._layoutWeight)
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .key(this.componentKey)
+  }
+
+  @Styles sizeProperty(){
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .layoutWeight(1)
+  }
+
+  build() {
+    Row() {
+      Column() {
+        if (this.targetView == 'AlphabetIndexer') {
+          AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
+        } else if (this.targetView == 'Text') {
+          Text('text1').commonStyle()
+        } else if (this.targetView == 'Blank') {
+          Blank().color(Color.Red).commonStyle()
+        } else if (this.targetView == 'Button') {
+          Button('button1').commonStyle()
+        } else if (this.targetView == 'Checkbox') {
+          Checkbox().select(true).selectedColor(Color.Red).commonStyle()
+        } else if (this.targetView == 'CheckboxGroup') {
+          CheckboxGroup({ group: 'checkboxGroup' }).selectedColor('#ffcd175f').commonStyle()
+        } else if (this.targetView == 'DataPanel') {
+          DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10], max: 100, type: DataPanelType.Line }).commonStyle()
+        } else if (this.targetView == 'DatePicker') {
+          DatePicker({
+            start: new Date('1970-1-1'),
+            end: new Date('2100-1-1'),
+          }).commonStyle()
+        } else if (this.targetView == 'Divider') {
+          Text('1').commonStyle()
+        } else if (this.targetView == 'Gauge') {
+          Gauge({ value: 105 }).commonStyle().colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+        } else if (this.targetView == 'Image') {
+          Image($r('app.media.icon')).commonStyle()
+        } else if (this.targetView == 'ImageAnimator') {
+          ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
+        } else if (this.targetView == 'LoadingProgress') {
+          LoadingProgress().commonStyle()
+        } else if (this.targetView == 'Marquee') {
+          Marquee({
+            start: true,
+            step: 50,
+            loop: Infinity,
+            fromStart: true,
+            src: 'Running Marquee starts rolling'
+          }).commonStyle()
+        } else if (this.targetView == 'Menu') {
+          Menu() {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+          }.backgroundColor(Color.Yellow).commonStyle()
+        } else if (this.targetView == 'Navigation') {
+          Navigation() {
+          }.commonStyle()
+        } else if (this.targetView == 'NavRouter') {
+          NavRouter() {
+            Row() {
+              Image($r('app.media.icon'))
+            }
+
+            NavDestination() {
+              Text('NavDestination').fontSize(10)
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'Progress') {
+          Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle()
+        } else if (this.targetView == 'QRCode') {
+          QRCode('Running Marquee starts rolling').commonStyle()
+        } else if (this.targetView == 'Radio') {
+          Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
+        } else if (this.targetView == 'Rating') {
+          Rating({ rating: 3.5, indicator: false }).commonStyle()
+        } else if (this.targetView == 'RichText') {
+          RichText('RichText').commonStyle()
+        } else if (this.targetView == 'ScrollBar') {
+          Scroll(new Scroller()) {
+            Flex({ direction: FlexDirection.Column }) {
+              ForEach([5, 10, 10, 7, 9, 10, 10, 10, 10], (item) => {
+                Row() {
+                  Text(item.toString())
+                }
+              }, item => item)
+            }
+          }.scrollBar(BarState.Off).scrollable(ScrollDirection.Vertical).commonStyle()
+        } else if (this.targetView == 'Search') {
+          Search({ placeholder: 'Type to search...' })
+            .backgroundColor(Color.White)
+            .searchButton('SEARCH')
+            .commonStyle()
+        } else if (this.targetView == 'Select') {
+          Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
+            { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
+        } else if (this.targetView == 'Slider') {
+          Slider({
+            value: 50,
+            min: 0,
+            max: 100,
+            style: SliderStyle.OutSet
+          }).showTips(true).commonStyle()
+        } else if (this.targetView == 'Stepper') {
+          Stepper() {
+            StepperItem() {
+              Column() {
+                Text('Page One')
+              }
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'TextArea') {
+          TextArea({
+            placeholder: 'The text area can hold an unlimited amount of text. input your word...'
+          }).commonStyle()
+        } else if (this.targetView == 'TextClock') {
+          TextClock({ timeZoneOffset: -8 }).commonStyle()
+        } else if (this.targetView == 'TextInput') {
+          TextInput({ placeholder: 'input your word...' }).commonStyle()
+        } else if (this.targetView == 'TextPicker') {
+          TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle()
+        } else if (this.targetView == 'TextTimer') {
+          TextTimer({ isCountDown: true, count: 30000 })
+            .format('mm:ss.SS')
+            .commonStyle()
+        } else if (this.targetView == 'TimePicker') {
+          TimePicker({
+            selected: new Date('2022-07-22T08:00:00')
+          }).useMilitaryTime(true).commonStyle()
+        } else if (this.targetView == 'Toggle') {
+          Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle()
+        } else if (this.targetView == 'Web') {
+          Web({ src: 'www.example.com', controller: new WebController() }).commonStyle()
+        } else if (this.targetView == 'Circle') {
+          Circle().commonStyle()
+        } else if (this.targetView == 'Ellipse') {
+          Ellipse().commonStyle()
+        } else if (this.targetView == 'Line') {
+          Line()
+            .backgroundColor(Color.Pink)
+            .startPoint([0, 0])
+            .endPoint([50, 100])
+            .commonStyle()
+        } else if (this.targetView == 'Polyline') {
+          Polyline().points([[20, 0], [0, 100], [100, 90]]).commonStyle()
+        } else if (this.targetView == 'Polygon') {
+          Polygon().commonStyle()
+        } else if (this.targetView == 'Path') {
+          Path().commonStyle()
+        } else if (this.targetView == 'Rect') {
+          Rect().commonStyle()
+        } else if (this.targetView == 'Shape') {
+          Shape() {
+            Rect().width(100).height(50)
+          }.commonStyle()
+        } else if (this.targetView == 'Badge') {
+          Badge({
+            count: 1,
+            style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+          }) {
+            Button('message')
+              .width(100).height(50).backgroundColor(0x317aff)
+          }.commonStyle()
+        } else if (this.targetView == 'Column') {
+          Column() {
+          }.commonStyle()
+        } else if (this.targetView == 'ColumnSplit') {
+          ColumnSplit() {
+            Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+            Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+            Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          }.commonStyle()
+        } else if (this.targetView == 'Counter') {
+          Counter() {
+          }.commonStyle()
+        } else if (this.targetView == 'Flex') {
+          Flex() {
+            Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
+          }.commonStyle()
+        } else if (this.targetView == 'GridRow') {
+          GridRow({
+            columns: 1,
+            direction: GridRowDirection.Row
+          }) {
+            ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => {
+              GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+                Row().width('100%').height('20vp')
+              }.borderColor(color).borderWidth(2)
+            })
+          }.commonStyle()
+        } else if (this.targetView == 'Grid') {
+          Grid() {
+            ForEach(['0', '1', '2', '3', '4'], () => {
+              ForEach(['0', '1', '2', '3', '4'], (day: string) => {
+                GridItem() {
+                  Text(day).backgroundColor(Color.White)
+                    .width('100%').height('100%').textAlign(TextAlign.Center)
+                }
+              })
+            })
+          }
+          .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
+          .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
+          .commonStyle()
+          .backgroundColor(0xFAEEE0)
+        } else if (this.targetView == 'List') {
+          List() {
+          }.commonStyle()
+        } else if (this.targetView == 'Navigator') {
+          Navigator() {
+            Text('Go to back page').width('100%').height(20)
+          }.commonStyle().backgroundColor(Color.Red)
+        } else if (this.targetView == 'Panel') {
+          Panel(true) {
+            Text('Text')
+          }.backgroundColor(Color.Yellow).commonStyle()
+        } else if (this.targetView == 'Refresh') {
+          Refresh({ refreshing: true }) {
+            Text('123')
+          }.commonStyle()
+        } else if (this.targetView == 'RelativeContainer') {
+          RelativeContainer() {
+            Row()
+              .width(100)
+              .height(100)
+              .backgroundColor('#FF3333')
+              .alignRules({
+                top: { anchor: '__container__', align: VerticalAlign.Top },
+                left: { anchor: '__container__', align: HorizontalAlign.Start }
+              })
+              .id('layoutWeight')
+          }.commonStyle()
+        } else if (this.targetView == 'Row') {
+          Row().commonStyle()
+        } else if (this.targetView == 'RowSplit') {
+          RowSplit() {
+            Text('Text')
+          }.commonStyle()
+        } else if (this.targetView == 'Scroll') {
+          Scroll() {
+            Column() {
+              ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
+                Text('Scroll' + item.toString())
+                  .width('90%')
+                  .height(50)
+                  .backgroundColor(Color.White)
+                  .textAlign(TextAlign.Center)
+              }, item => item)
+            }.width('100%')
+          }.scrollBar(BarState.On).commonStyle()
+        } else if (this.targetView == 'SideBarContainer') {
+          SideBarContainer(SideBarContainerType.Embed) {
+            Column() {
+              ForEach([1, 2, 3], (item) => {
+                Column({ space: 5 }) {
+                  Image($r('app.media.icon')).width(50).height(50)
+                  Text('Index0' + item).fontSize(25)
+                }
+              })
+            }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green)
+
+            Column() {
+              Text('SideBarContainer content').fontSize(25)
+            }.backgroundColor(Color.Orange)
+          }.commonStyle()
+        } else if (this.targetView == 'Stack') {
+          Stack() {
+          }.commonStyle()
+        } else if (this.targetView == 'Swiper') {
+          Swiper() {
+            ForEach([1, 2, 3], (item: string) => {
+              Text('Swiper' + item).width('90%').height(50)
+            }, item => item)
+          }.indicator(true).backgroundColor(Color.White).commonStyle()
+        } else if (this.targetView == 'Tabs') {
+          Tabs() {
+            TabContent() {
+              Column().width('100%').height('100%').backgroundColor('#00CB87')
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'WaterFlow') {
+          WaterFlow() {
+            ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
+              FlowItem() {
+                Column() {
+                  Text('WaterFlow' + item).fontSize(12).height('16')
+                  Image($r('app.media.icon'))
+                    .width(50)
+                    .height(50)
+                    .objectFit(ImageFit.Fill)
+                }
+              }
+            }, item => item)
+          }.commonStyle()
+        }
+        Button('button')
+          .sizeProperty()
+      }
+      .width(this.parentWidth)
+      .height(this.parentHeight)
+    }
+    .backgroundColor(Color.Yellow)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPageFlex.ets

+/*
+ * Copyright (c) 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 AttrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct LayoutWeightPageFlex {
+  @State _layoutWeight: number | string = 0;
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0
+  @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+
+  onPageShow() {
+    console.info('LayoutWeight page show called ')
+    AttrsManager.registerDataChange(value => this._layoutWeight = value.layoutWeight)
+  }
+
+  @Styles commonStyle(){
+    .layoutWeight(this._layoutWeight)
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .key(this.componentKey)
+  }
+
+  @Styles sizeProperty(){
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .layoutWeight(1)
+  }
+
+  build() {
+    Column() {
+      Flex() {
+        if (this.targetView == 'AlphabetIndexer') {
+          AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
+        } else if (this.targetView == 'Text') {
+          Text('text1').commonStyle()
+        } else if (this.targetView == 'Button') {
+          Button('button1').commonStyle()
+        } else if (this.targetView == 'Checkbox') {
+          Checkbox().select(true).selectedColor(Color.Red).commonStyle()
+        } else if (this.targetView == 'CheckboxGroup') {
+          CheckboxGroup({ group: 'checkboxGroup' }).selectedColor('#ffcd175f').commonStyle()
+        } else if (this.targetView == 'DataPanel') {
+          DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10], max: 100, type: DataPanelType.Line }).commonStyle()
+        } else if (this.targetView == 'DatePicker') {
+          DatePicker({
+            start: new Date('1970-1-1'),
+            end: new Date('2100-1-1'),
+          }).commonStyle()
+        } else if (this.targetView == 'Divider') {
+          Text('1').commonStyle()
+        } else if (this.targetView == 'Gauge') {
+          Gauge({ value: 105 }).commonStyle().colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+        } else if (this.targetView == 'Image') {
+          Image($r('app.media.icon')).commonStyle()
+        } else if (this.targetView == 'ImageAnimator') {
+          ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
+        } else if (this.targetView == 'LoadingProgress') {
+          LoadingProgress().commonStyle()
+        } else if (this.targetView == 'Marquee') {
+          Marquee({
+            start: true,
+            step: 50,
+            loop: Infinity,
+            fromStart: true,
+            src: 'Running Marquee starts rolling'
+          }).commonStyle()
+        } else if (this.targetView == 'Menu') {
+          Menu() {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+          }.backgroundColor(Color.Yellow).commonStyle()
+        } else if (this.targetView == 'Navigation') {
+          Navigation() {
+          }.commonStyle()
+        } else if (this.targetView == 'NavRouter') {
+          NavRouter() {
+            Row() {
+              Image($r('app.media.icon'))
+            }
+
+            NavDestination() {
+              Text('NavDestination').fontSize(10)
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'Progress') {
+          Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle()
+        } else if (this.targetView == 'QRCode') {
+          QRCode('Running Marquee starts rolling').commonStyle()
+        } else if (this.targetView == 'Radio') {
+          Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
+        } else if (this.targetView == 'Rating') {
+          Rating({ rating: 3.5, indicator: false }).commonStyle()
+        } else if (this.targetView == 'RichText') {
+          RichText('RichText').commonStyle()
+        } else if (this.targetView == 'ScrollBar') {
+          Scroll(new Scroller()) {
+            Flex({ direction: FlexDirection.Column }) {
+              ForEach([5, 10, 10, 7, 9, 10, 10, 10, 10], (item) => {
+                Row() {
+                  Text(item.toString())
+                }
+              }, item => item)
+            }
+          }.scrollBar(BarState.Off).scrollable(ScrollDirection.Vertical).commonStyle()
+        } else if (this.targetView == 'Search') {
+          Search({ placeholder: 'Type to search...' })
+            .backgroundColor(Color.White)
+            .searchButton('SEARCH')
+            .commonStyle()
+        } else if (this.targetView == 'Select') {
+          Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
+            { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
+        } else if (this.targetView == 'Slider') {
+          Slider({
+            value: 50,
+            min: 0,
+            max: 100,
+            style: SliderStyle.OutSet
+          }).showTips(true).commonStyle()
+        } else if (this.targetView == 'Stepper') {
+          Stepper() {
+            StepperItem() {
+              Column() {
+                Text('Page One')
+              }
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'TextArea') {
+          TextArea({
+            placeholder: 'The text area can hold an unlimited amount of text. input your word...'
+          }).commonStyle()
+        } else if (this.targetView == 'TextClock') {
+          TextClock({ timeZoneOffset: -8 }).commonStyle()
+        } else if (this.targetView == 'TextInput') {
+          TextInput({ placeholder: 'input your word...' }).commonStyle()
+        } else if (this.targetView == 'TextPicker') {
+          TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle()
+        } else if (this.targetView == 'TextTimer') {
+          TextTimer({ isCountDown: true, count: 30000 })
+            .format('mm:ss.SS')
+            .commonStyle()
+        } else if (this.targetView == 'TimePicker') {
+          TimePicker({
+            selected: new Date('2022-07-22T08:00:00')
+          }).useMilitaryTime(true).commonStyle()
+        } else if (this.targetView == 'Toggle') {
+          Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle()
+        } else if (this.targetView == 'Web') {
+          Web({ src: 'www.example.com', controller: new WebController() }).commonStyle()
+        } else if (this.targetView == 'Circle') {
+          Circle().commonStyle()
+        } else if (this.targetView == 'Ellipse') {
+          Ellipse().commonStyle()
+        } else if (this.targetView == 'Line') {
+          Line()
+            .backgroundColor(Color.Pink)
+            .startPoint([0, 0])
+            .endPoint([50, 100])
+            .commonStyle()
+        } else if (this.targetView == 'Polyline') {
+          Polyline().points([[20, 0], [0, 100], [100, 90]]).commonStyle()
+        } else if (this.targetView == 'Polygon') {
+          Polygon().commonStyle()
+        } else if (this.targetView == 'Path') {
+          Path().commonStyle()
+        } else if (this.targetView == 'Rect') {
+          Rect().commonStyle()
+        } else if (this.targetView == 'Shape') {
+          Shape() {
+            Rect().width(100).height(50)
+          }.commonStyle()
+        } else if (this.targetView == 'Badge') {
+          Badge({
+            count: 1,
+            style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+          }) {
+            Button('message')
+              .width(100).height(50).backgroundColor(0x317aff)
+          }.commonStyle()
+        } else if (this.targetView == 'Column') {
+          Column() {
+          }.commonStyle()
+        } else if (this.targetView == 'ColumnSplit') {
+          ColumnSplit() {
+            Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+            Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+            Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          }.commonStyle()
+        } else if (this.targetView == 'Counter') {
+          Counter() {
+          }.commonStyle()
+        } else if (this.targetView == 'Flex') {
+          Flex() {
+            Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
+          }.commonStyle()
+        } else if (this.targetView == 'GridRow') {
+          GridRow({
+            columns: 5,
+            gutter: { x: 5, y: 10 },
+            breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
+            direction: GridRowDirection.Row
+          }) {
+            ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => {
+              GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+                Row().width('100%').height('20vp')
+              }.borderColor(color).borderWidth(2)
+            })
+          }.commonStyle()
+        } else if (this.targetView == 'Grid') {
+          Grid() {
+            ForEach(['0', '1', '2', '3', '4'], () => {
+              ForEach(['0', '1', '2', '3', '4'], (day: string) => {
+                GridItem() {
+                  Text(day).backgroundColor(Color.White)
+                    .width('100%').height('100%').textAlign(TextAlign.Center)
+                }
+              })
+            })
+          }
+          .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
+          .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
+          .commonStyle()
+          .backgroundColor(0xFAEEE0)
+        } else if (this.targetView == 'List') {
+          List() {
+          }.commonStyle()
+        } else if (this.targetView == 'Navigator') {
+          Navigator() {
+            Text('Go to back page').width('100%').height(20)
+          }.commonStyle().backgroundColor(Color.Red)
+        } else if (this.targetView == 'Panel') {
+          Panel(true) {
+            Text('Text')
+          }.backgroundColor(Color.Yellow).commonStyle()
+        } else if (this.targetView == 'Refresh') {
+          Refresh({ refreshing: true }) {
+            Text('123')
+          }.commonStyle()
+        } else if (this.targetView == 'RelativeContainer') {
+          RelativeContainer() {
+            Row()
+              .width(100)
+              .height(100)
+              .backgroundColor('#FF3333')
+              .alignRules({
+                top: { anchor: '__container__', align: VerticalAlign.Top },
+                left: { anchor: '__container__', align: HorizontalAlign.Start }
+              })
+              .id('layoutWeightFlex')
+          }.commonStyle()
+        } else if (this.targetView == 'Row') {
+          Row().commonStyle()
+        } else if (this.targetView == 'RowSplit') {
+          RowSplit() {
+            Text('Text')
+          }.commonStyle()
+        } else if (this.targetView == 'Scroll') {
+          Scroll() {
+            Column() {
+              ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
+                Text('Scroll' + item.toString())
+                  .width('90%')
+                  .height(50)
+                  .backgroundColor(Color.White)
+                  .textAlign(TextAlign.Center)
+              }, item => item)
+            }.width('100%')
+          }.scrollBar(BarState.On).commonStyle()
+        } else if (this.targetView == 'SideBarContainer') {
+          SideBarContainer(SideBarContainerType.Embed) {
+            Column() {
+              ForEach([1, 2, 3], (item) => {
+                Column({ space: 5 }) {
+                  Image($r('app.media.icon')).width(50).height(50)
+                  Text('Index0' + item).fontSize(25)
+                }
+              })
+            }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green)
+
+            Column() {
+              Text('SideBarContainer content').fontSize(25)
+            }.backgroundColor(Color.Orange)
+          }.commonStyle()
+        } else if (this.targetView == 'Stack') {
+          Stack() {
+          }.commonStyle()
+        } else if (this.targetView == 'Swiper') {
+          Swiper() {
+            ForEach([1, 2, 3], (item: string) => {
+              Text('Swiper' + item).width('90%').height(50)
+            }, item => item)
+          }.indicator(true).backgroundColor(Color.White).commonStyle()
+        } else if (this.targetView == 'Tabs') {
+          Tabs() {
+            TabContent() {
+              Column().width('100%').height('100%').backgroundColor('#00CB87')
+            }
+          }.commonStyle()
+        } else if (this.targetView == 'WaterFlow') {
+          WaterFlow() {
+            ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
+              FlowItem() {
+                Column() {
+                  Text('WaterFlow' + item).fontSize(12).height('16')
+                  Image($r('app.media.icon'))
+                    .width(50)
+                    .height(50)
+                    .objectFit(ImageFit.Fill)
+                }
+              }
+            }, item => item)
+          }.commonStyle()
+        }
+        Button('button')
+          .sizeProperty()
+      }
+      .width(this.parentWidth)
+      .height(this.parentHeight)
+    }
+    .backgroundColor(Color.Red)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPageRow.ets

+/*
+ * Copyright (c) 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 AttrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct LayoutWeightPageRow {
+  @State _layoutWeight: number | string = 0;
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0
+  @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+
+  onPageShow() {
+    console.info('LayoutWeight page show called ')
+    AttrsManager.registerDataChange(value => this._layoutWeight = value.layoutWeight)
+  }
+
+  @Styles commonStyle(){
+    .layoutWeight(this._layoutWeight)
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .key(this.componentKey)
+  }
+
+  @Styles sizeProperty(){
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .layoutWeight(1)
+  }
+
+  build() {
+    Row() {
+      if (this.targetView == 'AlphabetIndexer') {
+        AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
+      } else if (this.targetView == 'Text') {
+        Text('text1').commonStyle()
+      } else if (this.targetView == 'Blank') {
+        Blank().color(Color.Red).commonStyle()
+      } else if (this.targetView == 'Button') {
+        Button('button1').commonStyle()
+      } else if (this.targetView == 'Checkbox') {
+        Checkbox().select(true).selectedColor(Color.Red).commonStyle()
+      } else if (this.targetView == 'CheckboxGroup') {
+        CheckboxGroup({ group: 'checkboxGroup' }).selectedColor('#ffcd175f').commonStyle()
+      } else if (this.targetView == 'DataPanel') {
+        DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10], max: 100, type: DataPanelType.Line }).commonStyle()
+      } else if (this.targetView == 'DatePicker') {
+        DatePicker({
+          start: new Date('1970-1-1'),
+          end: new Date('2100-1-1'),
+        }).commonStyle()
+      } else if (this.targetView == 'Divider') {
+        Text('1').commonStyle()
+      } else if (this.targetView == 'Gauge') {
+        Gauge({ value: 105 }).commonStyle().colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+      } else if (this.targetView == 'Image') {
+        Image($r('app.media.icon')).commonStyle()
+      } else if (this.targetView == 'ImageAnimator') {
+        ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle()
+      } else if (this.targetView == 'LoadingProgress') {
+        LoadingProgress().commonStyle()
+      } else if (this.targetView == 'Marquee') {
+        Marquee({
+          start: true,
+          step: 50,
+          loop: Infinity,
+          fromStart: true,
+          src: 'Running Marquee starts rolling'
+        }).commonStyle()
+      } else if (this.targetView == 'Menu') {
+        Menu() {
+          MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+        }.backgroundColor(Color.Yellow).commonStyle()
+      } else if (this.targetView == 'Navigation') {
+        Navigation() {
+        }.commonStyle()
+      } else if (this.targetView == 'NavRouter') {
+        NavRouter() {
+          Row() {
+            Image($r('app.media.icon'))
+          }
+
+          NavDestination() {
+            Text('NavDestination').fontSize(10)
+          }
+        }.commonStyle()
+      } else if (this.targetView == 'Progress') {
+        Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle()
+      } else if (this.targetView == 'QRCode') {
+        QRCode('Running Marquee starts rolling').commonStyle()
+      } else if (this.targetView == 'Radio') {
+        Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
+      } else if (this.targetView == 'Rating') {
+        Rating({ rating: 3.5, indicator: false }).commonStyle()
+      } else if (this.targetView == 'RichText') {
+        RichText('RichText').commonStyle()
+      } else if (this.targetView == 'ScrollBar') {
+        Scroll(new Scroller()) {
+          Flex({ direction: FlexDirection.Column }) {
+            ForEach([5, 10, 10, 7, 9, 10, 10, 10, 10], (item) => {
+              Row() {
+                Text(item.toString())
+              }
+            }, item => item)
+          }
+        }.scrollBar(BarState.Off).scrollable(ScrollDirection.Vertical).commonStyle()
+      } else if (this.targetView == 'Search') {
+        Search({ placeholder: 'Type to search...' })
+          .backgroundColor(Color.White)
+          .searchButton('SEARCH')
+          .commonStyle()
+      } else if (this.targetView == 'Select') {
+        Select([{ value: 'aaa', icon: '/common/public_icon.svg' },
+          { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle()
+      } else if (this.targetView == 'Slider') {
+        Slider({
+          value: 50,
+          min: 0,
+          max: 100,
+          style: SliderStyle.OutSet
+        }).showTips(true).commonStyle()
+      } else if (this.targetView == 'Stepper') {
+        Stepper() {
+          StepperItem() {
+            Column() {
+              Text('Page One')
+            }
+          }
+        }.commonStyle()
+      } else if (this.targetView == 'TextArea') {
+        TextArea({
+          placeholder: 'The text area can hold an unlimited amount of text. input your word...'
+        }).commonStyle()
+      } else if (this.targetView == 'TextClock') {
+        TextClock({ timeZoneOffset: -8 }).commonStyle()
+      } else if (this.targetView == 'TextInput') {
+        TextInput({ placeholder: 'input your word...' }).commonStyle()
+      } else if (this.targetView == 'TextPicker') {
+        TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle()
+      } else if (this.targetView == 'TextTimer') {
+        TextTimer({ isCountDown: true, count: 30000 })
+          .format('mm:ss.SS')
+          .commonStyle()
+      } else if (this.targetView == 'TimePicker') {
+        TimePicker({
+          selected: new Date('2022-07-22T08:00:00')
+        }).useMilitaryTime(true).commonStyle()
+      } else if (this.targetView == 'Toggle') {
+        Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle()
+      } else if (this.targetView == 'Web') {
+        Web({ src: 'www.example.com', controller: new WebController() }).commonStyle()
+      } else if (this.targetView == 'Circle') {
+        Circle().commonStyle()
+      } else if (this.targetView == 'Ellipse') {
+        Ellipse().commonStyle()
+      } else if (this.targetView == 'Line') {
+        Line()
+          .backgroundColor(Color.Pink)
+          .startPoint([0, 0])
+          .endPoint([50, 100])
+          .commonStyle()
+      } else if (this.targetView == 'Polyline') {
+        Polyline().points([[20, 0], [0, 100], [100, 90]]).commonStyle()
+      } else if (this.targetView == 'Polygon') {
+        Polygon().commonStyle()
+      } else if (this.targetView == 'Path') {
+        Path().commonStyle()
+      } else if (this.targetView == 'Rect') {
+        Rect().commonStyle()
+      } else if (this.targetView == 'Shape') {
+        Shape() {
+          Rect().width(100).height(50)
+        }.commonStyle()
+      } else if (this.targetView == 'Badge') {
+        Badge({
+          count: 1,
+          style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+        }) {
+          Button('message')
+            .width(100).height(50).backgroundColor(0x317aff)
+        }.commonStyle()
+      } else if (this.targetView == 'Column') {
+        Column() {
+        }.commonStyle()
+      } else if (this.targetView == 'ColumnSplit') {
+        ColumnSplit() {
+          Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+          Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+          Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+        }.commonStyle()
+      } else if (this.targetView == 'Counter') {
+        Counter() {
+        }.commonStyle()
+      } else if (this.targetView == 'Flex') {
+        Flex() {
+          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
+        }.commonStyle()
+      } else if (this.targetView == 'GridRow') {
+        GridRow({
+          columns: 5,
+          gutter: { x: 5, y: 10 },
+          breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
+          direction: GridRowDirection.Row
+        }) {
+          ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => {
+            GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+              Row().width('100%').height('20vp')
+            }.borderColor(color).borderWidth(2)
+          })
+        }.commonStyle()
+      } else if (this.targetView == 'Grid') {
+        Grid() {
+          ForEach(['0', '1', '2', '3', '4'], () => {
+            ForEach(['0', '1', '2', '3', '4'], (day: string) => {
+              GridItem() {
+                Text(day).backgroundColor(Color.White)
+                  .width('100%').height('100%').textAlign(TextAlign.Center)
+              }
+            })
+          })
+        }
+        .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
+        .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
+        .commonStyle()
+        .backgroundColor(0xFAEEE0)
+      } else if (this.targetView == 'List') {
+        List() {
+        }.commonStyle()
+      } else if (this.targetView == 'Navigator') {
+        Navigator() {
+          Text('Go to back page').width('100%').height(20)
+        }.commonStyle().backgroundColor(Color.Red)
+      } else if (this.targetView == 'Panel') {
+        Panel(true) {
+          Text('Text')
+        }.backgroundColor(Color.Yellow).commonStyle()
+      } else if (this.targetView == 'Refresh') {
+        Refresh({ refreshing: true }) {
+          Text('123')
+        }.commonStyle()
+      } else if (this.targetView == 'RelativeContainer') {
+        RelativeContainer() {
+          Row()
+            .width(100)
+            .height(100)
+            .backgroundColor('#FF3333')
+            .alignRules({
+              top: { anchor: '__container__', align: VerticalAlign.Top },
+              left: { anchor: '__container__', align: HorizontalAlign.Start }
+            })
+            .id('layoutWeightRow')
+        }.commonStyle()
+      } else if (this.targetView == 'Row') {
+        Row().commonStyle()
+      } else if (this.targetView == 'RowSplit') {
+        RowSplit() {
+          Text('Text')
+        }.commonStyle()
+      } else if (this.targetView == 'Scroll') {
+        Scroll() {
+          Column() {
+            ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
+              Text('Scroll' + item.toString())
+                .width('90%')
+                .height(50)
+                .backgroundColor(Color.White)
+                .textAlign(TextAlign.Center)
+            }, item => item)
+          }.width('100%')
+        }.scrollBar(BarState.On).commonStyle()
+      } else if (this.targetView == 'SideBarContainer') {
+        SideBarContainer(SideBarContainerType.Embed) {
+          Column() {
+            ForEach([1, 2, 3], (item) => {
+              Column({ space: 5 }) {
+                Image($r('app.media.icon')).width(50).height(50)
+                Text('Index0' + item).fontSize(25)
+              }
+            })
+          }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green)
+
+          Column() {
+            Text('SideBarContainer content').fontSize(25)
+          }.backgroundColor(Color.Orange)
+        }.commonStyle()
+      } else if (this.targetView == 'Stack') {
+        Stack() {
+        }.commonStyle()
+      } else if (this.targetView == 'Swiper') {
+        Swiper() {
+          ForEach([1, 2, 3], (item: string) => {
+            Text('Swiper' + item).width('90%').height(50)
+          }, item => item)
+        }.indicator(true).backgroundColor(Color.White).commonStyle()
+      } else if (this.targetView == 'Tabs') {
+        Tabs() {
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor('#00CB87')
+          }
+        }.commonStyle()
+      } else if (this.targetView == 'WaterFlow') {
+        WaterFlow() {
+          ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
+            FlowItem() {
+              Column() {
+                Text('WaterFlow' + item).fontSize(12).height('16')
+                Image($r('app.media.icon'))
+                  .width(50)
+                  .height(50)
+                  .objectFit(ImageFit.Fill)
+              }
+            }
+          }, item => item)
+        }.commonStyle()
+      }
+      Button('button')
+        .sizeProperty()
+    }
+    .width(this.parentWidth)
+    .height(this.parentHeight)
+    .backgroundColor(Color.Yellow)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPage.ets

+/*
+ * Copyright (c) 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 AttrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct MarginPage {
+  @State _margin: Margin = { top: 0, right: 0, bottom: 0, left: 0 };
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
+  @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0
+  @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+  @State buttonComponentKey: string = router.getParams() ? router.getParams()['view']['buttonComponentKey'] : ''
+
+  onPageShow() {
+    console.info('Margin page show called ')
+    AttrsManager.registerDataChange(value => this._margin = value)
+  }
+
+  @Styles commonStyle(){
+    .margin(this._margin)
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .key(this.componentKey)
+  }
+
+  build() {
+    Row() {
+      if (this.targetView == 'ListItem') {
+        List({ space: 0, initialIndex: 0 }) {
+          ListItem() {
+            Text('item1')
+              .width('100%')
+              .textAlign(TextAlign.Center)
+              .backgroundColor(Color.White)
+          }.margin(this._margin).key(this.componentKey)
+
+          ListItem() {
+            Text('referenceComponent')
+              .width('100%')
+              .textAlign(TextAlign.Center)
+              .backgroundColor(Color.White)
+          }.key(this.buttonComponentKey)
+        }
+        .width(this.parentWidth).height(this.parentHeight).listDirection(Axis.Vertical).key(this.parentComponentKey)
+      } else if (this.targetView == 'ListItemGroup') {
+        List({ space: 0, initialIndex: 0 }) {
+          ListItemGroup().backgroundColor(Color.Yellow).margin(this._margin).key(this.componentKey)
+          ListItemGroup().backgroundColor(Color.Red).key(this.buttonComponentKey)
+        }
+        .backgroundColor(Color.Pink)
+        .width(400)
+        .height(600)
+        .listDirection(Axis.Vertical)
+        .key(this.parentComponentKey)
+      } else if (this.targetView == 'MenuItem') {
+        Row() {
+          Menu() {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+              .margin(this._margin).key(this.componentKey).width('100%').height('100%')
+          }.backgroundColor(Color.Yellow)
+          .width(this.parentWidth)
+          .height(this.parentHeight)
+          .key(this.parentComponentKey)
+        }.width('100%').height('100%').backgroundColor(Color.Green)
+      } else if (this.targetView == 'MenuItemGroup') {
+        Row() {
+          Menu() {
+            MenuItemGroup({ header: 'MenuItemGroup' }) {
+              MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+            }.margin(this._margin).key(this.componentKey).width('100%').height('100%')
+          }.backgroundColor(Color.Yellow)
+          .width(this.parentWidth)
+          .height(this.parentHeight)
+          .key(this.parentComponentKey)
+        }.width('100%').height('100%').backgroundColor(Color.Green)
+      } else if (this.targetView == 'TabContent') {
+        Tabs() {
+          TabContent() {
+            Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White)
+          }.tabBar('Tabs1').margin(this._margin).key(this.componentKey)
+
+          TabContent() {
+            Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White)
+          }.tabBar('Tabs2').key(this.buttonComponentKey)
+        }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'StepperItem') {
+        Stepper() {
+          StepperItem() {
+            Column() {
+              Text('Page One')
+            }
+          }
+          .backgroundColor(Color.Red)
+          .margin(this._margin)
+          .key(this.componentKey)
+          .width('100%')
+          .height('100%')
+        }.backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'GridCol') {
+        GridRow({
+          columns: 1,
+          direction: GridRowDirection.Row
+        }) {
+          GridCol() {
+            Row().width('100%').height('20vp')
+          }
+          .margin(this._margin)
+          .key(this.componentKey)
+          .backgroundColor(Color.Yellow)
+          .width('100%')
+          .height('100%')
+        }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink).key(this.parentComponentKey)
+      } else if (this.targetView == 'FlowItem') {
+        WaterFlow() {
+          FlowItem() {
+            Column() {
+              Text('WaterFlow').fontSize(12).height('16')
+              Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
+            }
+          }
+          .margin(this._margin)
+          .key(this.componentKey)
+          .backgroundColor(Color.Yellow)
+          .width('100%')
+          .height('100%')
+        }.backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'GridItem') {
+        Grid() {
+          GridItem() {
+            Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center)
+          }
+          .width('100%')
+          .height('100%')
+          .rowStart(1)
+          .rowEnd(4)
+          .margin(this._margin)
+          .key(this.componentKey)
+          .backgroundColor(Color.Yellow)
+        }
+        .backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else {
+        Row() {
+          if (this.targetView == 'Button') {
+            Button('button1').commonStyle()
+          } else if (this.targetView == 'Text') {
+            Text('text1').commonStyle()
+          } else if (this.targetView == 'AlphabetIndexer') {
+            AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
+          } else if (this.targetView == 'Blank') {
+            Blank().backgroundColor(Color.Yellow).commonStyle()
+          } else if (this.targetView == 'Checkbox') {
+            Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle()
+          } else if (this.targetView == 'CheckboxGroup') {
+            CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
+          } else if (this.targetView == 'DataPanel') {
+            DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle()
+          } else if (this.targetView == 'DatePicker') {
+            DatePicker({
+              start: new Date('1970-1-1'),
+              end: new Date('2100-1-1'),
+            }).commonStyle()
+          } else if (this.targetView == 'Divider') {
+            Divider().commonStyle()
+          } else if (this.targetView == 'Gauge') {
+            Gauge({ value: 105 })
+              .commonStyle()
+              .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+          } else if (this.targetView == 'Image') {
+            Image($r('app.media.icon'))
+              .commonStyle()
+          } else if (this.targetView == 'ImageAnimator') {
+            ImageAnimator()
+              .images([{ src: $r('app.media.icon') }])
+              .commonStyle()
+          } else if (this.targetView == 'LoadingProgress') {
+            LoadingProgress()
+              .commonStyle()
+          } else if (this.targetView == 'Marquee') {
+            Marquee({
+              start: true,
+              step: 50,
+              loop: Infinity,
+              fromStart: true,
+              src: 'Running Marquee starts rolling'
+            }).commonStyle()
+          } else if (this.targetView == 'Menu') {
+            Menu() {
+              MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+            }.backgroundColor(Color.Yellow).commonStyle()
+          } else if (this.targetView == 'Navigation') {
+            Navigation().commonStyle()
+          } else if (this.targetView == 'NavRouter') {
+            NavRouter() {
+              Row() {
+                Image($r('app.media.icon'))
+              }
+
+              NavDestination() {
+                Text('NavDestination').fontSize(10)
+              }
+            }.commonStyle()
+          } else if (this.targetView == 'Progress') {
+            Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle()
+          } else if (this.targetView == 'QRCode') {
+            QRCode('Running Marquee starts rolling').commonStyle()
+          } else if (this.targetView == 'Radio') {
+            Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
+          } else if (this.targetView == 'Rating') {
+            Rating({ rating: 3.5, indicator: false }).commonStyle()
+          } else if (this.targetView == 'ScrollBar') {
+            ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
+              Text().width(20).height(100).borderRadius(10).backgroundColor('#C0C0C0')
+            }.commonStyle()
+          } else if (this.targetView == 'Search') {
+            Search().commonStyle()
+          } else if (this.targetView == 'Select') {
+            Select([{ value: 'aaa' },
+              { value: 'bbb' }]).commonStyle()
+          } else if (this.targetView == 'Slider') {
+            Slider({
+              value: 50,
+              min: 0,
+              max: 100,
+              style: SliderStyle.OutSet
+            }).showTips(true).commonStyle()
+          } else if (this.targetView == 'Stepper') {
+            Stepper() {
+              StepperItem() {
+                Column() {
+                  Text('Page One')
+                }
+              }
+            }.commonStyle()
+          } else if (this.targetView == 'TextArea') {
+            TextArea({
+              placeholder: 'The text area can hold an unlimited amount of text. input your word...'
+            }).commonStyle()
+          } else if (this.targetView == 'TextClock') {
+            TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
+          } else if (this.targetView == 'TextInput') {
+            TextInput({ placeholder: 'input your word...' }).commonStyle()
+          } else if (this.targetView == 'TextPicker') {
+            TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle()
+          } else if (this.targetView == 'TextTimer') {
+            TextTimer({ isCountDown: true, count: 30000 })
+              .format('mm:ss.SS')
+              .fontColor(Color.Black)
+              .commonStyle()
+          } else if (this.targetView == 'TimePicker') {
+            TimePicker({
+              selected: new Date('2022-07-22T08:00:00')
+            }).commonStyle()
+          } else if (this.targetView == 'Toggle') {
+            Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle()
+          } else if (this.targetView == 'Web') {
+            Web({ src: 'www.example.com', controller: new WebController() }).commonStyle()
+          } else if (this.targetView == 'Circle') {
+            Circle().commonStyle()
+          } else if (this.targetView == 'Ellipse') {
+            Ellipse().commonStyle()
+          } else if (this.targetView == 'Line') {
+            Line().commonStyle().startPoint([0, 0]).endPoint([50, 100]).backgroundColor(Color.Black)
+          } else if (this.targetView == 'Polyline') {
+            Polyline().commonStyle()
+          } else if (this.targetView == 'Polygon') {
+            Polygon().commonStyle()
+          } else if (this.targetView == 'Path') {
+            Path().commonStyle()
+          } else if (this.targetView == 'Rect') {
+            Rect().commonStyle()
+          } else if (this.targetView == 'Shape') {
+            Shape() {
+              Rect().width(100).height(50)
+            }.commonStyle()
+          } else if (this.targetView == 'Badge') {
+            Badge({
+              count: 50,
+              style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+            }) {
+              Button('message')
+                .width(100).height(50).backgroundColor(0x317aff)
+            }.commonStyle()
+          } else if (this.targetView == 'Column') {
+            Column() {
+              Column().width('100%').height(30).backgroundColor(0xAFEEEE)
+            }.commonStyle()
+          } else if (this.targetView == 'ColumnSplit') {
+            ColumnSplit() {
+              Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+              Text('2').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+            }.commonStyle()
+          } else if (this.targetView == 'Counter') {
+            Counter() {
+            }.commonStyle()
+          } else if (this.targetView == 'Flex') {
+            Flex() {
+              Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
+            }.commonStyle()
+          } else if (this.targetView == 'GridRow') {
+            GridRow({
+              columns: 5,
+              gutter: { x: 5, y: 10 },
+              breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize },
+              direction: GridRowDirection.Row
+            }) {
+              ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => {
+                GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+                  Row().width('100%').height('20vp')
+                }.borderColor(color).borderWidth(2)
+              })
+            }.commonStyle()
+          } else if (this.targetView == 'Grid') {
+            Grid() {
+              ForEach(['0', '1', '2', '3', '4'], () => {
+                ForEach(['0', '1', '2', '3', '4'], (day: string) => {
+                  GridItem() {
+                    Text(day).backgroundColor(Color.White)
+                      .width('100%').height('100%').textAlign(TextAlign.Center)
+                  }
+                })
+              })
+            }.columnsTemplate('1fr 1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr 1fr').backgroundColor(0xFAEEE0)
+            .commonStyle()
+          } else if (this.targetView == 'List') {
+            List() {
+            }.commonStyle()
+          } else if (this.targetView == 'Navigator') {
+            Navigator() {
+              Text('Go to back page').width('100%').height(20)
+            }.commonStyle().backgroundColor(Color.Red)
+          } else if (this.targetView == 'Panel') {
+            Panel(true) {
+              Text('Text')
+            }.backgroundColor(Color.Yellow).commonStyle()
+          } else if (this.targetView == 'Refresh') {
+            Refresh({ refreshing: false }) {
+              Text('123')
+            }.commonStyle()
+          } else if (this.targetView == 'RelativeContainer') {
+            RelativeContainer() {
+              Row()
+                .width(100)
+                .height(50)
+                .backgroundColor('#FF3333')
+                .alignRules({
+                  top: { anchor: '__container__', align: VerticalAlign.Top },
+                  left: { anchor: '__container__', align: HorizontalAlign.Start }
+                })
+                .id('margin')
+            }.commonStyle()
+          } else if (this.targetView == 'Row') {
+            Row().commonStyle()
+          } else if (this.targetView == 'RowSplit') {
+            RowSplit() {
+              Text('Text')
+            }.commonStyle()
+          } else if (this.targetView == 'Scroll') {
+            Scroll() {
+              Column() {
+                ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
+                  Text('Scroll' + item.toString())
+                    .width('90%')
+                    .height(150)
+                    .backgroundColor(Color.White)
+                    .textAlign(TextAlign.Center)
+                }, item => item)
+              }.width('100%')
+            }.scrollBar(BarState.On).commonStyle()
+          } else if (this.targetView == 'SideBarContainer') {
+            SideBarContainer(SideBarContainerType.Embed) {
+              Column() {
+                ForEach([1, 2, 3], (item) => {
+                  Column({ space: 5 }) {
+                    Image($r('app.media.icon')).width(50).height(50)
+                    Text('Index0' + item).fontSize(25)
+                  }
+                })
+              }.width('100%')
+              .justifyContent(FlexAlign.SpaceEvenly)
+              .backgroundColor(Color.Green)
+
+              Column() {
+                Text('SideBarContainer content').fontSize(25)
+              }.backgroundColor(Color.Orange)
+            }.commonStyle()
+          } else if (this.targetView == 'Stack') {
+            Stack() {
+            }.commonStyle()
+          } else if (this.targetView == 'Swiper') {
+            Swiper() {
+              ForEach([1, 2, 3], (item: string) => {
+                Text('Swiper' + item).width('90%').height(50)
+              }, item => item)
+            }.indicator(true).backgroundColor(Color.White).commonStyle()
+          } else if (this.targetView == 'Tabs') {
+            Tabs() {
+              TabContent() {
+                Column().width('100%').height('100%').backgroundColor('#00CB87')
+              }
+            }.commonStyle()
+          } else if (this.targetView == 'WaterFlow') {
+            WaterFlow() {
+              ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
+                FlowItem() {
+                  Column() {
+                    Text('WaterFlow' + item).fontSize(12).height('16')
+                    Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
+                  }
+                }
+              }, item => item)
+            }.commonStyle()
+          }
+          Button('button')
+            .width(this.childWidth)
+            .height(this.childHeight)
+            .key(this.buttonComponentKey)
+        }.backgroundColor(Color.Yellow)
+        .key(this.parentComponentKey)
+      }
+    }.backgroundColor(Color.Red)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPageLength.ets

+/*
+ * Copyright (c) 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 AttrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct MarginPageLength {
+  @State _margin: number | string = 0
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
+  @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : ''
+  @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0
+  @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0
+  @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0
+  @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0
+
+  onPageShow() {
+    console.info('Margin page show called ')
+    AttrsManager.registerDataChange(value => this._margin = value.margin)
+  }
+
+  @Styles commonStyle(){
+    .margin(this._margin)
+    .width(this.childWidth)
+    .height(this.childHeight)
+    .key(this.componentKey)
+  }
+
+  build() {
+    Row() {
+      if (this.targetView == 'ListItem') {
+        List() {
+          ListItem() {
+            Text('item1').width('100%').textAlign(TextAlign.Center).backgroundColor(Color.White)
+          }.margin(this._margin).key(this.componentKey)
+
+          ListItem() {
+            Text('referenceComponent')
+              .width('100%').textAlign(TextAlign.Center).backgroundColor(Color.White)
+          }.key(this.referenceComponentKey)
+        }
+        .listDirection(Axis.Vertical).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'ListItemGroup') {
+        List({ space: 0, initialIndex: 0 }) {
+          ListItemGroup().backgroundColor(Color.Yellow).margin(this._margin).key(this.componentKey)
+          ListItemGroup().backgroundColor(Color.Red).key(this.referenceComponentKey)
+        }
+        .backgroundColor(Color.Pink)
+        .width(this.parentWidth)
+        .height(this.parentHeight)
+        .listDirection(Axis.Vertical)
+        .key(this.parentComponentKey)
+      } else if (this.targetView == 'MenuItem') {
+        Row() {
+          Menu() {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+              .margin(this._margin).key(this.componentKey).width('100%').height('100%')
+          }.backgroundColor(Color.Yellow)
+          .width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+        }.width('100%').height('100%').backgroundColor(Color.Green)
+      } else if (this.targetView == 'MenuItemGroup') {
+        Row() {
+          Menu() {
+            MenuItemGroup({ header: 'MenuItemGroup' }) {
+              MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+            }.margin(this._margin).key(this.componentKey).width('100%').height('100%')
+          }.backgroundColor(Color.Yellow)
+          .width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+        }.width('100%').height('100%').backgroundColor(Color.Green)
+      } else if (this.targetView == 'TabContent') {
+        Tabs() {
+          TabContent() {
+            Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White)
+          }.tabBar('Tabs1').margin(this._margin).key(this.componentKey)
+
+          TabContent() {
+            Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White)
+          }.tabBar('Tabs1').key(this.referenceComponentKey)
+        }
+        .width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'StepperItem') {
+        Stepper() {
+          StepperItem() {
+            Column() {
+              Text('Page One')
+            }
+          }
+          .backgroundColor(Color.Red)
+          .margin(this._margin)
+          .key(this.componentKey)
+          .width('100%')
+          .height('100%')
+        }
+        .backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight)
+        .key(this.parentComponentKey)
+      } else if (this.targetView == 'GridCol') {
+        GridRow({
+          columns: 1,
+          direction: GridRowDirection.Row
+        }) {
+          GridCol() {
+            Row().width('100%').height('20vp')
+          }
+          .margin(this._margin)
+          .key(this.componentKey)
+          .backgroundColor(Color.Yellow)
+          .width('100%')
+          .height('100%')
+        }
+        .width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink).key(this.parentComponentKey)
+      } else if (this.targetView == 'FlowItem') {
+        WaterFlow() {
+          FlowItem() {
+            Column() {
+              Text('WaterFlow').fontSize(12).height('16')
+              Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
+            }
+          }
+          .margin(this._margin)
+          .key(this.componentKey)
+          .backgroundColor(Color.Yellow)
+          .width('100%')
+          .height('100%')
+        }
+        .backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else if (this.targetView == 'GridItem') {
+        Grid() {
+          GridItem() {
+            Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center)
+          }
+          .width('100%')
+          .height('100%')
+          .rowStart(1)
+          .rowEnd(4)
+          .margin(this._margin)
+          .key(this.componentKey)
+          .backgroundColor(Color.Yellow)
+        }
+        .backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey)
+      } else {
+        Column() {
+          if (this.targetView == 'Button') {
+            Button('button1').commonStyle()
+          } else if (this.targetView == 'Text') {
+            Text('text1').commonStyle()
+          } else if (this.targetView == 'AlphabetIndexer') {
+            AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle()
+          } else if (this.targetView == 'Blank') {
+            Blank().backgroundColor(Color.Yellow).commonStyle()
+          } else if (this.targetView == 'Checkbox') {
+            Checkbox().commonStyle()
+          } else if (this.targetView == 'CheckboxGroup') {
+            CheckboxGroup({ group: 'checkboxGroup' }).commonStyle()
+          } else if (this.targetView == 'DataPanel') {
+            DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle()
+          } else if (this.targetView == 'DatePicker') {
+            DatePicker({
+              start: new Date('1970-1-1'),
+              end: new Date('2100-1-1'),
+            }).commonStyle()
+          } else if (this.targetView == 'Divider') {
+            Divider().commonStyle()
+          } else if (this.targetView == 'Gauge') {
+            Gauge({ value: 105 })
+              .commonStyle()
+              .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+          } else if (this.targetView == 'Image') {
+            Image($r('app.media.icon')).commonStyle()
+          } else if (this.targetView == 'ImageAnimator') {
+            ImageAnimator()
+              .images([{ src: $r('app.media.icon') }
+              ]).commonStyle()
+          } else if (this.targetView == 'LoadingProgress') {
+            LoadingProgress().commonStyle()
+          } else if (this.targetView == 'Marquee') {
+            Marquee({
+              start: true,
+              step: 50,
+              loop: Infinity,
+              fromStart: true,
+              src: 'Running Marquee starts rolling'
+            }).commonStyle()
+          } else if (this.targetView == 'Menu') {
+            Menu() {
+              MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+            }.backgroundColor(Color.Yellow).commonStyle()
+          } else if (this.targetView == 'Navigation') {
+            Navigation() {
+            }.commonStyle()
+          } else if (this.targetView == 'NavRouter') {
+            NavRouter() {
+              Row() {
+                Image($r('app.media.icon'))
+              }
+
+              NavDestination() {
+                Text('NavDestination').fontSize(10)
+              }
+            }.commonStyle()
+          } else if (this.targetView == 'Progress') {
+            Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle()
+          } else if (this.targetView == 'QRCode') {
+            QRCode('Running Marquee starts rolling').commonStyle()
+          } else if (this.targetView == 'Radio') {
+            Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle()
+          } else if (this.targetView == 'Rating') {
+            Rating({ rating: 3.5, indicator: false }).commonStyle()
+          } else if (this.targetView == 'ScrollBar') {
+            ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
+              Text().width(20).height(100).borderRadius(10).backgroundColor('#C0C0C0')
+            }.commonStyle()
+          } else if (this.targetView == 'Search') {
+            Search().commonStyle()
+          } else if (this.targetView == 'Select') {
+            Select([{ value: 'aaa' },
+              { value: 'bbb' }]).commonStyle()
+          } else if (this.targetView == 'Slider') {
+            Slider({
+              value: 50,
+              min: 0,
+              max: 100,
+              style: SliderStyle.OutSet
+            }).showTips(true).commonStyle()
+          } else if (this.targetView == 'Stepper') {
+            Stepper() {
+              StepperItem() {
+                Column() {
+                  Text('Page One')
+                }
+              }
+            }.commonStyle()
+          } else if (this.targetView == 'TextArea') {
+            TextArea({
+              placeholder: 'The text area can hold an unlimited amount of text. input your word...'
+            }).commonStyle()
+          } else if (this.targetView == 'TextClock') {
+            TextClock({ timeZoneOffset: -8 })
+              .format('hms').commonStyle()
+          } else if (this.targetView == 'TextInput') {
+            TextInput({ placeholder: 'input your word...' }).commonStyle()
+          } else if (this.targetView == 'TextPicker') {
+            TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle()
+          } else if (this.targetView == 'TextTimer') {
+            TextTimer({ isCountDown: true, count: 30000 })
+              .format('mm:ss.SS').fontColor(Color.Black).commonStyle()
+          } else if (this.targetView == 'TimePicker') {
+            TimePicker({
+              selected: new Date('2022-07-22T08:00:00')
+            }).commonStyle()
+          } else if (this.targetView == 'Toggle') {
+            Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle()
+          } else if (this.targetView == 'Web') {
+            Web({ src: 'www.example.com', controller: new WebController() }).commonStyle()
+          } else if (this.targetView == 'Circle') {
+            Circle().commonStyle()
+          } else if (this.targetView == 'Ellipse') {
+            Ellipse().commonStyle()
+          } else if (this.targetView == 'Line') {
+            Line().commonStyle().startPoint([0, 0]).endPoint([50, 100]).backgroundColor(Color.Black)
+          } else if (this.targetView == 'Polyline') {
+            Polyline().commonStyle()
+          } else if (this.targetView == 'Polygon') {
+            Polygon().commonStyle()
+          } else if (this.targetView == 'Path') {
+            Path().commonStyle()
+          } else if (this.targetView == 'Rect') {
+            Rect().commonStyle()
+          } else if (this.targetView == 'Shape') {
+            Shape() {
+              Rect().width(100).height(50)
+            }.commonStyle()
+          } else if (this.targetView == 'Badge') {
+            Badge({
+              count: 50,
+              style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
+            }) {
+              Button('message')
+                .width(100).height(50).backgroundColor(0x317aff)
+            }.commonStyle()
+          } else if (this.targetView == 'Column') {
+            Column() {
+              Column().width('100%').height(30).backgroundColor(0xAFEEEE)
+            }.commonStyle()
+          } else if (this.targetView == 'ColumnSplit') {
+            ColumnSplit() {
+              Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+            }.commonStyle()
+          } else if (this.targetView == 'Counter') {
+            Counter() {
+            }.commonStyle()
+          } else if (this.targetView == 'Flex') {
+            Flex() {
+              Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
+            }.commonStyle()
+          } else if (this.targetView == 'GridRow') {
+            GridRow().commonStyle()
+          } else if (this.targetView == 'Grid') {
+            Grid() {
+              ForEach(['0', '1', '2', '3', '4'], () => {
+                ForEach(['0', '1', '2', '3', '4'], (day: string) => {
+                  GridItem() {
+                    Text(day).backgroundColor(Color.White)
+                      .width('100%').height('100%').textAlign(TextAlign.Center)
+                  }
+                })
+              })
+            }
+            .columnsTemplate('1fr 1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr 1fr').backgroundColor(0xFAEEE0)
+            .commonStyle()
+          } else if (this.targetView == 'List') {
+            List().commonStyle()
+          } else if (this.targetView == 'Navigator') {
+            Navigator() {
+              Text('Go to back page').width('100%').height(20)
+            }.commonStyle().backgroundColor(Color.Red)
+          } else if (this.targetView == 'Panel') {
+            Panel(true) {
+              Text('Text')
+            }.backgroundColor(Color.Yellow).commonStyle()
+          } else if (this.targetView == 'Refresh') {
+            Refresh({ refreshing: false }) {
+              Text('123')
+            }.commonStyle()
+          } else if (this.targetView == 'RelativeContainer') {
+            RelativeContainer() {
+              Row()
+                .width(100)
+                .height(50)
+                .backgroundColor('#FF3333')
+                .alignRules({
+                  top: { anchor: '__container__', align: VerticalAlign.Top },
+                  left: { anchor: '__container__', align: HorizontalAlign.Start }
+                })
+                .id('marginLength')
+            }.commonStyle()
+          } else if (this.targetView == 'Row') {
+            Row().commonStyle()
+          } else if (this.targetView == 'RowSplit') {
+            RowSplit() {
+              Text('Text')
+            }.commonStyle()
+          } else if (this.targetView == 'Scroll') {
+            Scroll() {
+              Column() {
+                ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
+                  Text('Scroll' + item.toString())
+                    .width('90%')
+                    .height(50)
+                    .backgroundColor(Color.White)
+                    .textAlign(TextAlign.Center)
+                }, item => item)
+              }.width('100%')
+            }.scrollBar(BarState.On).commonStyle()
+          } else if (this.targetView == 'SideBarContainer') {
+            SideBarContainer(SideBarContainerType.Embed) {
+              Column() {
+                ForEach([1, 2, 3], (item) => {
+                  Column({ space: 5 }) {
+                    Image($r('app.media.icon')).width(50).height(50)
+                    Text('Index0' + item).fontSize(25)
+                  }
+                })
+              }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green)
+
+              Column() {
+                Text('SideBarContainer content').fontSize(25)
+              }.backgroundColor(Color.Orange)
+            }.commonStyle()
+          } else if (this.targetView == 'Stack') {
+            Stack() {
+            }.commonStyle()
+          } else if (this.targetView == 'Swiper') {
+            Swiper() {
+              ForEach([1, 2, 3], (item: string) => {
+                Text('Swiper' + item).width('90%').height(50)
+              }, item => item)
+            }.indicator(true).backgroundColor(Color.White).commonStyle()
+          } else if (this.targetView == 'Tabs') {
+            Tabs() {
+              TabContent() {
+                Column().width('100%').height('100%').backgroundColor('#00CB87')
+              }
+            }.commonStyle()
+          } else if (this.targetView == 'WaterFlow') {
+            WaterFlow() {
+              ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
+                FlowItem() {
+                  Column() {
+                    Text('WaterFlow' + item).fontSize(12).height('16')
+                    Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill)
+                  }
+                }
+              }, item => item)
+            }.commonStyle()
+          }
+        }
+        .key(this.parentComponentKey)
+        .backgroundColor(Color.Red)
+      }
+    }.backgroundColor(Color.Yellow)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingBasePage.ets

+/*
+ * Copyright (c) 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 attrsManager from '../../common/AttrsManager';
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct paddingPage {
+  //Use for TimePicker.
+  private selectedTime: Date = new Date('2022-07-22T08:00:00')
+  //Use for QRCode,Marquee.
+  private src: string = 'Running Marquee starts rolling'
+  //Use for AlphabetIndexer,TextPicker.
+  private value: string[] = ['#', 'A', 'B']
+  //Use for DataPanel.
+  public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10]
+  @State _padding: Padding = { left: 0, right: 0, top: 0, bottom: 0 };
+  @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : ''
+  @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : ''
+  @State parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : ''
+  @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : ''
+
+  onPageShow() {
+    console.info('padding page show called ')
+    attrsManager.registerDataChange(value => this._padding = value.padding)
+  }
+
+  @Styles commonStyle(){
+    .padding(this._padding)
+    .key(this.componentKey)
+  }
+
+  build() {
+    Row() {
+      if (this.targetView == 'AlphabetIndexer') {
+        AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle()
+      } else if (this.targetView == 'Text') {
+        Text('1').commonStyle()
+      } else if (this.targetView == 'Button') {
+        Button('1').commonStyle()
+      } else if (this.targetView == 'BlankRow') {
+        Row() {
+          Blank().color(Color.Red).commonStyle()
+        }
+      } else if (this.targetView == 'BlankColumn') {
+        Column() {
+          Blank().color(Color.Orange).commonStyle()
+        }
+      } else if (this.targetView == 'Checkbox') {
+        Checkbox().backgroundColor(Color.Orange).commonStyle()
+      } else if (this.targetView == 'CheckboxGroup') {
+        CheckboxGroup({ group: 'checkboxGroup' }).commonStyle().backgroundColor(Color.Orange)
+      } else if (this.targetView == 'DataPanel') {
+        DataPanel({ values: this.valueArr }).commonStyle()
+      } else if (this.targetView == 'DatePicker') {
+        DatePicker({
+          start: new Date('1970-1-1'),
+          end: new Date('2100-1-1'),
+        }).commonStyle()
+      } else if (this.targetView == 'Divider') {
+        Divider().strokeWidth(8).color(Color.Red).commonStyle()
+      } else if (this.targetView == 'Gauge') {
+        Gauge({ value: 105 }).commonStyle().colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
+      } else if (this.targetView == 'Image') {
+        Image($r('app.media.icon')).commonStyle().height(110).backgroundColor(Color.Red)
+      } else if (this.targetView == 'ImageAnimator') {
+        ImageAnimator()
+          .images([
+            {
+              src: $r('app.media.icon')
+            }
+          ]).commonStyle()
+      } else if (this.targetView == 'LoadingProgress') {
+        LoadingProgress().backgroundColor(Color.Red).commonStyle()
+      } else if (this.targetView == 'Marquee') {
+        Marquee({
+          start: true,
+          step: 50,
+          loop: Infinity,
+          fromStart: true,
+          src: this.src
+        }).commonStyle()
+      } else if (this.targetView == 'Navigation') {
+        Navigation().commonStyle()
+      } else if (this.targetView == 'NavRouter') {
+        NavRouter().commonStyle()
+      } else if (this.targetView == 'Stepper') {
+        Stepper() {
+          StepperItem()
+        }.commonStyle()
+      } else if (this.targetView == 'StepperItem') {
+        Stepper() {
+          StepperItem().commonStyle()
+        }
+      } else if (this.targetView == 'Progress') {
+        Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle()
+      } else if (this.targetView == 'QRCode') {
+        QRCode(this.src).commonStyle()
+      } else if (this.targetView == 'Radio') {
+        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
+          .commonStyle()
+          .backgroundColor(Color.Red)
+      } else if (this.targetView == 'Rating') {
+        Rating({ rating: 3.5 }).commonStyle()
+      } else if (this.targetView == 'RichText') {
+        RichText('RichText').commonStyle()
+      } else if (this.targetView == 'ScrollBar') {
+        ScrollBar({ scroller: new Scroller(), state: BarState.On }) {
+          Text()
+            .width(10)
+            .height(50)
+            .backgroundColor('#C0C0C0')
+        }
+        .commonStyle()
+      } else if (this.targetView == 'Search') {
+        Search()
+          .commonStyle()
+      } else if (this.targetView == 'Select') {
+        Select([{ value: 'aaa' },
+          { value: 'bbb' }])
+          .commonStyle()
+      } else if (this.targetView == 'Slider') {
+        Slider({
+          value: 50,
+        }).showTips(true).commonStyle()
+      } else if (this.targetView == 'TextArea') {
+        TextArea({
+          placeholder: 'The text area can hold an unlimited amount of text. input your word...'
+        }).placeholderFont({ size: 16, weight: 400 }).commonStyle()
+      } else if (this.targetView == 'TextClock') {
+        TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle()
+      } else if (this.targetView == 'TextInput') {
+        TextInput({ placeholder: 'input your word...' }).commonStyle().height(40)
+      } else if (this.targetView == 'TextPicker') {
+        TextPicker({ range: this.value }).commonStyle()
+      } else if (this.targetView == 'TextTimer') {
+        TextTimer({ isCountDown: true, count: 30000 }).format('mm:ss.SS').commonStyle()
+      } else if (this.targetView == 'TimePicker') {
+        TimePicker({
+          selected: this.selectedTime,
+        }).useMilitaryTime(true).commonStyle()
+      } else if (this.targetView == 'Toggle') {
+        Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle()
+      } else if (this.targetView == 'Web') {
+        Web({ src: 'www.example.com', controller: new WebController() }).commonStyle()
+      } else if (this.targetView == 'Circle') {
+        Circle().commonStyle()
+      } else if (this.targetView == 'Ellipse') {
+        Ellipse().commonStyle()
+      } else if (this.targetView == 'Line') {
+        Line()
+          .startPoint([0, 0])
+          .endPoint([50, 100])
+          .commonStyle()
+      } else if (this.targetView == 'Polyline') {
+        Polyline()
+          .commonStyle()
+          .points([[20, 0], [0, 100], [100, 90]])
+      } else if (this.targetView == 'Polygon') {
+        Polygon()
+          .commonStyle()
+          .points([[0, 0], [0, 100], [100, 100], [100, 0]])
+      } else if (this.targetView == 'Path') {
+        Path()
+          .commonStyle()
+      } else if (this.targetView == 'Rect') {
+        Rect()
+          .commonStyle()
+      } else if (this.targetView == 'Shape') {
+        Shape() {
+          Rect().width(100).height(50)
+        }
+        .commonStyle()
+      } else if (this.targetView == 'Menu') {
+        Menu() {
+          MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' })
+        }.backgroundColor(Color.Yellow).commonStyle()
+      } else if (this.targetView == 'MenuItem') {
+        Row() {
+          Menu() {
+            MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+              .padding(this._padding)
+              .key(this.componentKey)
+          }
+        }
+      } else if (this.targetView == 'MenuItemGroup') {
+        Row() {
+          Menu() {
+            MenuItemGroup({ header: 'MenuItemGroup' }) {
+              MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' })
+            }.key(this.componentKey).padding(this._padding)
+          }
+        }
+      }
+    }.backgroundColor(this.parentBackGroundColor)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/NavRouterView.ets

+/*
+ * Copyright (c) 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 NavRouterView {
+  @State isActive: boolean = false
+  @State dex: number = 0
+  @Link _markAnchor: Position;
+  private componentKey: string;
+
+  build() {
+    NavRouter() {
+      Row() {
+        Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
+        Text(`NavRouter`)
+          .fontSize(22)
+          .fontWeight(500)
+          .textAlign(TextAlign.Center)
+      }
+      .width(180)
+      .height(72)
+      .backgroundColor('#fff')
+      .borderRadius(24)
+
+      NavDestination() {
+        Text(`NavDestination`).fontSize(50)
+        Flex({ direction: FlexDirection.Row }) {
+          Row() {
+            Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
+            Text('NavDestination content').fontSize(30)
+          }.padding({ left: 15 })
+        }
+      }.backgroundColor('#ccc')
+      .title(`NavDestination`)
+    }.onStateChange((isActivated: boolean) => {
+      console.info('isActivated = ' + isActivated);
+    })
+    .markAnchor(this._markAnchor)
+    .key(this.componentKey)
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/color.json

+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}
\ No newline at end of file