鸿蒙Harmony OS Next原生开发声明式UI开关灯案例

鸿蒙初开，开天辟地

声明式UI组件开发

@Component
export default struct My {
  @State isOn:boolean = false;
  build() {
    Column({space:20}){
      if(this.isOn){
        Image("https://i-blog.csdnimg.cn/direct/0c036d7e107647e2805c83cff6586391.jpeg")
          .height(500).width(300);
      }
      else{
        Image("https://i-blog.csdnimg.cn/direct/9ed16dcd083d4e70a240adba82a6e8d4.png")
          .height(500).width(300);
      }
      Row({space:50}){
        Button("开灯").onClick(()=>{
          this.isOn = true;
        });
        Button('关灯').onClick(()=>{
          this.isOn = false;
        });
      }
    }
    .height('100%')
    .width('100%')
  }
}

我们这里使用isOn:boolean = false;作为声明式的变量存在

他会决定我们UI布局的显示效果,通过变化这个值,我们实现了UI页面布局效果的切换

Column({space:20}){
      if(this.isOn){
            Image("https://i-blog.csdnimg.cn/direct/0c036d7e107647e2805c83cff6586391.jpeg")
              .height(500).width(300);
      }
      else{
          Image("https://i-blog.csdnimg.cn/direct/9ed16dcd083d4e70a240adba82a6e8d4.png")
          .height(500).width(300);
      }
}

我们通过给组件传入{space}来确定组件内部组件之间的分隔大小

Row({space:50}){
        Button("开灯").onClick(()=>{
          this.isOn = true;
        });
        Button('关灯').onClick(()=>{
          this.isOn = false;
        });
      }

给按钮绑定事件实现点击按钮可以让声明式变量变化以切换UI布局显示

Row({space:50}){
        Button("开灯").onClick(()=>{
          this.isOn = true;
        });
        Button('关灯').onClick(()=>{
          this.isOn = false;
        });
      }

最终我们通过高和宽和居中效果的调整,就实现了让UI布局正确显示并展示界面的效果

Column({space:20}){
      if(this.isOn){
        Image("https://i-blog.csdnimg.cn/direct/0c036d7e107647e2805c83cff6586391.jpeg")
          .height(500).width(300);
      }
      else{
        Image("https://i-blog.csdnimg.cn/direct/9ed16dcd083d4e70a240adba82a6e8d4.png")
          .height(500).width(300);
      }
      Row({space:50}){
        Button("开灯").onClick(()=>{
          this.isOn = true;
        });
        Button('关灯').onClick(()=>{
          this.isOn = false;
        });
      }
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center);

案例效果显示