@tarojs/plugin-platform-harmony-ets 4.0.0-beta.10 → 4.0.0-beta.12

package/dist/apis/base/system.ts

@@ -1,25 +1,42 @@
+import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant'
 // 设备信息,从 API Version 6 开始支持
 import deviceInfo from '@ohos.deviceInfo'
 // 显示设备属性,从 API Version 7 开始支持
 import _display from '@ohos.display'
 // 从 API Version 7 开始支持
 import i18n from '@ohos.i18n'
-// 设备信息 从API Version 6开始，该接口不再维护，推荐使用新接口'@ohos.deviceInfo'进行设备信息查询
-import deviceMethod from '@system.device'
 
 import { callAsyncFail, callAsyncSuccess } from '../utils'
 
 import type Taro from '@tarojs/taro/types'
 
-const display = _display.getDefaultDisplaySync()
-
-let device
+let display
+let safeArea: TaroGeneral.SafeAreaResult | null = null
+try {
+  display = _display.getDefaultDisplaySync()
+  // @ts-ignore
+  display.getCutoutInfo((err, { boundingRects = [], waterfallDisplayAreaRects = {} }: _display.CutoutInfo = {}) => {
+    if (err?.code) {
+      console.error('Failed to get cutout info', JSON.stringify(err))
+      return
+    }
 
-deviceMethod.getInfo({
-  success: data => {
-    device = data
-  }
-})
+    const top = Math.max(...boundingRects.map(rect => rect.top * 2 + rect.height), waterfallDisplayAreaRects.top?.top + waterfallDisplayAreaRects.top?.height)
+    const bottom = (waterfallDisplayAreaRects.bottom?.top + waterfallDisplayAreaRects.bottom?.height) || display.height
+    const left = waterfallDisplayAreaRects.left?.left + waterfallDisplayAreaRects.left?.width
+    const right = (waterfallDisplayAreaRects.right?.left + waterfallDisplayAreaRects.right?.width) || display.width
+    safeArea = {
+      top,
+      bottom,
+      left,
+      right,
+      height: bottom - top,
+      width: right - left,
+    }
+  })
+} catch (e) {
+  console.error('Failed to get display', e)
+}
 
 /* 同步版本 */
 export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
@@ -32,7 +49,7 @@ export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
   res.cameraAuthorized = null // 允许使用摄像头的开关 boolean
   res.enableDebug = null // 是否已打开调试 boolean
   res.fontSizeSetting = null // 用户字体大小（单位px） number
-  res.language = i18n && i18n.getSystemLanguage && i18n.getSystemLanguage() // string
+  res.language = i18n?.getSystemLanguage?.() // string
   res.locationAuthorized = null // 定位的开关 boolean
   res.locationEnabled = null // 地理位置的系统开关 boolean
   res.microphoneAuthorized = null // 麦克风的开关 boolean
@@ -43,17 +60,18 @@ export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
   res.notificationSoundAuthorized = false // 通知带有声音的开关（仅 iOS 有效）boolean
   res.phoneCalendarAuthorized = null // 使用日历的开关 boolean
   res.wifiEnabled = false // Wi-Fi 的系统开关 boolean
-  res.pixelRatio = null // 设备像素比,number
-  res.platform = 'android' // 客户端平台 string
-  res.safeArea = null // 在竖屏正方向下的安全区域 General.SafeAreaResult
-  res.screenHeight = display && display.height // 屏幕高度，单位px number
-  res.screenWidth = display && display.width // 屏幕宽度，单位px number
-  res.statusBarHeight = null // 状态栏的高度，单位px number
-  res.system = deviceInfo && deviceInfo.osFullName // 操作系统及版本 string
-  res.theme = null // 系统当前主题，取值为light或dark 'light' | 'dark'
-  res.windowWidth = device && device.windowWidth // 可使用窗口宽度，单位px number
-  res.windowHeight = device && device.windowHeight // 可使用窗口高度，单位px number
-  res.version = deviceInfo && deviceInfo.displayVersion // 版本号 string
+  res.pixelRatio = display && (Math.round(display.xDPI / display.width * 100) / 100) // 设备像素比,number
+  res.platform = 'harmony' // 客户端平台 string
+  res.safeArea = safeArea // 在竖屏正方向下的安全区域 General.SafeAreaResult
+  res.screenHeight = display?.height // 屏幕高度，单位px number
+  res.screenWidth = display?.width // 屏幕宽度，单位px number
+  res.statusBarHeight = safeArea?.top // 状态栏的高度，单位px number
+  res.system = deviceInfo?.osFullName // 操作系统及版本 string
+  // Note: 更新配置时才能记录
+  res.theme = AppStorage.get('__TARO_APP_CONFIG')?.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? 'dark' : 'light' // 系统当前主题，取值为light或dark 'light' | 'dark'
+  res.windowHeight = display?.height // 可使用窗口高度，单位px number
+  res.windowWidth = display?.width // 可使用窗口宽度，单位px number
+  res.version = deviceInfo?.displayVersion // 版本号 string
 
   return res
 }

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

@@ -94,38 +94,41 @@ 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)
+@Component
+export default struct TaroButton {
+  @ObjectLink node: TaroButtonElement
+  build() {
+    Button({ stateEffect: !this.node._attrs.disabled }) {
+      Row() {
+        if (this.node._attrs.loading) {
+          LoadingProgress()
+            .width(20).height(20)
+            .color(getThemeAttributes(this.node).color)
+        }
+        createLazyChildren(this.node)
       }
-      createLazyChildren(node)
     }
+    .themeStyles(getThemeAttributes(this.node))
+    .attributeModifier(commonStyleModify.setNode(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))
   }
-  .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)
-    }
-    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))
 }

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

