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

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

@@ -17,80 +17,78 @@ export default struct TaroMovableArea {
   }
 
   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(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) => {
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== 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 => {
+          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).area = {
-                w: Number( newValue.width),
-                h: Number(newValue.height)
-              }
+              ;(item as TaroMovableViewElement).startScale()
             }
           })
-        })
-        .gesture(
-          PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+        }).onActionUpdate((event) => {
+          const scaleArea = this.node.getAttribute('scaleArea')
+          if (scaleArea) {
             this.node.childNodes.forEach(item => {
               if(item.nodeName === 'MOVABLE-VIEW') {
-                ;(item as TaroMovableViewElement).startScale()
+                ;(item as TaroMovableViewElement).doScale(event.scale)
               }
             })
-          }).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 {
+      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)
+      .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)
             }
-          })
-        )
-      } 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)
-        .clip(true)
-        .onAreaChange((oldValue: Area, newValue: Area) => {
+          }
+        })
+      })
+      .gesture(
+        PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
           this.node.childNodes.forEach(item => {
             if(item.nodeName === 'MOVABLE-VIEW') {
-              ;(item as TaroMovableViewElement).area = {
-                w: Number( newValue.width),
-                h: Number(newValue.height)
-              }
+              ;(item as TaroMovableViewElement).startScale()
             }
           })
-        })
-        .gesture(
-          PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+        }).onActionUpdate((event) => {
+          const scaleArea = this.node.getAttribute('scaleArea')
+          if (scaleArea) {
             this.node.childNodes.forEach(item => {
               if(item.nodeName === 'MOVABLE-VIEW') {
-                ;(item as TaroMovableViewElement).startScale()
+                ;(item as TaroMovableViewElement).doScale(event.scale)
               }
             })
-          }).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)
-                }
-              })
-            }
-          })
-        )
-      }
+          }
+        })
+      )
     }
   }
 }

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

@@ -18,57 +18,55 @@ export default struct TaroMovableView {
   }
 
   build() {
-    if (this.node && this.node.hmStyle?.display !== 'none') {
-      Stack() {
-        if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node)
-          .direction !== 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)
+    Stack() {
+      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node)
+        .direction !== 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 })
-      .scale({ x: this.node.scaleValue, y: this.node.scaleValue })
-      .onAreaChange((oldValue: Area, newValue: Area) => {
-        this.node.selfSize = {w: Number(newValue.width), h: Number(newValue.height)}
-      })
-      .gesture(
-        GestureGroup(GestureMode.Exclusive,
-          PanGesture({fingers:1}).onActionStart((e: GestureEvent) => {
-
-            this.node.startMove()
-          }).onActionUpdate((e: GestureEvent) => {
+    }
+    .translate({ x: this.node.position.x, y: this.node.position.y })
+    .scale({ x: this.node.scaleValue, y: this.node.scaleValue })
+    .onAreaChange((oldValue: Area, newValue: Area) => {
+      this.node.selfSize = {w: Number(newValue.width), h: Number(newValue.height)}
+    })
+    .gesture(
+      GestureGroup(GestureMode.Exclusive,
+        PanGesture({fingers:1}).onActionStart((e: GestureEvent) => {
 
-            this.node.doMove({
-              x: e.offsetX,
-              y: e.offsetY
-            })
-            // 事件处理
-            const bindchange = this.node.getAttribute('bindchange')
-            if (typeof bindchange === 'function') {
-            }
+          this.node.startMove()
+        }).onActionUpdate((e: GestureEvent) => {
 
-          }).onActionEnd(() => {
-            // this.updatePosition()
-            this.node.checkPositionBoundary(this.node.position, this.node.scaleValue)
-          }),
-          PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
-            this.node.startScale()
-          }).onActionUpdate((event) => {
-            this.node.doScale(event.scale)
+          this.node.doMove({
+            x: e.offsetX,
+            y: e.offsetY
           })
-        )
+          // 事件处理
+          const bindchange = this.node.getAttribute('bindchange')
+          if (typeof bindchange === 'function') {
+          }
+
+        }).onActionEnd(() => {
+          // this.updatePosition()
+          this.node.checkPositionBoundary(this.node.position, this.node.scaleValue)
+        }),
+        PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent) => {
+          this.node.startScale()
+        }).onActionUpdate((event) => {
+          this.node.doScale(event.scale)
+        })
       )
