@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.2 → 4.0.0-alpha.21

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

@@ -1,5 +1,4 @@
 import { eventHandler, createTaroEvent, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
-import { createLazyChildren } from './render'
 import commonStyleModify from './style'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
@@ -7,6 +6,21 @@ import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent, TaroButtonElement, TaroStyleType } from '@tarojs/runtime'
 
+interface ButtonAttrs {
+  disabled?: boolean
+}
+
+@Extend(Button)
+function attrs(attr: ButtonAttrs) {
+  .enabled(!attr.disabled)
+}
+
+function getAttributes(node: TaroButtonElement): ButtonAttrs {
+  return {
+    disabled: node._attrs.disabled || false,
+  }
+}
+
 @Extend(Button)
 function themeStyles(style: TaroStyleType) {
   .fontColor(style.color)
@@ -66,13 +80,13 @@ function getThemeAttributes (node: TaroButtonElement): TaroStyleType {
   }
 }
 
-function getButtonWidth (node: TaroButtonElement) {
+function getButtonWidth (node: TaroButtonElement): string | number {
   const isMini = node._attrs.size === 'mini'
 
   return isMini ? convertNumber2VP(120) : '100%'
 }
 
-function getButtonHeight (node: TaroButtonElement) {
+function getButtonHeight (node: TaroButtonElement): string | number {
   const isMini = node._attrs.size === 'mini'
 
   return isMini ? convertNumber2VP(60) : convertNumber2VP(92)
@@ -94,38 +108,54 @@ function getButtonMinHeight (node: TaroButtonElement): string | number | undefin
   return getButtonHeight(node)
 }
 
-@Builder
-export default function TaroButton (node: TaroButtonElement) {
-  Button({ stateEffect: !node._attrs.disabled }) {
-    Row() {
-      if (node._attrs.loading) {
-        LoadingProgress()
-        .width(20).height(20)
-        .color(getThemeAttributes(node).color)
-      }
-      createLazyChildren(node)
+@Component
+export default struct TaroButton {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroButtonElement) => void = this.customBuilder
+  @ObjectLink node: TaroButtonElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
     }
   }
-  .themeStyles(getThemeAttributes(node))
-  .attributeModifier(commonStyleModify.setNode(node))
-  .constraintSize({
-    minWidth: node.hmStyle?.minWidth || getButtonMinWidth(node),
-    minHeight: node.hmStyle?.minHeight || getButtonMinHeight(node),
-    maxWidth: node.hmStyle?.maxWidth,
-    maxHeight: node.hmStyle?.maxHeight,
-  })
-  .type(ButtonType.Normal)
-  .onClick((e: ClickEvent) => {
-    if (node._attrs.formType && ['submit', 'reset'].includes(node._attrs.formType)) {
-      const eventName = node._attrs.formType + '-btn'
-      const event: TaroEvent = createTaroEvent(eventName, {}, node)
-      eventHandler(event, eventName, node)
+
+  build() {
+    Button({ stateEffect: !this.node._attrs.disabled }) {
+      if (this.node._attrs.loading) {
+        Row() {
+          LoadingProgress()
+            .width(20).height(20)
+            .color(getThemeAttributes(this.node).color)
+          this.createLazyChildren(this.node)
+        }
+      } else {
+        this.createLazyChildren(this.node)
+      }
     }
-    eventHandler(e, 'click', node)
-  })
-  .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-  .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-    node._nodeInfo.areaInfo = res[1]
-  }))
-  .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+    .themeStyles(getThemeAttributes(this.node))
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .attrs(getAttributes(this.node))
+    .constraintSize({
+      minWidth: this.node.hmStyle?.minWidth || getButtonMinWidth(this.node),
+      minHeight: this.node.hmStyle?.minHeight || getButtonMinHeight(this.node),
+      maxWidth: this.node.hmStyle?.maxWidth,
+      maxHeight: this.node.hmStyle?.maxHeight,
+    })
+    .type(ButtonType.Normal)
+    .onClick((e: ClickEvent) => {
+      if (this.node._attrs.formType && ['submit', 'reset'].includes(this.node._attrs.formType)) {
+        const eventName = this.node._attrs.formType + '-btn'
+        const event: TaroEvent = createTaroEvent(eventName, {}, this.node)
+        eventHandler(event, eventName, this.node)
+      }
+      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()))
+    .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))
+  }
 }

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

