如何根据条件给UI组件设置不同情况下的属性?

Question

如何根据条件给UI组件设置不同情况下的属性

Answer 1

可以使用if/else条件渲染，对不同情况下的组件属性值进行设置。具体可参考示例代码：

@Entry 
@Component 
struct TestHeightPage { 
  @State message: string = 'Hello World'; 
  @State myHeight1: number = 30; 
  @State myHeight2: number = 60; 
  @State flag: Boolean = false 
  build() { 
    Column() { 
      Text(this.message) 
        .fontSize(20) 
        .fontWeight(FontWeight.Bold) 
        .width('100%') 
        .height(this.flag ? this.myHeight1 : this.myHeight2) 
        .backgroundColor(Color.Orange) 
 
      Button('修改Text属性height').onClick(() => { 
        //1.if/else 
        if (this.flag) { 
          this.flag = false; 
        } else { 
          this.flag = true; 
        } 
        //2.取反 
        this.flag = !this.flag; 
      }).margin({ top: 12 }) 
    } 
    .height('100%') 
  } 
}

参考链接

if/else：条件渲染