@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.22 → 4.0.0-alpha.24

package/dist/components-harmony-ets/button.ets

@@ -111,7 +111,7 @@ function getButtonMinHeight (node: TaroButtonElement): string | number | undefin
 @Component
 export default struct TaroButton {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroButtonElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroButtonElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroButtonElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -128,10 +128,10 @@ export default struct TaroButton {
           LoadingProgress()
             .width(20).height(20)
             .color(getThemeAttributes(this.node).color)
-          this.createLazyChildren(this.node)
+          this.createLazyChildren(this.node, 0)
         }
       } else {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
     }
     .themeStyles(getThemeAttributes(this.node))
@@ -152,7 +152,7 @@ export default struct TaroButton {
       }
       eventHandler(e, 'click', this.node)
     })
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
     .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
       this.node._nodeInfo.areaInfo = res[1]
     }))

package/dist/components-harmony-ets/checkbox.ets

@@ -40,7 +40,7 @@ function getOptions (node: TaroCheckboxElement): CheckboxOptions {
 @Component
 export struct TaroCheckbox {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroCheckboxElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroCheckboxElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -74,7 +74,7 @@ export struct TaroCheckbox {
               }
             }
           })
-          .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+          .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
           .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
             if (this.node) {
               this.node._nodeInfo.areaInfo = res[1]
@@ -101,7 +101,7 @@ interface ChangeEventDetail { value: string[] }
 @Component
 export struct TaroCheckboxGroup {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroCheckboxGroupElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroCheckboxGroupElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxGroupElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -121,7 +121,7 @@ export struct TaroCheckboxGroup {
   }
 
   @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
     .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
       if (this.node) {
         this.node._nodeInfo.areaInfo = res[1]
@@ -132,21 +132,21 @@ export struct TaroCheckboxGroup {
   build() {
     if (FlexManager.useFlexLayout(this.node)) {
       Flex(FlexManager.flexOptions(this.node)) {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .defaultEvent()
       .visibleChangeEvent()
     } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
       Row() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .defaultEvent()
       .visibleChangeEvent()
     } else {
       Column() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .defaultEvent()

package/dist/components-harmony-ets/form.ets

@@ -12,7 +12,7 @@ import { isUndefined } from '@tarojs/shared'
 @Component
 export default struct TaroForm {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroFormElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroFormElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroFormElement
 
   @State overwriteStyle: Record<string, TaroAny> = {}
@@ -26,33 +26,33 @@ export default struct TaroForm {
   build() {
     if (FlexManager.useFlexLayout(this.node)) {
       Flex(FlexManager.flexOptions(this.node)) {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
       Row() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     } else {
       Column() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))

package/dist/components-harmony-ets/icon.ets

@@ -51,7 +51,7 @@ function getIconData (node: TaroIconElement): Resource | null {
 @Component
 export default struct TaroIcon {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroIconElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroIconElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroIconElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -70,8 +70,8 @@ export default struct TaroIcon {
         width: Number(this.node._attrs.size) || 23,
         height: Number(this.node._attrs.size) || 23
       })
-      .onComplete(e => eventHandler(e, 'complete', this.node))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onComplete(e => { eventHandler(e, 'complete', this.node) })
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]

package/dist/components-harmony-ets/image.ets

@@ -19,7 +19,7 @@ export function getImageMode (mode: string): ImageFit {
 @Component
 export default struct TaroImage {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroImageElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroImageElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroImageElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -31,13 +31,13 @@ export default struct TaroImage {
 
   build() {
     Image(this.node.getAttribute('src'))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .objectFit(getImageMode(this.node.getAttribute('mode')))
       .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .onComplete(e => eventHandler(e, 'complete', this.node))
+      .onComplete(e => { eventHandler(e, 'complete', this.node) })
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
       // TODO: 临时改为申明式，后续等鸿蒙修复modify设置失败的bug后删除该申明
       .borderRadius({

package/dist/components-harmony-ets/input.ets

@@ -49,12 +49,24 @@ function getPlaceholderColor (node: TaroInputElement): string {
   return placeholderTextColor || parseStyles(placeholderStyle)?.color
 }
 
+function getPlaceholderFont(node: TaroInputElement): Font {
+  const placeholderStyle: string = node._attrs.placeholderStyle || ''
+  const styles = parseStyles(placeholderStyle);
+  if (styles) {
+    return {
+      size: styles.fontSize,
+    }
+  }
+
+  return {}
+}
+
 @Component
 export default struct TaroInput {
   @State value: string = ''
 
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroInputElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroInputElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroInputElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -72,10 +84,11 @@ export default struct TaroInput {
 
   build () {
     TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
-    .key(this.node._nid)
+    .key(this.node._nid.toString())
     .type(getInputType(this.node))
     .maxLength(Number(this.node._attrs?.maxlength) || null)
     .placeholderColor(getPlaceholderColor(this.node))
+    .placeholderFont(getPlaceholderFont(this.node))
     .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
     .padding(0) // Note: 移出 Input 默认 padding 设置
     .backgroundColor(getStyleAttr(this.node, "backgroundColor"))// 
@@ -93,7 +106,7 @@ export default struct TaroInput {
       const event: TaroEvent = createTaroEvent('confirm', { detail: { value: this.value } }, this.node)
       eventHandler(event, 'confirm', this.node)
     })
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
     .onBlur(() => {
       const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
       eventHandler(event, 'blur', this.node)

package/dist/components-harmony-ets/label.ets

@@ -38,7 +38,7 @@ function handleTargetChange (id: string) {
 @Component
 export default struct TaroLabel {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroLabelElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroLabelElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroLabelElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -51,51 +51,51 @@ export default struct TaroLabel {
   build() {
     if (FlexManager.useFlexLayout(this.node)) {
       Flex(FlexManager.flexOptions(this.node)) {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .onClick((e: ClickEvent) => {
         const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
-        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid.toString() || ''
 
         handleTargetChange(id)
         eventHandler(e, 'click', this.node)
       })
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
       Row() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .onClick((e: ClickEvent) => {
         const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
-        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid.toString() || ''
 
         handleTargetChange(id)
         eventHandler(e, 'click', this.node)
       })
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     } else {
       Column() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .onClick((e: ClickEvent) => {
         const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
-        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid.toString() || ''
 
         handleTargetChange(id)
         eventHandler(e, 'click', this.node)
       })
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
       .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
         this.node._nodeInfo.areaInfo = res[1]
       }))

package/dist/components-harmony-ets/listView.ets

@@ -2,10 +2,11 @@ import commonStyleModify from './style'
 
 import type { TaroViewElement, TaroAny } from '@tarojs/runtime'
 
+@Reusable
 @Component
 export default struct TaroListView {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroViewElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroViewElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroViewElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -15,10 +16,14 @@ export default struct TaroListView {
     }
   }
 
+  aboutToReuse(params: TaroAny): void {
+    // this.node = params.node;
+  }
+
   build() {
     ListItem() {
       Stack() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
     }
     .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))

package/dist/components-harmony-ets/movableArea.ets

@@ -11,7 +11,7 @@ export default struct TaroMovableArea {
   customBuilder() {
   }
 
-  @BuilderParam createLazyChildren: (node: TaroMovableAreaElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroMovableAreaElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroMovableAreaElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -28,7 +28,7 @@ export default struct TaroMovableArea {
   build() {
     if (FlexManager.useFlexLayout(this.node)) {
       Flex(FlexManager.flexOptions(this.node)) {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .clip(true)
@@ -55,7 +55,7 @@ export default struct TaroMovableArea {
       )
     } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
       Row() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .clip(true)
@@ -82,7 +82,7 @@ export default struct TaroMovableArea {
       )
     } else {
       Column() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .clip(true)

package/dist/components-harmony-ets/movableView.ets

@@ -9,7 +9,7 @@ import { FlexManager } from './utils/flexManager'
 @Component
 export default struct TaroMovableView {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroMovableViewElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroMovableViewElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroMovableViewElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -24,17 +24,17 @@ export default struct TaroMovableView {
     Stack() {
       if (FlexManager.useFlexLayout(this.node)) {
         Flex(FlexManager.flexOptions(this.node)) {
-          this.createLazyChildren(this.node)
+          this.createLazyChildren(this.node, 0)
         }
         .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
         Row() {
-          this.createLazyChildren(this.node)
+          this.createLazyChildren(this.node, 0)
         }
         .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       } else {
         Column() {
-          this.createLazyChildren(this.node)
+          this.createLazyChildren(this.node, 0)
         }
         .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       }

package/dist/components-harmony-ets/navigationBar.ets

@@ -8,7 +8,7 @@ import type { IComponentAttributeUpdateEvents } from './pageMeta'
 @Component
 export default struct TaroNavigationBar {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroNavigationBarElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroNavigationBarElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroNavigationBarElement
 
   aboutToAppear(): void {
@@ -20,16 +20,16 @@ export default struct TaroNavigationBar {
     }
 
     // FIXME 在 Harmony 提供 @Watch 文档后，根据 node 实际使用更细粒度的监听
-    eventCenter.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+    eventCenter?.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
     this.handleAttributes(this.node._attrs)
   }
 
   aboutToDisappear(): void {
-    eventCenter.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+    eventCenter?.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
   }
 
   handleAttributeUpdate = (opt: IComponentAttributeUpdateEvents) => {
-    if (opt.id === this.node._nid && opt.tagName === 'NAVIGATION-BAR') {
+    if (opt.id === this.node._nid.toString() && opt.tagName === 'NAVIGATION-BAR') {
       const attrs: Record<string, TaroAny> = {}
       attrs[opt.attribute] = opt.value
       this.handleAttributes(attrs)
@@ -51,7 +51,7 @@ export default struct TaroNavigationBar {
     if (attrs.frontColor) {
       options.frontColor = attrs.frontColor
     }
-    eventCenter.trigger('__taroNavigationStyle', options)
+    eventCenter?.trigger('__taroNavigationStyle', options)
     // FIXME: 以下属性暂时不支持
     // attrs.colorAnimationDuration
     // attrs.colorAnimationTimingFunc
@@ -59,7 +59,7 @@ export default struct TaroNavigationBar {
 
   build() {
     if (true) {
-      this.createLazyChildren(this.node)
+      this.createLazyChildren(this.node, 0)
     }
   }
 }

package/dist/components-harmony-ets/pageMeta.ets

@@ -15,7 +15,7 @@ export interface IComponentAttributeUpdateEvents {
 @Component
 export default struct TaroPageMeta {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroPageMetaElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroPageMetaElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroPageMetaElement
 
   page: TaroAny = {}
@@ -32,16 +32,16 @@ export default struct TaroPageMeta {
     }
 
     // FIXME 在 Harmony 提供 @Watch 文档后，根据 node 实际使用更细粒度的监听
-    eventCenter.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+    eventCenter?.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
     this.handleAttributes(this.node._attrs)
   }
 
   aboutToDisappear(): void {
-    eventCenter.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
+    eventCenter?.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
   }
 
   handleAttributeUpdate = (opt: IComponentAttributeUpdateEvents) => {
-    if (opt.id === this.node._nid && opt.tagName === 'PAGE-META') {
+    if (opt.id === this.node._nid.toString() && opt.tagName === 'PAGE-META') {
       const attrs: Record<string, TaroAny> = {}
       attrs[opt.attribute] = opt.value
       this.handleAttributes(attrs)
@@ -79,7 +79,7 @@ export default struct TaroPageMeta {
     // pageFontSize
     // pageOrientation
     if (triggerStyleEvent) {
-      eventCenter.trigger('__taroPageStyle', options)
+      eventCenter?.trigger('__taroPageStyle', options)
     }
     // onResize
     // onScroll
@@ -88,7 +88,7 @@ export default struct TaroPageMeta {
 
   build() {
     if (true) {
-      this.createLazyChildren(this.node)
+      this.createLazyChildren(this.node, 0)
     }
   }
 }

package/dist/components-harmony-ets/picker.ets

@@ -226,7 +226,7 @@ export struct PickerView {
 @Component
 export default struct TaroPicker {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroPickerElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroPickerElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroPickerElement
 
   aboutToAppear () {
@@ -298,7 +298,7 @@ export default struct TaroPicker {
     .onClick((e: ClickEvent) => {
       eventHandler(e, 'click', this.node)
     })
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onTouch(shouldBindEvent((e: TouchEvent) => { eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node) }, this.node, TOUCH_EVENT_MAP.values()))
     .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
       if (this.node) {
         this.node._nodeInfo.areaInfo = res[1]
@@ -313,7 +313,7 @@ export default struct TaroPicker {
   build() {
     if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
       Row() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .defaultEvent()
       .visibleChangeEvent()
@@ -321,7 +321,7 @@ export default struct TaroPicker {
       .justifyContent(FlexManager.justifyContent(this.node))
     } else {
       Column() {
-        this.createLazyChildren(this.node)
+        this.createLazyChildren(this.node, 0)
       }
       .defaultEvent()
       .visibleChangeEvent()

package/dist/components-harmony-ets/progress.ets

@@ -10,7 +10,7 @@ const PROGRESS_DEFAULTINFOFONTSIZE = 16
 @Component
 export default struct TaroProgress {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroProgressElement) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroProgressElement, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroProgressElement
   @State overwriteStyle: Record<string, TaroAny> = {}
 
@@ -35,7 +35,7 @@ export default struct TaroProgress {
           enableSmoothEffect: Boolean(this.node.getAttribute('active')),
         })
 
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .onClick(shouldBindEvent((e: ClickEvent) => { eventHandler(e, 'click', this.node) }, this.node, ['click']))
         .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
           if (this.node) {

package/dist/components-harmony-ets/pseudo.ets

@@ -43,7 +43,7 @@ function textSpecialFontStyle(attr: TaroTextStyleType) {
 @Component
 export default struct PseduoChildren {
   @Builder customBuilder() {}
-  @BuilderParam createLazyChildren: (node: TaroAny) => void = this.customBuilder
+  @BuilderParam createLazyChildren: (node: TaroAny, layer?: number) => void = this.customBuilder
   @ObjectLink node: TaroViewElement
 
   build () {
@@ -61,7 +61,7 @@ export default struct PseduoChildren {
           .flexAttrs(this.node._pseudo_before.hmStyle || {})
         }
       }
-      this.createLazyChildren(this.node)
+      this.createLazyChildren(this.node, 0)
       // 伪类::After
       if (this.node._pseudo_after) {
         if (this.node._pseudo_after?.hmStyle.content) {