@@ -0,0 +1,51 @@
+import type { TaroAny, TaroCanvasElement } from '@tarojs/runtime'
+import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime'
+import commonStyleModify from './style'
+
+@Component
+export default struct TaroCanvas {
+  @ObjectLink node: TaroCanvasElement
+  rafId: number = 0
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  aboutToDisappear() {
+    if(this.rafId) {
+      cancelAnimationFrame(this.rafId)
+    }
+  }
+
+  build() {
+    Canvas(this.node._context)
+      .attributeModifier(commonStyleModify.setNode(this.node as TaroAny, {
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#ffff00'
+      }).setAnimationStyle(this.overwriteStyle))
+      .onReady(() => {
+        const context = this.node._context
+
+        const draw = () => {
+          if (this.node._drawList.length) {
+            while (this.node._drawList.length) {
+              const item = this.node._drawList.shift()
+              if (item) {
+                if (typeof context[item.key] === 'function') {
+                  context[item.key](...[].concat(item.value))
+                } else {
+                  context[item.key] = item.value
+                }
+              }
+            }
+          }
+          this.rafId = requestAnimationFrame(draw)
+        }
+        draw()
+      })
+  }
+}

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

@@ -1,11 +1,11 @@
 import { createTaroEvent, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
-import { createLazyChildren } from './render'
-import { FlexManager } from './utils/FlexManager'
+import commonStyleModify, { rowModify, columnModify } from './style'
+import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent, TaroCheckboxElement, TaroCheckboxGroupElement } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 
 interface CheckboxOptions {
   name?: string
@@ -13,17 +13,20 @@ interface CheckboxOptions {
 }
 interface CheckboxAttrs {
   selectedColor?: ResourceColor
+  disabled?: boolean
 }
 
 @Extend(Checkbox)
 function checkboxAttr(attr: CheckboxAttrs) {
   .selectedColor(attr.selectedColor)
+  .enabled(!attr.disabled)
 }
 
 function getAttributes (node: TaroCheckboxElement): CheckboxAttrs {
   const _attrs = node._attrs
   const checkboxAttrs: CheckboxAttrs = {}
   checkboxAttrs.selectedColor = _attrs.color || '#1aad19'
+  checkboxAttrs.disabled = !!_attrs.disabled
   return checkboxAttrs
 }
 
@@ -33,59 +36,62 @@ function getOptions (node: TaroCheckboxElement): CheckboxOptions {
   }
 }
 
+
 @Component
 export struct TaroCheckbox {
-  node: TaroCheckboxElement | null = null
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroCheckboxElement) => void = this.customBuilder
+  @ObjectLink node: TaroCheckboxElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
+      this.node._instance = this
       this.node._reset = this.node.checked || false
     }
   }
 
   build () {
-    if (this.node) {
-      Stack() {
-        Row() {
-          Checkbox(getOptions(this.node))
-            .attributeModifier(commonStyleModify.setNode(this.node))
-            .checkboxAttr(getAttributes(this.node))
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-            .select(this.node.checked)
-            .onChange((value: boolean) => {
-              if (this.node) {
-                if (!!this.node?._attrs.disabled) {
-                  this.node.updateComponent()
-                } else {
-                  this.node.updateCheckedValue(value)
-      
-                  if (value) {
-                    const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
-                    eventHandler(event, 'change', this.node)
-                  }
+    Stack() {
+      Row() {
+        Checkbox(getOptions(this.node))
+          .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+          .checkboxAttr(getAttributes(this.node))
+          .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
+          .select(this.node.checked)
+          .onChange((value: boolean) => {
+            if (this.node) {
+              if (!!this.node?._attrs.disabled) {
+                this.node.updateComponent()
+              } else {
+                this.node.updateCheckedValue(value)
+
+                if (value) {
+                  const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
+                  eventHandler(event, 'change', this.node)
                 }
               }
-            })
-            .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]
-              }
-            }))
-            .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-          Text(this.node.textContent)
-            .textAlign(TextAlign.Center)
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-        }
-        .onClick(() => {
-          if (this.node) {
-            if (!this.node?._attrs.disabled) {
-              this.node.checked = !this.node.checked
             }
-          }
-        })
+          })
+          .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]
+            }
+          }))
+          .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+        Text(this.node.textContent)
+          .textAlign(TextAlign.Center)
+          .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
       }
+      .onClick(() => {
+        if (this.node) {
+          if (!this.node?._attrs.disabled) {
+            this.node.checked = !this.node.checked
+          }
+        }
+      })
     }
   }
 }
