HarmonyOS系统开发ArkTS入门案例及组件（三）

下一章

目录

一、声明式UI

二、ArkTs 快速入门案例

三、组件

四、渲染控制

---

一、声明式UI

  声明式UI就是一种编写用户界面的范式或方式、
  ArArkTS 在继承了Typescript语法的基础上，主要扩展了声明式UI开发相关的能力。
  声明式UI开发范式大致流程：定义页面状态、描述页面效果、改变状态

1、定义页面状态
   分析和定义页面的各种状态，声明状态变量表示不同的状态。如显示开灯关灯状态
   @State isOn:boolean =false; //默认关灯   
   @State 表示是状态变量，只有状态变量修改，页面才会更新。   
   
2、描述界面显示效果
   描述界面在不同状态下的显示效果，如开灯效果和关灯效果
   关灯显示关灯照片
   开灯显示开灯照片

3、改变状态
   点击按钮改变状态，如开灯状态和关灯状态
   点击关灯isOn:boolean =false，显示关灯照片
   点击开灯isOn:boolean =true ，显示开灯照片
   

二、ArkTs 快速入门案例

    @Entry
    @Component
    struct LightPage {
      @State isOn: boolean = false;
      build() {
        Column({ space: 20 }) {
          if (this.isOn) {
            Image('pages/helloworld/light/solution/images/img_light.png')
              .height(300)
              .width(300)
              .borderRadius(20)
          } else {
            Image('pages/helloworld/light/solution/images/img_dark.png')
              .height(300)
              .width(300)
              .borderRadius(20)
          }
          Row({ space: 50 }) {
            Button('关灯')
              .onClick(() => {
                this.isOn = false
              })
            Button('开灯')
              .onClick(() => {
                this.isOn = true;
              })
          }
        }
        .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
      }
    }

三、组件

1、声明式组件
    组件由 组件名称、组件参数、组件属性方法、组件事件方法、子组件组成。
    组件名称(组件参数){ 子组件 }.组件属性方法().组件属性方法().组件事件方法
    ============================================================

      组件 Button

      Button({ type: ButtonType.Circle }) {
        子组件
        Image('pages/light/images/img_light.png')
          .width(25)
          .height(25)
      }
      .witdh(50)
      .height(50)
      .backgroundColor(Color.Red)
      .onclick(() => {
        console.log('创建组件 onclick 测试');
      })

组件案例
===============================================================

  @Entry
      @Component
      struct Index {
        @State isOn: boolean = false;
        @State isDel: boolean = false;
      
        build() {
          Column({ space: 10 }) {
            if (this.isDel) {
              Image('pages/delete/images/man.jpg').width(300).height(300);
            } else {
              Image('pages/delete/images/girl.jpg').width(300).height(300);
            }
            Row({ space: 20 }) {
              Button('还原')
                .onClick(() => {
                  this.isDel = false;
                });
              Button() {
                Image('pages/delete/images/ic_delete.png')
                  .width(25).height(25)
              }
              .type(ButtonType.Circle)
              .width(50).height(50).backgroundColor(Color.Red)
              .onClick(() => {
                this.isDel = true;
              });
            }
          }
          .width('100%')
          .height("100%")
          .justifyContent(FlexAlign.Center)
      
        }
      }

      
2、自定义组件
   提高代码复用性
   @Component 装饰器：装饰 struct 关键字声明的数据结构
   @Entry 装饰器：标识该组件为组件树的根节点，也就是一个页面入口组件
   struct：ArkTS用于自定义组件或者自定义定义弹窗的关键字，与结构类相似
   build() build() 用于声明自定义组件的UI结构
   组件属性：定义组件的属性

