@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.10

package/dist/components-harmony-ets/utils/styles.ets

@@ -1,91 +1,203 @@
+import { isUndefined } from '@tarojs/shared'
 import { ObjectAssign } from '@tarojs/runtime'
 
-import { AttributeManager } from './AttributeManager'
-import { TEXT_DEFAULT_STYLE } from './constant/style'
+import { FlexManager } from './flexManager'
 
-import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyType, HarmonyStyle } from '@tarojs/runtime'
-import type { StandardProps } from '@tarojs/components/types'
+import type { StandardProps, TextProps } from '@tarojs/components/types'
+import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyStyle } from '@tarojs/runtime'
 
 export function getFontAttributes (node: TaroElement): TaroTextStyleType {
-  const hmStyle = node.hmStyle
+  let hmStyle = getNormalAttributes(node)
+  const attrs: TextProps = node._attrs || {}
+
+  if (!hmStyle) return {}
+
+  let lineHeight = hmStyle.lineHeight
+  if (!isUndefined(hmStyle.verticalAlign)) {
+    lineHeight = 0
+  }
+
+  let WebkitLineClamp = attrs.maxLines || hmStyle.WebkitLineClamp || Infinity
+  if (hmStyle.textOverflow && !isUndefined(hmStyle.textOverflow.overflow)) {
+    switch (hmStyle.textOverflow.overflow) {
+      case TextOverflow.Clip: 
+      case TextOverflow.Ellipsis:
+      case TextOverflow.None: WebkitLineClamp = WebkitLineClamp || 1; break
+      default: break
+    }
+  }
+
+  const isFlexText = hmStyle.display === 'flex'
+  let textAlign = hmStyle.textAlign
+  let verticalAlign = hmStyle.verticalAlign
+
+  // 按照 w3c 规范，一旦设置了 display: flex，textAlign 和 verticalAlign 都会直接失效
+  // 需要使用 justifyContent 和 alignItems
+  if (isFlexText) {
+    switch (hmStyle.justifyContent) {
+      case FlexAlign.Start:
+        textAlign = TextAlign.Start
+        break
+      case FlexAlign.Center:
+        textAlign = TextAlign.Center
+        break
+      case FlexAlign.End:
+        textAlign = TextAlign.End
+        break
+      case FlexAlign.SpaceBetween:
+      case FlexAlign.SpaceAround:
+        textAlign = TextAlign.JUSTIFY
+        break
+      default:
+        textAlign = TextAlign.Start
+        break
+    }
+    switch (hmStyle.alignItems) {
+      case ItemAlign.Start:
+        verticalAlign = Alignment.Top
+        break
+      case ItemAlign.Center:
+        verticalAlign = Alignment.Center
+        break
+      case ItemAlign.End:
+        verticalAlign = Alignment.End
+        break
+      default:
+        verticalAlign = Alignment.Top
+        break
+    }
+  }
 
   const attributes: TaroAny = {
-    maxLines: hmStyle.maxLines || Infinity,
+    textAlign,
+    verticalAlign,
+    WebkitLineClamp: WebkitLineClamp,
     // 已做处理的属性
     letterSpacing: hmStyle.letterSpacing,
-    textAlign: hmStyle.textAlign,
-    textOverflow: hmStyle.textOverflow
+    textOverflow: hmStyle.textOverflow,
+    lineHeight: lineHeight
   }
 
   return attributes
 }
 
