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

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

@@ -1,10 +1,11 @@
 import { createTaroEvent, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
+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
@@ -126,24 +127,27 @@ export struct TaroCheckboxGroup {
   }
 
   build() {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-      Row() {
+    if (!isUndefined(this.node._st.hmStyle.flexWrap)) {
+      Flex(FlexManager.flexOptions(this.node)) {
         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 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(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .attributeModifier(columnModify.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

@@ -1,11 +1,13 @@
 import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
+import commonStyleModify, { rowModify, columnModify } from './style'
+
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 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 {
@@ -22,8 +24,8 @@ export default struct TaroForm {
   }
 
   build() {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-      Row() {
+    if (!isUndefined(this.node._st.hmStyle.flexWrap)) {
+      Flex(FlexManager.flexOptions(this.node)) {
         this.createLazyChildren(this.node)
       }
       .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
@@ -33,21 +35,28 @@ export default struct TaroForm {
         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 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(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .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))
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }

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

@@ -1,11 +1,13 @@
 import { Current, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, getPageScrollerOrNode, AREA_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
+import commonStyleModify, { rowModify, columnModify } from './style'
+
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroLabelElement, TaroElement, TaroAny, TaroRadioElement, TaroCheckboxElement } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 
 function handleTargetChange (id: string) {
   const taro: TaroAny = Current.taro
@@ -48,8 +50,9 @@ export default struct TaroLabel {
   }
 
   build() {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-      Row() {
+
+    if (!isUndefined(this.node._st.hmStyle.flexWrap)) {
+      Flex(FlexManager.flexOptions(this.node)) {
         this.createLazyChildren(this.node)
       }
       .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
@@ -65,13 +68,28 @@ export default struct TaroLabel {
         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 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((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))
     } else {
       Column() {
         this.createLazyChildren(this.node)
       }
-      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .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 || ''
@@ -84,8 +102,6 @@ export default struct TaroLabel {
         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/movableArea.ets

@@ -1,7 +1,9 @@
 import type { TaroAny, TaroMovableAreaElement, TaroMovableViewElement } from '@tarojs/runtime'
-import { rowModify, columnModify } from './style'
+
+import commonStyleModify, { rowModify, columnModify } from './style'
 
 import { FlexManager } from './utils/flexManager'
+import { isUndefined } from '@tarojs/shared'
 
 @Component
 export default struct TaroMovableArea {
@@ -17,13 +19,45 @@ export default struct TaroMovableArea {
   }
 
   build() {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+    if (!isUndefined(this.node._st.hmStyle.flexWrap)) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .clip(true)
+      .onAreaChange((oldValue: Area, newValue: Area) => {
+        this.node.childNodes.forEach(item => {
+          if(item.nodeName === 'MOVABLE-VIEW') {
+            ;(item as TaroMovableViewElement).area = {
+              w: Number( newValue.width),
+              h: Number(newValue.height)
+            }
+          }
+        })
+      })
+      .gesture(
+        PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+          this.node.childNodes.forEach(item => {
+            if(item.nodeName === 'MOVABLE-VIEW') {
+              ;(item as TaroMovableViewElement).startScale()
+            }
+          })
+        }).onActionUpdate((event) => {
+          const scaleArea = this.node.getAttribute('scaleArea')
+          if (scaleArea) {
+            this.node.childNodes.forEach(item => {
+              if(item.nodeName === 'MOVABLE-VIEW') {
+                ;(item as TaroMovableViewElement).doScale(event.scale)
+              }
+            })
+          }
+        })
+      )
+    } 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))
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
       .clip(true)
       .onAreaChange((oldValue: Area, newValue: Area) => {
         this.node.childNodes.forEach(item => {
@@ -58,8 +92,6 @@ export default struct TaroMovableArea {
         this.createLazyChildren(this.node)
       }
       .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
       .clip(true)
       .onAreaChange((oldValue: Area, newValue: Area) => {
         this.node.childNodes.forEach(item => {

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

@@ -1,8 +1,9 @@
 import type { TaroAny, TaroMovableViewElement } from '@tarojs/runtime'
 
-import { rowModify, columnModify } from './style'
+import commonStyleModify, { rowModify, columnModify } from './style'
 
 import { FlexManager } from './utils/flexManager'
+import { isUndefined } from '@tarojs/shared'
 
 @Component
 export default struct TaroMovableView {
@@ -19,21 +20,21 @@ export default struct TaroMovableView {
 
   build() {
     Stack() {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node)
-        .direction !== FlexDirection.Column) {
+      if (!isUndefined(this.node._st.hmStyle.flexWrap)) {
+        Flex(FlexManager.flexOptions(this.node)) {
+          this.createLazyChildren(this.node)
+        }
+        .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)
         }
         .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
       } else {
         Column() {
           this.createLazyChildren(this.node)
         }
         .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
       }
     }
     .translate({ x: this.node.position.x, y: this.node.position.y })

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

@@ -311,22 +311,22 @@ export default struct TaroPicker {
   }
 
   build() {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+    if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
       Row() {
         this.createLazyChildren(this.node)
       }
       .defaultEvent()
       .visibleChangeEvent()
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+      .alignItems(FlexManager.alignItems<VerticalAlign>(this.node))
+      .justifyContent(FlexManager.justifyContent(this.node))
     } else {
       Column() {
         this.createLazyChildren(this.node)
       }
       .defaultEvent()
       .visibleChangeEvent()
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+      .alignItems(FlexManager.alignItems<HorizontalAlign>(this.node))
+      .justifyContent(FlexManager.justifyContent(this.node))
     }
   }
 }

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

@@ -1,11 +1,12 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
+import commonStyleModify, { rowModify, columnModify } from './style'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import { TaroEvent, TaroAny, HarmonyType, TaroRadioGroupElement, TaroRadioElement } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 
 interface RadioAttrs {
   radioStyle?: HarmonyType.RadioStyle
@@ -128,24 +129,27 @@ export struct TaroRadioGroup {
   }
 
   build() {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-      Row() {
+    if (!isUndefined(this.node._st.hmStyle.flexWrap)) {
+      Flex(FlexManager.flexOptions(this.node)) {
         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 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(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .attributeModifier(columnModify.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/scrollView.ets

@@ -85,8 +85,6 @@ export default struct TaroScrollView {
         .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
           this.node._nodeInfo._scroll = areaResult
         }, this.node, ['scroll', 'scrollstart', 'scrollend']))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .flexGrow(0).flexShrink(0)
       } else {
         Column() {
@@ -102,8 +100,6 @@ export default struct TaroScrollView {
         .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
           this.node._nodeInfo._scroll = areaResult
         }, this.node, ['scroll', 'scrollstart', 'scrollend']))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .flexGrow(0).flexShrink(0)
       }
     }

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

@@ -3,6 +3,7 @@ import { isUndefined } from '@tarojs/shared'
 import { computeBackgroundPosition } from './utils'
 import { getNormalAttributes } from './utils/helper'
 import { isMaxWidthView } from './utils/styles'
+import { FlexManager } from './utils/flexManager.ets'
 
 class TextStyleModify implements AttributeModifier<TextAttribute> {
   initStyle?: TaroStyleType
@@ -103,7 +104,7 @@ class PseudoStyleModify implements AttributeModifier<CommonAttribute> {
 
 class RowStyleModify extends CommonStyleModify {
 
-  applyNormalAttribute(instance: CommonAttribute): void {
+  applyNormalAttribute(instance: RowAttribute): void {
     if (this.style) {
       setNormalAttributeIntoInstance(instance, this.style, this.node)
       instance.constraintSize({
@@ -112,6 +113,10 @@ class RowStyleModify extends CommonStyleModify {
         minHeight: this.style.minHeight,
         maxHeight: this.style.maxHeight
       })
+      if (this.node) {
+        instance.alignItems(FlexManager.alignItems<VerticalAlign>(this.node))
+        instance.justifyContent(FlexManager.justifyContent(this.node))
+      }
     }
 
     setAnimationAttributeIntoInstance(instance, this.overwriteStyle, this.style || {})
@@ -119,7 +124,7 @@ class RowStyleModify extends CommonStyleModify {
 }
 
 class ColumnStyleModify extends CommonStyleModify {
-  applyNormalAttribute(instance: CommonAttribute): void {
+  applyNormalAttribute(instance: ColumnAttribute): void {
     if (this.style) {
       setNormalAttributeIntoInstance(instance, this.style, this.node)
       instance.constraintSize({
@@ -128,6 +133,10 @@ class ColumnStyleModify extends CommonStyleModify {
         minHeight: this.style.minHeight || this.style.height,
         maxHeight: this.style.maxHeight
       })
+      if (this.node) {
+        instance.alignItems(FlexManager.alignItems<HorizontalAlign>(this.node))
+        instance.justifyContent(FlexManager.justifyContent(this.node))
+      }
     }
 
     setAnimationAttributeIntoInstance(instance, this.overwriteStyle, this.style || {})
@@ -192,6 +201,9 @@ export function setSpecialTextAttributeIntoInstance(instance: TextAttribute, sty
   if (!isUndefined(style.textOverflow)) {
     instance.textOverflow(style.textOverflow)
   }
+  if (!isUndefined(style.whiteSpace) && style.whiteSpace === 'nowrap') {
+    instance.maxLines(1)
+  }
   if (!isUndefined(style.WebkitLineClamp)) {
     instance.maxLines(style.WebkitLineClamp)
   }

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

@@ -57,7 +57,8 @@ export default struct TaroText {
       }
     } else {
       Text(this.node.textContent) {
-        if (this.node.childNodes.length > 1) {
+        // text 下还有标签
+        if (this.node.childNodes.length > 1 || ((this.node.childNodes[0] && this.node.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {
           ForEach(this.node.childNodes, (item: TaroElement) => {
             createTextChildNode(item, getSpanVerticalAlign(this.node.hmStyle?.verticalAlign))
           }, (item: TaroElement) => item._nid)

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

@@ -1,14 +1,13 @@
-import type { TaroElement } from '@tarojs/runtime'
+import type { TaroElement, HarmonyStyle } from '@tarojs/runtime'
 import { isUndefined } from '@tarojs/shared'
 import { getNormalAttributes } from './styles.ets'
 
 interface IFlexOptions {
   direction: FlexDirection,
   justifyContent: FlexAlign,
-  alignItems: VerticalAlign | HorizontalAlign,
-  // Row 和 Column 不支持下面两个属性
-  // wrap: FlexWrap,
-  // alignContent: FlexAlignContent
+  alignItems: ItemAlign,
+  wrap?: FlexWrap,
+  alignContent?: FlexAlign
 }
 
 class FlexManager {
@@ -39,22 +38,45 @@ class FlexManager {
   }
 
   static flexOptions (node: TaroElement): IFlexOptions {
-    const hmStyle = getNormalAttributes(node) || {}
+    const hmStyle: HarmonyStyle = getNormalAttributes(node) || {}
     const isFlex = FlexManager.isFlexNode(node)
-    const justifyContent: FlexAlign = isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start
-
     let flexDirection = hmStyle.flexDirection
     if (!flexDirection && flexDirection !== 0) {
       flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
 
-    const alignItems = isFlex ? FlexManager.convertFlexAlignItemsToColumnOrRow(flexDirection, hmStyle.alignItems) : HorizontalAlign.Start
-
     return {
-      alignItems,
-      justifyContent,
+      alignItems: isFlex ? (isUndefined(hmStyle.alignItems) ? ItemAlign.Start : hmStyle.alignItems) : ItemAlign.Start,
+      justifyContent: isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start,
       direction: flexDirection,
+      wrap: isFlex ? hmStyle.flexWrap: FlexWrap.NoWrap,
+      alignContent: isFlex ? hmStyle.alignContent: FlexAlign.Start
+    }
+  }
+
+  static direction (node: TaroElement): FlexDirection {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    let flexDirection = hmStyle.flexDirection
+    if (!flexDirection && flexDirection !== 0) {
+      flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
+    }
+    return flexDirection
+  }
+
+  static alignItems<T> (node: TaroElement): T {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    const isFlex = FlexManager.isFlexNode(node)
+    let flexDirection = hmStyle.flexDirection
+    if (!flexDirection && flexDirection !== 0) {
+      flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
+    return (isFlex ? FlexManager.convertFlexAlignItemsToColumnOrRow(flexDirection, hmStyle.alignItems) : HorizontalAlign.Start) as T
+  }
+
+  static justifyContent (node: TaroElement): FlexAlign {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    const isFlex = FlexManager.isFlexNode(node)
+    return isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start
   }
 }
 

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

@@ -1,12 +1,13 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import { rowModify, columnModify } from './style'
+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, shouldBindEvent } from './utils/helper'
 
 import type { TaroViewElement, TaroAny } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 
 @Component
 export default struct TaroView {
@@ -22,7 +23,22 @@ export default struct TaroView {
   }
 
   build () {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+    if (!isUndefined(this.node._st.hmStyle.flexWrap)) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        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 })
@@ -37,8 +53,6 @@ export default struct TaroView {
         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() {
         if (this.node._pseudo_before || this.node._pseudo_after) {
@@ -54,8 +68,6 @@ export default struct TaroView {
         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/runtime-ets/bom/document.ts

@@ -1,5 +1,4 @@
 import { TaroDocument } from '../dom/document'
-import { FixedLayer } from '../dom/element/normal'
 import { window } from './window'
 
 function createDocument (): TaroDocument {
@@ -32,9 +31,6 @@ function createDocument (): TaroDocument {
   doc.documentElement = html
   doc.head = head
   doc.body = body
-
-  // Fixed Layer
-  doc.fixedLayer = new FixedLayer()
   
   return doc
 }

package/dist/runtime-ets/dom/document.ts

@@ -17,11 +17,6 @@ class TaroDocument extends TaroNode {
   public cookie = ''
   private _win: Window
 
-  // 浮动层
-  public fixedLayer: FixedLayer
-  // 浮层的父节点关系
-  public layerParents: Record<string, Record<string, true>> = {}
-
   constructor(window: Window) {
     super('#document', NodeType.DOCUMENT_NODE)
     this._win = window

package/dist/runtime-ets/dom/element/element.ts

@@ -1,8 +1,8 @@
 import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
 import { EMPTY_OBJ, toCamelCase } from '@tarojs/shared'
 
-import { document } from '../../bom/document'
 import { ATTRIBUTES_CALLBACK_TRIGGER_MAP, ID } from '../../constant'
+import { Current } from '../../current'
 import { findChildNodeWithDFS } from '../../utils'
 import { initComponentNodeInfo, triggerAttributesCallback } from '../../utils/info'
 import { bindAnimation } from '../bind'
@@ -242,6 +242,24 @@ export class TaroElement<
     }
   }
 
+  get currentLayerNode () {
+    if (typeof Current.page.tabBarCurrentIndex !== 'undefined') {
+      // Tabbar
+      return Current.page.layerNode[Current.page.tabBarCurrentIndex]
+    } else {
+      return Current.page.layerNode
+    }
+  }
+
+  get currentLayerParents () {
+    if (typeof Current.page.tabBarCurrentIndex !== 'undefined') {
+      // Tabbar
+      return Current.page.layerParents[Current.page.tabBarCurrentIndex]
+    } else {
+      return Current.page.layerParents
+    }
+  }
+
   // 设置渲染层级，0为正常层级，大于0为固定层级
   // 1、appendChild的时候会判断是否需要设置层级
   // 2、taro-react的setProperty，在处理属性变化的时候，会判断是否需要设置层级
@@ -250,20 +268,23 @@ export class TaroElement<
     if (!this.parentNode) return // 没有父节点，不需要设置层级关系
     this._nodeInfo.layer = value
 
+    const currentLayerNode = this.currentLayerNode
+    const currentLayerParents = this.currentLayerParents
+    if (!currentLayerNode || !currentLayerParents) return
     if (value > 0) {
       // 插入到固定浮层
-      document.fixedLayer.childNodes.push(this)
-      document.fixedLayer.notifyDataAdd(document.fixedLayer.childNodes.length - 1)
+      currentLayerNode.childNodes.push(this)
+      currentLayerNode.notifyDataAdd(currentLayerNode.childNodes.length - 1)
       // 绑定祖先的节点id，建立关系，方便在祖先卸载（removeChild）的时候，能够找到该节点使其卸载
       const _parentRecord = {}
       generateLayerParentIds(_parentRecord, this)
-      document.layerParents[this._nid] = _parentRecord
+      currentLayerParents[this._nid] = _parentRecord
     } else {
-      const idx = document.fixedLayer.childNodes.findIndex(n => n._nid === this._nid)
-      document.fixedLayer.childNodes.splice(idx, 1)
-      document.fixedLayer.notifyDataDelete(idx)
+      const idx = currentLayerNode.childNodes.findIndex(n => n._nid === this._nid)
+      currentLayerNode.childNodes.splice(idx, 1)
+      currentLayerNode.notifyDataDelete(idx)
 
-      delete document.layerParents[this._nid]
+      delete currentLayerParents[this._nid]
     }
 
     if (this.parentNode) {
@@ -278,17 +299,18 @@ export class TaroElement<
         this.setLayer(1)
       }
     } else {
-      // 识别document.layerParents里面是否有需要移除的固定元素
+      const currentLayerParents = this.currentLayerParents
+      if (!currentLayerParents) return
+      // 识别Current.page.layerParents里面是否有需要移除的固定元素
       if (this._nodeInfo?.layer > 0) {
-        // @ts-ignore
-        delete document.layerParents[this._nid]
+        delete currentLayerParents[this._nid]
         this.setLayer(0)
       } else {
-        Object.keys(document.layerParents).forEach(fixedId => {
-          const parentIds = document.layerParents[fixedId]
+        Object.keys(currentLayerParents).forEach(fixedId => {
+          const parentIds =currentLayerParents[fixedId]
           if (parentIds[this._nid]) {
             // 需要移除fixedId
-            delete document.layerParents[fixedId]
+            delete currentLayerParents[fixedId]
             const fixedNode = eventSource.get(fixedId) as unknown as TaroElement
             if (fixedNode) {
               fixedNode.setLayer(0)

package/dist/runtime-ets/dom/element/normal.ts

@@ -72,16 +72,7 @@ class TaroSwiperItemElement extends TaroElement<SwiperItemProps>{
   }
 }
 
-// Fixed浮层节点树
-@Observed
-class FixedLayer extends TaroElement {
-  constructor() {
-    super('View')
-  }
-}
-
 export {
-  FixedLayer,
   TaroButtonElement,
   TaroIconElement,
   TaroImageElement,

package/dist/runtime-ets/dom/stylesheet/type.ts

@@ -5,6 +5,7 @@ export interface HarmonyStyle extends TaroStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
   WebkitLineClamp?: number
+  whiteSpace?: string
   letterSpacing?: number | string
   verticalAlign?: Alignment
   lineHeight?: Length
@@ -112,6 +113,7 @@ export interface TaroTextStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
   WebkitLineClamp?: number
+  whiteSpace?: string
   letterSpacing?: number | string
   verticalAlign?: Alignment
   lineHeight?: string | number | Resource

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-harmony-ets",
-  "version": "4.0.0-beta.37",
+  "version": "4.0.0-beta.39",
   "description": "OpenHarmony & 鸿蒙系统插件",
   "author": "O2Team",
   "homepage": "https://gitee.com/openharmony-sig/taro",
@@ -25,13 +25,13 @@
   },
   "dependencies": {
     "webpack-sources": "^3.2.3",
-    "@tarojs/helper": "4.0.0-beta.37",
-    "@tarojs/runner-utils": "4.0.0-beta.37",
-    "@tarojs/service": "4.0.0-beta.37",
-    "@tarojs/components": "4.0.0-beta.37",
-    "@tarojs/shared": "4.0.0-beta.37",
-    "@tarojs/taro": "4.0.0-beta.37",
-    "@tarojs/runtime": "4.0.0-beta.37"
+    "@tarojs/components": "4.0.0-beta.39",
+    "@tarojs/helper": "4.0.0-beta.39",
+    "@tarojs/runtime": "4.0.0-beta.39",
+    "@tarojs/shared": "4.0.0-beta.39",
+    "@tarojs/taro": "4.0.0-beta.39",
+    "@tarojs/runner-utils": "4.0.0-beta.39",
+    "@tarojs/service": "4.0.0-beta.39"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -44,7 +44,7 @@
     "solid-js": "^1.8.16",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
-    "rollup-plugin-copy": "4.0.0-beta.37"
+    "rollup-plugin-copy": "4.0.0-beta.39"
   },
   "scripts": {
     "prebuild": "rimraf ./dist",