-    }
+    )
   }
 }

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

@@ -311,24 +311,22 @@ export default struct TaroPicker {
   }
 
   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)
-        }
-        .defaultEvent()
-        .visibleChangeEvent()
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-      } else {
-        Column() {
-          this.createLazyChildren(this.node)
-        }
-        .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)
+      }
+      .defaultEvent()
+      .visibleChangeEvent()
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
       }
+      .defaultEvent()
+      .visibleChangeEvent()
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }

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

@@ -21,33 +21,31 @@ export default struct TaroProgress {
   }
 
   build() {
-    if (this.node && this.node.hmStyle?.display !== 'none') {
-      Row({ space: 5 }) {
-        Progress({
-          value: parseFloat(this.node.getAttribute('percent')),
-          type: ProgressType.Linear
+    Row({ space: 5 }) {
+      Progress({
+        value: parseFloat(this.node.getAttribute('percent')),
+        type: ProgressType.Linear
+      })
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+        .color(this.node.getAttribute('activeColor') ?? PROGRESS_ACTIVECOLOR)
+        .backgroundColor(this.node.getAttribute('backgroundColor') ?? PROGRESS_BACKGROUNDCOLOR)
+        .style({
+          strokeWidth: this.node.getAttribute('strokeWidth'),
+          strokeRadius: parseFloat(this.node.getAttribute('borderRadius')),
+          enableSmoothEffect: Boolean(this.node.getAttribute('active')),
         })
-          .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-          .color(this.node.getAttribute('activeColor') ?? PROGRESS_ACTIVECOLOR)
-          .backgroundColor(this.node.getAttribute('backgroundColor') ?? PROGRESS_BACKGROUNDCOLOR)
-          .style({
-            strokeWidth: this.node.getAttribute('strokeWidth'),
-            strokeRadius: parseFloat(this.node.getAttribute('borderRadius')),
-            enableSmoothEffect: Boolean(this.node.getAttribute('active')),
-          })
 
-          .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) => {
-            if (this.node) {
-              this.node._nodeInfo.areaInfo = res[1]
-            }
-          }))
+        .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) => {
+          if (this.node) {
+            this.node._nodeInfo.areaInfo = res[1]
+          }
+        }))
 
-        if (this.node.getAttribute('showInfo')) {
-          Text(`${this.node.getAttribute('percent')}%`)
-            .fontSize(this.node.getAttribute('fontSize') ?? PROGRESS_DEFAULTINFOFONTSIZE)
-        }
+      if (this.node.getAttribute('showInfo')) {
+        Text(`${this.node.getAttribute('percent')}%`)
+          .fontSize(this.node.getAttribute('fontSize') ?? PROGRESS_DEFAULTINFOFONTSIZE)
       }
     }
   }

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

@@ -48,49 +48,47 @@ export struct TaroRadio {
   }
 
   build () {
-    if (this.node && this.node.hmStyle?.display !== 'none') {
-      Stack() {
-        Row() {
-          Radio({
-            group: this.node.group || this.node.parentNode?._nid || '',
-            value: this.node.value || '',
-          })
-            .checked(this.node.checked)
-            .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-            .radioAttr(getAttributes(this.node))
-            .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() {
+        Radio({
+          group: this.node.group || this.node.parentNode?._nid || '',
+          value: this.node.value || '',
+        })
+          .checked(this.node.checked)
+          .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+          .radioAttr(getAttributes(this.node))
+          .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._checked && !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._checked && !this.node?._attrs.disabled) {
+            this.node.checked = !this.node.checked
+          }
+        }
+      })
     }
   }
 }
@@ -130,26 +128,24 @@ export struct TaroRadioGroup {
   }
 
   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/richText.ets