-export function getNormalAttributes (node: TaroElement): TaroStyleType {
+// 模拟 div 自动撑满父元素的情况
+export function isMaxWidthView (node: TaroElement) {
+  const parentNode: TaroElement = node.parentNode as TaroElement
+
+  return node.tagName === 'VIEW' && parentNode && parentNode.tagName === 'VIEW' && !FlexManager.isFlexNode(parentNode)
+}
+
+export function getNormalAttributes (node: TaroElement, initStyle?: HarmonyStyle): HarmonyStyle {
   const hmStyle = node.hmStyle
+  
+  if (!hmStyle) return {}
 
   const _nid = node._nid
   const _attrs: StandardProps = node._attrs || {}
 
-  const transform: TaroAny = hmStyle.transform
-  const transformRotate: HarmonyType.Transform.Rotate = transform?.rotate?.[0]
-  const transformTranslate: HarmonyType.Transform.Translate = transform?.translate?.[0]
-  const transformScale: HarmonyType.Transform.Scale = transform?.scale?.[0]
-  const transformTransform: HarmonyType.Transform.Transform = transform?.transform?.[0]
-
-  let normalAttributes: HarmonyStyle = {
-    // Flex相关
-    flexBasis: hmStyle.flexBasis,
-    flexGrow: hmStyle.flexGrow,
-    flexShrink: hmStyle.flexShrink,
-    alignSelf: hmStyle.alignSelf,
-    // 尺寸相关
-    width: hmStyle.width,
-    height: hmStyle.height,
-    constraintSize: hmStyle.constraintSize,
-    margin: hmStyle.margin,
-    padding: hmStyle.padding,
-    // 边框相关
-    borderStyle: hmStyle.borderStyle,
-    borderWidth: hmStyle.borderWidth,
-    borderColor: hmStyle.borderColor,
-    borderRadius: hmStyle.borderRadius,
-    // 背景相关
-    backgroundColor: hmStyle.backgroundColor,
-    backgroundImage: hmStyle.backgroundImage,
-    backgroundImageSize: hmStyle.backgroundImageSize,
-    backgroundRepeat: hmStyle.backgroundRepeat,
-    linearGradient: hmStyle.linearGradient,
-    // 变换相关
-    rotate: transformRotate,
-    translate: transformTranslate,
-    scale: transformScale,
-    transform: transformTransform,
-    // 通用文本相关
-    color: hmStyle.color,
-    fontSize: hmStyle.fontSize,
-    fontStyle: hmStyle.fontStyle,
-    fontWeight: hmStyle.fontWeight,
-    fontFamily: hmStyle.fontFamily || TEXT_DEFAULT_STYLE.FONT_FAMILY,
-    lineHeight: hmStyle.lineHeight,
-    decoration: hmStyle.decoration,
-    // 其他
-    clip: hmStyle.clip,
-    id: _attrs.id || _nid,
-    // focus: _attrs.focus || false,
-  }
+  let normalAttributes = hmStyle
 
+  // 覆盖属性
+  normalAttributes.id =  _attrs.id || _nid
 
-  const id = node._nid
-  const component: TaroAny = node._instance
+  let pseudoStylesheet = getPseudoClass(node)
+  if (pseudoStylesheet) {
+    normalAttributes = ObjectAssign({}, normalAttributes, pseudoStylesheet)
+  }
 
-  // taro_page 等写死在运行时里的节点，没有 _instance
-  if (component) {
-    const overwriteStyle: TaroStyleType = component.nodeInfoMap[id].overwriteStyle
+  // 初始化默认的值
+  if (initStyle) {
+    normalAttributes = ObjectAssign({}, initStyle, normalAttributes)
+  }
+  return normalAttributes
+}
 
-    // 处理覆盖属性：如动画的覆盖
-    if (overwriteStyle) {
-      normalAttributes = ObjectAssign(normalAttributes, overwriteStyle)
+// 应用伪类样式
+function getPseudoClass (node: TaroElement): HarmonyStyle | null {
+  // 伪类
+  const _pseudo_class = Object.keys(node._pseudo_class)
+  if (_pseudo_class.length) {
+    for (let i = 0; i < _pseudo_class.length; i++) {
+      const pseudoKey = _pseudo_class[i]
+      const pseudoStylesheet = node._pseudo_class[pseudoKey]
+      if (!pseudoStylesheet) continue
+      switch(pseudoKey) {
+        case "::first-child": {
+          if (node.parentNode?.firstChild?._nid === node._nid) {
+            return pseudoStylesheet.hmStyle
+          }
+          break
+        }
+        case "::last-child": {
+          if (node.parentNode?.lastChild?._nid === node._nid) {
+            return pseudoStylesheet.hmStyle
+          }
+          break
+        }
+        case "::empty": {
+          if (node.children?.length === 0) {
+            return pseudoStylesheet.hmStyle
+          }
+          break
+        }
+        default: {
+          // 解析nth-child()
+          // 找出当前节点在父节点中的位置
+          // 公式
+          let matchs: [number, number] | null = null
+          if (pseudoKey === '::nth-child(odd)') {
+            matchs = [2, 1]
+          } else if (pseudoKey === '::nth-child(even)') {
+            matchs = [2, 0]
+          } else {
+            matchs = parseNthChild(pseudoKey)
+          }
+          if (matchs) {
+            let index = node.parentNode?.childNodes.findIndex((child) => child._nid === node._nid)
+            if (isUndefined(index)) return null
+            else {
+              index = index + 1
+              if (matchs[0] === 0) {
+                if (index === matchs[1]) {
+                  return pseudoStylesheet.hmStyle
+                }
+              } else {
+                if ((index - matchs[1]) % matchs[0] === 0) {
+                  return pseudoStylesheet.hmStyle
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
-  return normalAttributes
+  return null
 }
+
+// 正则匹配nth-child
+function parseNthChild(selector: string): [number, number] | null {
+  const regex = /nth-child\((?:(-?\d*)n\s*)?([+-]?\s*\d+)?\)/;
+  const match = selector.match(regex);
+  
+  if (match) {
+      const a = match[1] ? parseInt(match[1]) : 0;
+      const b = match[2] ? parseInt(match[2]) : 0;
+      return [a, b];
+  } else {
+      return null;
+  }
+}
+
+
+export function getStyleAttr(node: TaroElement | null, key: string): TaroAny {
+  if (!node) return null
+  const hmStyle = node.hmStyle
+  if (!hmStyle) return null
+  // 覆盖属性
+  if (key === 'width') {
+    return isMaxWidthView(node) && isUndefined(hmStyle.width) ? '100%' : hmStyle.width
+  }
+  return hmStyle[key]
+}

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

@@ -1,13 +1,10 @@
-import { bindInstanceToNode, AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, getPageScrollerOrNode,
-  TaroEvent, TaroAny } from '@tarojs/runtime'
+import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
+import commonStyleModify from './style'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { createTaroEvent } from './utils/events'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroVideoElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroVideoElement, TaroEvent } from '@tarojs/runtime'
 
 export interface VideoOptions {
   src?: string | Resource
@@ -25,137 +22,94 @@ export interface VideoUpdateEvent {
   time: number
 }
 
-@Extend(Video)
-function attrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
-
 @Extend(Video)
 function props(attr: VideoAttrs) {
   .muted(attr.muted)
   .autoPlay(attr.autoPlay)
   .controls(attr.controls)
   .objectFit(attr.objectFit)
-  .loop(attr.loop)
+  .loop(attr.loop || false)
 }
 
-@Component
-export default struct TaroVideo {
-  nodeInfoMap: TaroAny = {}
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
+function emitEvent (node: TaroVideoElement, type: string, detail?: TaroAny) {
+  const event: TaroEvent = createTaroEvent(type, { detail }, node)
 
-  @ObjectLink node: TaroVideoElement
-
-  controller: VideoController = new VideoController()
+  event.stopPropagation()
+  eventHandler(event, type, node)
+}
 
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
+function getVideoData (node: TaroVideoElement): VideoOptions {
+  const src = node._attrs.src
+  const poster = node._attrs.poster
+  return {
+    src,
+    previewUri: poster,
+    controller: node.controller
   }
+}
 
-  @Styles defaultEvent () {
-    .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()))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
+function getObjectFit (node: TaroVideoElement) {
+  switch (node._attrs.objectFit) {
+    case 'contain': return ImageFit.Contain
+    case 'cover': return ImageFit.Cover
+    case 'fill': return ImageFit.Fill
+    default: return ImageFit.Contain
   }
+}
 
-  emitEvent = (type: string, detail?: TaroAny) => {
-    const event: TaroEvent = createTaroEvent(type, { detail }, this.node)
-    event.stopPropagation()
-    eventHandler(event, type, this.node)
+function getVideoProps (node: TaroVideoElement): VideoAttrs {
+  const muted: boolean = node._attrs.muted || false
+  const autoPlay: boolean = node._attrs.autoplay || false
+  const controls: boolean = node._attrs.controls || false
+  const objectFit: ImageFit = getObjectFit(node)
+  const loop: boolean = node._attrs.loop || false
+  return {
+    muted,
+    controls,
+    objectFit,
+    loop,
+    autoPlay
   }
+}
 
+function handleUpdate (node: TaroVideoElement, e: VideoUpdateEvent) {
+  node._nodeInfo._currentTime = e.time
 
-  getVideoData (): VideoOptions {
-    const src = this.node._attrs.src
-    const poster = this.node._attrs.poster
-    return {
-      src,
-      previewUri: poster,
-      controller: this.controller
-    }
-  }
+  emitEvent(node, 'timeUpdate', { currentTime: e.time})
+}
 
-  getObjectFit () {
-    switch (this.node._attrs.objectFit) {
-      case 'contain': return ImageFit.Contain
-      case 'cover': return ImageFit.Cover
-      case 'fill': return ImageFit.Fill
-      default: return ImageFit.Contain
-    }
-  }
+@Component
+export default struct TaroVideo {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroVideoElement) => void = this.customBuilder
+  @ObjectLink node: TaroVideoElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
-  getVideoProps (): VideoAttrs {
-    const muted: boolean = this.node._attrs.muted || false
-    const autoPlay: boolean = this.node._attrs.autoplay || false
-    const controls: boolean = this.node._attrs.controls || false
-    const objectFit: ImageFit = this.getObjectFit()
-    const loop: boolean = this.node._attrs.loop || false
-    return {
-      muted,
-      controls,
-      objectFit,
-      loop,
-      autoPlay
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
     }
   }
 
-  handleUpdate (e: VideoUpdateEvent) {
-    this.nodeInfoMap[this.node._nid].currentTime = e.time
-    this.emitEvent('timeUpdate', { currentTime: e.time})
+  build () {
+    Video(getVideoData(this.node))
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .props(getVideoProps(this.node))
+    .onStart(shouldBindEvent(() => { emitEvent(this.node, 'play') }, this.node, ['play']))
+    .onPause(shouldBindEvent(() => { emitEvent(this.node, 'pause') }, this.node, ['pause']))
+    .onFinish(shouldBindEvent(() => { emitEvent(this.node, 'ended') }, this.node, ['ended']))
+    .onError(shouldBindEvent(() => { emitEvent(this.node, 'error') }, this.node, ['error']))
+    .onUpdate((e) => { handleUpdate(this.node, e) })
+    .onPrepared(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'loadedMetaData', { duration: e.duration }) }, this.node, ['loadedmetadata']))
+    .onSeeking(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'seeking', { duration: e.time }) }, this.node, ['seeking']))
+    .onSeeked(shouldBindEvent(() => { emitEvent(this.node, 'seeked') }, this.node, ['seeked']))
+    .onFullscreenChange(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'fullScreenChange', { fullScreen: e.fullscreen}) }, this.node, ['fullscreenchange']))
+    .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()))
+    .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))
   }
 
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Video(this.getVideoData())
-        .attrs(getNormalAttributes(this.node))
-        .props(this.getVideoProps())
-        .defaultEvent()
-        .visibleChangeEvent()
-        .onStart(shouldBindEvent(() => { this.emitEvent('play') }, this.node, ['play']))
-        .onPause(shouldBindEvent(() => { this.emitEvent('pause') }, this.node, ['pause']))
-        .onFinish(shouldBindEvent(() => { this.emitEvent('ended') }, this.node, ['ended']))
-        .onError(shouldBindEvent(() => { this.emitEvent('error') }, this.node, ['error']))
-        .onUpdate((e) => { this.handleUpdate(e) })
-        .onPrepared(shouldBindEvent((e: TaroAny) => { this.emitEvent('loadedMetaData', { duration: e.duration }) }, this.node, ['loadedmetadata']))
-        .onSeeking(shouldBindEvent((e: TaroAny) => { this.emitEvent('seeking', { duration: e.time }) }, this.node, ['seeking']))
-        .onSeeked(shouldBindEvent(() => { this.emitEvent('seeked') }, this.node, ['seeked']))
-        .onFullscreenChange(shouldBindEvent((e: TaroAny) => { this.emitEvent('fullScreenChange', { fullScreen: e.fullscreen}) }, this.node, ['fullscreenchange']))
-    }
-  }
 }

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

