Harmony 控制组件是否可见

使用条件渲染

使用if和else

类似于 vue 的 v-if

build() {
    Column() {
      Row() {
        if (this.boon) {   
          Text('使用了文字')
        } else {   
          Button('切换了Button')
        }
      }
        .margin({ top: 200 })
      Toggle({ type: ToggleType.Switch , isOn: $$this.boon })
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
}

visibility属性

官网说明

借助visibility属性

类似于 vue 的 v-show

• 控制组件是否可见
• visibility 效果等效 css 的dispaly: none;

build() {
    Column() {
        Row() {
        Text('使用了文字')
            .visibility(this.boon ? Visibility.Visible : Visibility.None)   
        }
        .margin({ top: 200 })
        Toggle({ type: ToggleType.Switch , isOn: $$this.boon })
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
}

其他方案

不推荐

• 借助属性opacity
• 设置属性元素 width 和 height 为0