自定义组件案例
============================================================
    SwitchButton.ets文件:

    @Component
    export struct SwitchButton {
      color: Color = Color.Blue
    
      build() {
        Button() {
          Image('pages/on_off/images/icon_switch.png')
            .width(25).height(25)
        }
        .type(ButtonType.Circle)
        .width(50)
        .height(50)
        .backgroundColor(this.color)
      }
    }

   ============================================================
    on_off.etc文件：  

  import { SwitchButton } from './SwitchButton';
    @Entry
    @Component
    struct on_off {
      @State isOn: boolean = false;
      @State isDel: boolean = false;
    
      build() {
        Column({ space: 30 }) {
          if (this.isDel) {
            Image('pages/on_off/images/man.jpg').width(300).height(300);
          } else {
            Image('pages/on_off/images/girl.jpg').width(300).height(300);
          }
          Row({ space: 30 }) {
            SwitchButton({ color: Color.Green })
              .onClick(() => {
                this.isDel = false;
              });
    
            SwitchButton({ color: Color.Red })
              .onClick(() => {
                this.isDel = true;
              });
          }
        }
        .width('100%')
        .height("100%")
        .justifyContent(FlexAlign.Center)
    
      }
    }

   

四、渲染控制

if...else  和 Foreach循环

if...else案例    =========================================================================
    PlayButton.ets文件：
    ---------------------

    @Component
    export struct PlayButton {
      color: Color = Color.White;
      isShow: boolean = true;
      build() {
        Button() {
          Image('pages/condition/images/' + (this.isShow ? "ic_play.png" : "ic_pause.png"))
            .width(50).height(50)
        }
        .width(100)
        .height(100)
        .backgroundColor(this.color)
      }
    }

    paly.ets文件：
    ---------------------

    import { PlayButton } from './playButton';
    
    @Entry
    @Component
    struct Play {
      @State isRunning: boolean = true;
    
      build() {
        Column({ space: 10 }) {
          if (this.isRunning) {
            Image('pages/condition/images/girl.jpg').width(300).height(300);
          } else {
            Image('pages/condition/images/man.jpg').width(300).height(300);
          }
    
          Row() {
            if (this.isRunning) {
              PlayButton({ isShow: this.isRunning })
                .onClick(() => {
                  this.isRunning = false;
                })
            }else {
              PlayButton({ isShow: this.isRunning })
                .onClick(() => {
                  this.isRunning = true;
                })
            }
          }
        }
        .width('100%')
        .height("100%")
        .justifyContent(FlexAlign.Center)
      }
    }

    Foreach循环案例  
    =======================================================================================
    FruitButton.ets文件：
    ---------------------

    @Component
    export struct PlayButton {
      color: Color = Color.White;
      isShow: boolean = true;
      build() {
        Button() {
          Image('pages/condition/images/' + (this.isShow ? "ic_play.png" : "ic_pause.png"))
            .width(50).height(50)
        }
        .width(100)
        .height(100)
        .backgroundColor(this.color)
      }
    }

    
    fruit.ets文件：
    ---------------------
 

   import { PlayButton } from './playButton';
    
    @Entry
    @Component
    struct Fruit {
      @State options: string[] = ['桃子', '苹果', '香蕉', '香梨', '荔枝'];
      @State answer: string = '_______?';
      @State color: Color = Color.Black;
      @State fontSize: number = 25;
    
      build() {
        Column({ space: 23 }) {
          Row({ space: 15 }) {
            Text('你最喜欢的水果是')
              .fontColor(Color.Black)
              .fontSize(25)
              .fontWeight(FontWeight.Bold)
            Text(this.answer)
              .fontColor(this.color)
              .fontSize(this.fontSize)
              .fontWeight(FontWeight.Bold)
          }
    
          ForEach(this.options, (item: string) => {
            Column({ space: 40 }) {
              Button(item)
                .fontSize(32)
                .width(180)
                .height(90)
                .backgroundColor(Color.Orange)
                .onClick(() => {
                  this.answer = item;
                  this.color = Color.Red;
                  this.fontSize=44;
                })
            }
    
          })
        }
        .width('100%')
        .height("100%")
        .justifyContent(FlexAlign.Center)
      }
    }