界面开发

• 基本结构

  @Entry  
  @Component  
  struct Index {  
    @State message: string = 'Hello World';  
  
    build() {  
      RelativeContainer() {  
        Text(this.message)  
          .id('HelloWorld')  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
          .alignRules({  
            center: { anchor: '__container__', align: VerticalAlign.Center },  
            middle: { anchor: '__container__', align: HorizontalAlign.Center }  
          })  
      }  
      .height('100%')  
      .width('100%')  
    }  
  }
  

• 事件监听和订阅

  Button('点我, 显示弹框')
      .onClick(() => {
          AlertDialog.show({
              message: '你好-这是个弹框'
      })
  })
  

• 普通变量：只能在初始化时渲染，后续不会刷线

• 状态变量：需要装饰器装饰 @state，改变会引起 UI 的渲染刷新
  • 使用 this. 进行访问

    @Entry
    @Component
    struct Index {
        @State msg3: string = 'Hello World'
        build() {
            Column() {
                Text(this.msg3).onClick(() => {
                    this.msg3 = '你好, 世界'
                })
            }
        }
    }
    

逻辑开发