@@ -1,79 +1,73 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import { createNode } from './render'
-import TaroComponentWrapper from './base'
+import commonStyleModify, { rowModify, columnModify } from './style'
+import PseduoChildren from './pseudo'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
-import { getNodeThresholds, getNormalAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+import { FlexManager } from './utils/flexManager'
+import { getNodeThresholds, shouldBindEvent } from './utils/helper'
 
-import type { TaroViewElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
-
-@Extend(Flex)
-function attrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
+import type { TaroViewElement, TaroAny } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 
 @Component
 export default struct TaroView {
-  nodeInfoMap: TaroAny = {}
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroViewElement) => void = this.customBuilder
   @ObjectLink node: TaroViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
   }
 
-  @Styles defaultEvent () {
-    .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 => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
+  build () {
+    if (FlexManager.useFlexLayout(this.node)) {
       Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
+        if (this.node._pseudo_before || this.node._pseudo_after) {
+          PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
+        } else {
+          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() {
+        if (this.node._pseudo_before || this.node._pseudo_after) {
+          PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
+        } else {
+          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() {
+        if (this.node._pseudo_before || this.node._pseudo_after) {
+          PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
+        } else {
+          this.createLazyChildren(this.node)
+        }
       }
-      .attrs(getNormalAttributes(this.node))
-      .defaultEvent()
-      .visibleChangeEvent()
+      .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))
     }
   }
 }