@@ -13,15 +13,13 @@ export default struct TaroRichText {
   @ObjectLink node: TaroRichTextElement
 
   build () {
-    if (this.node.hmStyle?.display !== 'none') {
-      RichText(generateText(this.node))
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .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]
-        }))
-        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-    }
+    RichText(generateText(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .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]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }
 

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

@@ -71,59 +71,57 @@ export default struct TaroScrollView {
   }
 
   build () {
-    if (this.node.hmStyle?.display !== 'none') {
-      Scroll(this.node.scroller) {
-        if (this.node._attrs.scrollX) {
-          Row() {
-            if (this.node._pseudo_before || this.node._pseudo_after) {
-              PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
-            } else {
-              this.createLazyChildren(this.node)
-            }
+    Scroll(this.node.scroller) {
+      if (this.node._attrs.scrollX) {
+        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))
-          .width(null)
-          .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() {
-            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))
+        .width(null)
+        .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() {
+          if (this.node._pseudo_before || this.node._pseudo_after) {
+            PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
+          } else {
+            this.createLazyChildren(this.node)
           }
-          .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-          .height(null)
-          .alignItems(HorizontalAlign.Start)
-          .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)
         }
+        .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+        .height(null)
+        .alignItems(HorizontalAlign.Start)
+        .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)
       }
-      .width(getStyleAttr(this.node, 'width'))
-      .height(getStyleAttr(this.node, 'height'))
-      .flexGrow(this.node.hmStyle?.flexGrow)
-      .flexShrink(this.node.hmStyle?.flexShrink)
-      .scrollable(getScrollable(this.node))
-      .scrollBar(getAttributes(this.node).scrollBar)
-      .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]
-      }))
-      .onScroll(shouldBindEvent(() => { handleScrollEvent(this.node, 'scroll') }, this.node, ['scroll']))
-      .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
-      .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-      .onReachEnd(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrolltolower') }, this.node, ['scrolltolower']))
     }
+    .width(getStyleAttr(this.node, 'width'))
+    .height(getStyleAttr(this.node, 'height'))
+    .flexGrow(this.node.hmStyle?.flexGrow)
+    .flexShrink(this.node.hmStyle?.flexShrink)
+    .scrollable(getScrollable(this.node))
+    .scrollBar(getAttributes(this.node).scrollBar)
+    .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]
+    }))
+    .onScroll(shouldBindEvent(() => { handleScrollEvent(this.node, 'scroll') }, this.node, ['scroll']))
+    .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
+    .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    .onReachEnd(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrolltolower') }, this.node, ['scrolltolower']))
   }
 }

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

@@ -97,18 +97,16 @@ export default struct TaroSlider {
   }
 
   build() {
-    if (this.node && this.node.hmStyle?.display !== 'none') {
-      if (!!this.node._attrs.showValue) {
-        Row() {
-          this.createSlider(this.node)
-          Text(Number(this.value).toFixed(0))
-            .width('10%')
-            .textAlign(TextAlign.Center)
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-        }
-      } else {
+    if (!!this.node._attrs.showValue) {
+      Row() {
         this.createSlider(this.node)
+        Text(Number(this.value).toFixed(0))
+          .width('10%')
+          .textAlign(TextAlign.Center)
+          .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
       }
+    } else {
+      this.createSlider(this.node)
     }
   }
 }

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

@@ -208,6 +208,14 @@ export function setNormalAttributeIntoInstance(instance: CommonAttribute, style:
     instance.id(style.id)
     instance.key(style.id)
   }
+  if (!isUndefined(style.display) || !isUndefined(style.visibility)) {
+    instance.visibility(style.display === 'none' 
+      ? Visibility.None : 
+      !isUndefined(style.visibility) 
+        ? (style.visibility === 'hidden' ? Visibility.Hidden :  Visibility.Visible)
+        : Visibility.Visible
+    )
+  }
   if (!isUndefined(style.flexGrow)) {
     instance.flexGrow(style.flexGrow)
   }