@@ -2,7 +2,7 @@ import { createTaroEvent, eventHandler, getComponentEventCallback, AREA_CHANGE_E
 
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent, TaroCheckboxElement, TaroCheckboxGroupElement } from '@tarojs/runtime'
@@ -33,9 +33,10 @@ function getOptions (node: TaroCheckboxElement): CheckboxOptions {
   }
 }
 
+
 @Component
 export struct TaroCheckbox {
-  node: TaroCheckboxElement | null = null
+  @ObjectLink node: TaroCheckboxElement
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
@@ -59,7 +60,7 @@ export struct TaroCheckbox {
                   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)
@@ -94,7 +95,7 @@ interface ChangeEventDetail { value: string[] }
 
 @Component
 export struct TaroCheckboxGroup {
-  node: TaroCheckboxGroupElement | null = null
+  @ObjectLink node: TaroCheckboxGroupElement
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))

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

@@ -3,38 +3,41 @@ import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBL
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 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'
 
-@Builder
-export default function TaroForm (node: TaroFormElement) {
-  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
-    Row() {
-      createLazyChildren(node)
+@Component
+export default struct TaroForm {
+  @ObjectLink node: TaroFormElement
+  build() {
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .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() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .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)
     }
-    .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)
-    }
-    .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

@@ -48,22 +48,26 @@ 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 {
+  @ObjectLink node: TaroIconElement
+  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))
+      .size({
+        width: convertNumber2VP(Number(this.node._attrs.size) || 23),
+        height: convertNumber2VP(Number(this.node._attrs.size) || 23),
+      })
+      .width(getNormalAttributes(this.node).width || convertNumber2PX(23))
+      .height(getNormalAttributes(this.node).height || convertNumber2PX(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

@@ -16,15 +16,19 @@ 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 {
+  @ObjectLink node: TaroImageElement
+
+  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))
+      .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/innerHtml.ets

@@ -1,11 +1,15 @@
 import htmlParser from './utils/htmlParser'
 import { createChildItem } from './render'
 
-import type { TaroElement } from '@tarojs/runtime'
+import type { TaroInnerHtmlElement } from '@tarojs/runtime'
 
-@Builder
-export default function TaroInnerHtml (node: TaroElement) {
-  if (node.innerHTML) {
-    createChildItem(htmlParser(node.innerHTML))
+@Component
+export default struct TaroInnerHtml {
+  @ObjectLink node: TaroInnerHtmlElement
+  
+  build() {
+    if (this.node.innerHTML) {
+      createChildItem(htmlParser(this.node.innerHTML))
+    }
   }
 }

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

@@ -48,7 +48,7 @@ function getPlaceholderColor (node: TaroInputElement): string {
 export default struct TaroInput {
   @State value: string = ''
 
-  node: TaroInputElement | null = null
+  @ObjectLink node: TaroInputElement
 
   aboutToAppear () {
     if (this.node) {

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

@@ -3,7 +3,7 @@ import { Current, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroLabelElement, TaroElement, TaroAny, TaroRadioElement, TaroCheckboxElement } from '@tarojs/runtime'
@@ -34,45 +34,49 @@ function handleTargetChange (id: string) {
   }
 }
 
-@Builder
-export default function TaroLabel (node: TaroLabelElement) {
-  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
-    Row() {
-      createLazyChildren(node)
-    }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick((e: ClickEvent) => {
-      const firstChild: TaroElement | null = node.childNodes[0] as TaroElement | null
-      const id: string = node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
-  
-      handleTargetChange(id)
-      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))
-    .alignItems(FlexManager.flexOptions(node).alignItems as VerticalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
-  } else {
-    Column() {
-      createLazyChildren(node)
+
+@Component
+export default struct TaroLabel {
+  @ObjectLink node:TaroLabelElement
+  build() {
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .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() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .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)
     }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick((e: ClickEvent) => {
-      const firstChild: TaroElement | null = node.childNodes[0] as TaroElement | null
-      const id: string = node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
-  
-      handleTargetChange(id)
-      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))
-    .alignItems(FlexManager.flexOptions(node).alignItems as HorizontalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
   }
 }

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

@@ -0,0 +1,67 @@
+import type { TaroMovableAreaElement, TaroStyleType } from '@tarojs/runtime'
+import commonStyleModify from './style'
+import { createLazyChildren } from './render'
+
+import { FlexManager } from './utils/flexManager'
+import { getNormalAttributes } from './utils/helper'
+
+
+@Extend(Row)
+function rowAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth || style.width,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Extend(Column)
+function columnAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Component
+export default struct TaroMovableArea {
+  @ObjectLink node: TaroMovableAreaElement
+
+  @Provide areaWidth: Length = 0
+  @Provide areaHeight: Length = 0
+
+  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))
+        .rowAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      } else {
+        Column() {
+          createLazyChildren(this.node)
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .columnAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import type { TaroMovableViewElement, TaroStyleType } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { createLazyChildren } from './render'
+
+import { FlexManager } from './utils/flexManager'
+import { getNormalAttributes, } from './utils/helper'
+@Extend(Row)
+function rowAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth || style.width,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Extend(Column)
+function columnAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Component
+export default struct TaroMovableArea {
+  @ObjectLink node: TaroMovableViewElement
+
+  @Provide areaWidth: Length = 0
+  @Provide areaHeight: Length = 0
+
+  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))
+        .rowAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      } else {
+        Column() {
+          createLazyChildren(this.node)
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .columnAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      }
+    }
+  }
+}