@@ -94,7 +100,10 @@ interface ChangeEventDetail { value: string[] }
 
 @Component
 export struct TaroCheckboxGroup {
-  node: TaroCheckboxGroupElement | null = null
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroCheckboxGroupElement) => void = this.customBuilder
+  @ObjectLink node: TaroCheckboxGroupElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
@@ -102,6 +111,7 @@ export struct TaroCheckboxGroup {
 
   aboutToAppear () {
     if (this.node) {
+      this.node._instance = this
       // 阻止事件冒泡传递上去
       this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
         e.stopPropagation()
@@ -120,26 +130,27 @@ export struct TaroCheckboxGroup {
   }
 
   build() {
-    if (this.node) {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-        Row() {
-          createLazyChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .defaultEvent()
-        .visibleChangeEvent()
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-      } else {
-        Column() {
-          createLazyChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .defaultEvent()
-        .visibleChangeEvent()
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    if (FlexManager.useFlexLayout(this.node)) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        this.createLazyChildren(this.node)
+      }
+      .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)
+      }
+      .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
       }
+      .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
     }
   }
 }

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

@@ -1,40 +1,62 @@
 import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
-import { createLazyChildren } from './render'
+import commonStyleModify, { rowModify, columnModify } from './style'
+
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroFormElement } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
+
+@Component
+export default struct TaroForm {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroFormElement) => void = this.customBuilder
+  @ObjectLink node: TaroFormElement
+
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
-@Builder
-export default function TaroForm (node: TaroFormElement) {
-  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
-    Row() {
-      createLazyChildren(node)
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
     }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(FlexManager.flexOptions(node).alignItems as VerticalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
-  } else {
-    Column() {
-      createLazyChildren(node)
+  }
+
+  build() {
+    if (FlexManager.useFlexLayout(this.node)) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        this.createLazyChildren(this.node)
+      }
+      .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()))
+      .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)
+      }
+      .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()))
+      .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)
+      }
+      .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()))
+      .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))
     }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(FlexManager.flexOptions(node).alignItems as HorizontalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
   }
 }

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

@@ -1,7 +1,7 @@
 import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, convertNumber2PX } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroIconElement, TaroAny } from '@tarojs/runtime'
 
@@ -48,22 +48,34 @@ function getIconData (node: TaroIconElement): Resource | null {
   }
 }
 
-@Builder
-export default function TaroIcon (node: TaroIconElement) {
-  Image(getIconData(node))
-    .objectFit(ImageFit.Contain)
-    .fillColor(node._attrs.color || ICON_COLOR_MAP[node._attrs.type] || Color.Black)
-    .attributeModifier(commonStyleModify.setNode(node))
-    .size({
-      width: convertNumber2VP(Number(node._attrs.size) || 23),
-      height: convertNumber2VP(Number(node._attrs.size) || 23),
-    })
-    .width(getNormalAttributes(node).width || convertNumber2PX(23))
-    .height(getNormalAttributes(node).height || convertNumber2PX(23))
-    .onComplete(e => eventHandler(e, 'complete', node))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
+@Component
+export default struct TaroIcon {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroIconElement) => void = this.customBuilder
+  @ObjectLink node: TaroIconElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  build() {
+    Image(getIconData(this.node))
+      .objectFit(ImageFit.Contain)
+      .fillColor(this.node._attrs.color || ICON_COLOR_MAP[this.node._attrs.type] || Color.Black)
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .size({
+        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']))
+      .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

@@ -1,11 +1,11 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroImageElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
+import type { TaroImageElement, TaroAny } from '@tarojs/runtime'
 
-function getImageMode (mode: string): ImageFit {
+export function getImageMode (mode: string): ImageFit {
   switch (mode) {
     case 'aspectFit': return ImageFit.Contain
     case 'aspectFill': return ImageFit.Cover
@@ -16,15 +16,35 @@ function getImageMode (mode: string): ImageFit {
   }
 }
 
-@Builder
-export default function TaroImage (node: TaroImageElement) {
-  Image(node.getAttribute('src'))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .objectFit(getImageMode(node.getAttribute('mode')))
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onComplete(e => eventHandler(e, 'complete', node))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+@Component
+export default struct TaroImage {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroImageElement) => void = this.customBuilder
+  @ObjectLink node: TaroImageElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  build() {
+    Image(this.node.getAttribute('src'))
+      .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))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      // TODO: 临时改为申明式，后续等鸿蒙修复modify设置失败的bug后删除该申明
+      .borderRadius({
+        topLeft: this.node._st.hmStyle.borderTopLeftRadius,
+        topRight: this.node._st.hmStyle.borderTopRightRadius,
+        bottomLeft: this.node._st.hmStyle.borderBottomLeftRadius,
+        bottomRight: this.node._st.hmStyle.borderBottomRightRadius
+      })
+  }
 }