@tarojs/plugin-platform-harmony-ets 4.0.0-beta.36 → 4.0.0-beta.37

package/dist/apis/index.ts

@@ -112,7 +112,8 @@ export function pxTransform (size: number): number | string {
   const val = size
   switch (targetUnit) {
     case 'vp':
-      return pxTransformHelper(size, 'px')
+      // return pxTransformHelper(size, 'px')
+      return `${size}lpx`
     default:
       // NOTE: 鸿蒙环境下 style 会自动完成设计稿转换，无需在方法内二次调整
   }

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

@@ -107,41 +107,39 @@ export default struct TaroButton {
   }
 
   build() {
-    if (this.node?.hmStyle?.display !== 'none') {
-      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 {
+    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)
       }
-      .themeStyles(getThemeAttributes(this.node))
-      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .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))
     }
+    .themeStyles(getThemeAttributes(this.node))
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .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/checkbox.ets

@@ -49,47 +49,45 @@ export struct TaroCheckbox {
   }
 
   build () {
-    if (this.node && this.node?.hmStyle?.display !== 'none') {
-      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)
-                  }
+    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
+          }
+        }
+      })
     }
   }
 }
@@ -128,26 +126,24 @@ export struct TaroCheckboxGroup {
   }
 
   build() {
-    if (this.node && this.node?.hmStyle?.display !== 'none') {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-        Row() {
-          this.createLazyChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .defaultEvent()
-        .visibleChangeEvent()
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-      } else {
-        Column() {
-          this.createLazyChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .defaultEvent()
-        .visibleChangeEvent()
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
       }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }

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

@@ -22,34 +22,32 @@ export default struct TaroForm {
   }
 
   build() {
-    if (this.node?.hmStyle?.display !== 'none') {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-        Row() {
-          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))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-      } else {
-        Column() {
-          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))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        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))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    } else {
+      Column() {
+        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))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }

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

@@ -62,25 +62,23 @@ export default struct TaroIcon {
   }
 
   build() {
-    if (this.node?.hmStyle?.display !== 'none') {
-      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, {
-          width: convertNumber2PX(23),
-          height: convertNumber2PX(23)
-        }).setAnimationStyle(this.overwriteStyle))
-        .size({
-          width: convertNumber2VP(Number(this.node._attrs.size) || 23),
-          height: convertNumber2VP(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]
-        }))
-    }
+    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, {
+        width: convertNumber2PX(23),
+        height: convertNumber2PX(23)
+      }).setAnimationStyle(this.overwriteStyle))
+      .size({
+        width: convertNumber2VP(Number(this.node._attrs.size) || 23),
+        height: convertNumber2VP(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

@@ -30,16 +30,14 @@ export default struct TaroImage {
   }
 
   build() {
-    if (this.node?.hmStyle?.display !== 'none') {
-      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))
-    }
+    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))
   }
 }

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

@@ -66,43 +66,41 @@ export default struct TaroInput {
   }
 
   build () {
-    if (this.node && this.node?.hmStyle?.display !== 'none') {
-      TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
-      .key(this.node._nid)
-      .type(getInputType(this.node))
-      .maxLength(Number(this.node._attrs?.maxlength) || null)
-      .placeholderColor(getPlaceholderColor(this.node))
-      .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
-      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .styles(this.node?.hmStyle)
-      .attrs(getAttributes(this.node))
-      .onChange((value: string) => {
-        const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
-
-        this.value = value
-        this.node?.updateFormWidgetValue(value)
-        eventHandler(event, 'input', this.node)
-      })
-      .onSubmit(() => {
-        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']))
-      .onBlur(() => {
-        const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
-        eventHandler(event, 'blur', this.node)
-      })
-      .onFocus(() => {
-        const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
-
-        eventHandler(event, 'focus', this.node)
-      })
-      .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))
-    }
+    TextInput({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
+    .key(this.node._nid)
+    .type(getInputType(this.node))
+    .maxLength(Number(this.node._attrs?.maxlength) || null)
+    .placeholderColor(getPlaceholderColor(this.node))
+    .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .styles(this.node?.hmStyle)
+    .attrs(getAttributes(this.node))
+    .onChange((value: string) => {
+      const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
+
+      this.value = value
+      this.node?.updateFormWidgetValue(value)
+      eventHandler(event, 'input', this.node)
+    })
+    .onSubmit(() => {
+      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']))
+    .onBlur(() => {
+      const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
+      eventHandler(event, 'blur', this.node)
+    })
+    .onFocus(() => {
+      const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
+
+      eventHandler(event, 'focus', this.node)
+    })
+    .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))
   }
 }

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

@@ -48,46 +48,44 @@ export default struct TaroLabel {
   }
 
   build() {
-    if (this.node?.hmStyle?.display !== 'none') {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-        Row() {
-          this.createLazyChildren(this.node)
-        }
-        .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 || ''
-
-          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()))
-        .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))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-      } else {
-        Column() {
-          this.createLazyChildren(this.node)
-        }
-        .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 || ''
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        this.createLazyChildren(this.node)
+      }
+      .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 || ''
 
-          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()))
-        .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))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        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()))
+      .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))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
       }
+      .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 || ''
+
+        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()))
+      .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))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }