鸿蒙学记-001

之前是公司安排学习，不过那时是2.0还兼容安卓，还是Java开发，现在换成Arkts了，也忘得差不多了有必要重新过一遍（其实是怕赚钱被落下） 和B站还有官方第一课学一遍。

ArkTS声明式开发范式-官方推荐

开发效率高，应用性能好，未来的趋势 一个page的构成 @的都是装饰器 @state修饰的数据改变后会重新渲染 @Component表示组件 跳转页面

Button()  
  .backgroundColor(Color.Blue)  
  .width(170)  
  .height(50)  
  .onClick(() => {  
    router.pushUrl({  
      url: 'pages/Home'  
    })  
  })

其中url可以在以下位置找到 返回上一级

Row() {  
  Column() {  
    Text(this.message)  
      .fontColor(Color.Red)  
      .fontSize(50)  
      .fontWeight(FontWeight.Bold)  
  }  
  
  .width('100%')  
}.onClick(() => {  
  router.back()  
})

声明式UI-基本组件的写法

自定义构造函数-结构体内部

@Builder  
TextLabel(txtinfo: string) {  
  Text(txtinfo)  
    .fontSize(20)  
    .width(200)  
    .height(50)  
    .margin({"top":"10.00vp", "right":"10.00vp","bottom":"10.00vp","left":"10.00vp"})  
    .padding({"top":"10.00vp", "right":"10.00vp","bottom":"10.00vp","left":"10.00vp"})  
    .fontColor(Color.White)  
    .backgroundColor(Color.Gray)  
    .border({  
      width: 5,  
      color: Color.Red  
    })  
    .borderRadius(20)  
}

自定义构造函数-全局，需要使用$$状态绑定，需要进行引用传值，否则状态修改视图不会产生变化 基本使用

@Entry  
@Component  
struct Build_Global {  
  @State message: string = 'Hello World'  
  
  build() {  
    Row() {  
      Column() {  
        Label({text:"用户名",msg:this.message})  
        Label({text:"密码",msg:this.message})  
        Button("点击")  
          .fontColor(Color.White)  
          .fontSize(20)  
          .backgroundColor(Color.Blue)  
          .width(100)  
          .height(50)  
          .onClick(() => {  
            this.message = "6666"  
          })  
  
      }      .width('100%')  
    }  
    .height('100%')  
  }  
  
}  
  
  
@Builder  
function Label($$:{text: string, msg: string}) {  
  Text($$.text+$$.msg)  
    .fontSize(20)  
    .width(200)  
    .height(50)  
    .margin({"top":"10.00vp", "right":"10.00vp","bottom":"10.00vp","left":"10.00vp"})  
    .padding({"top":"10.00vp", "right":"10.00vp","bottom":"10.00vp","left":"10.00vp"})  
    .fontColor(Color.White)  
    .backgroundColor(Color.Gray)  
    .border({  
      width: 5,  
      color: Color.Red  
    })  
    .borderRadius(20)  
    .onClick(() => {  
      console.log($$.msg);  
    })  
}

@ 装饰器：装饰类、结构体、方法和变量，赋予其特殊含义 @Component：自定义组件装饰器 @Entry：装饰的自定义组件用作页面的默认入口组件，在加载页面时将首先创建并呈现@Entry的自定义组件 @State：装饰的变量是组件内部的状态数据，当状态被修改时会自动进行UI刷新 @Link：装饰的变量可以和父组件的@State变量建立双向数据绑定，任何一方的修改都会反应给另一方 @Prop：不允许初始化值，方便父子组件之间进行数据传递和同步 自定义组件的生命周期 回调函数 aboutToAppear：在组件创建实例之后，执行组件的build函数之前调用，可进行UI初始化，申请定时器资源等操作

aboutToAppear() {  
  
}

aboutToDisappear：在组件销毁时调用，可用于释放资源

aboutToDisappear() {  
  
}

页面组件生命周期：onPageShow()页面显示时调用、onBackPress()页面返回时调用、onPageHide()页面消失时调用

声明式UI的特征

声明式描述 状态驱动视图更新