王学岗鸿蒙开发(北向)——————(七)ArkUi的各种装饰器

arts包含如下：1，装饰器；2，组件的描述(build函数)；3，自定义组件(@Component修饰的),是可复用的单元；4，系统的组件(鸿蒙官方提供)；等
装饰器的作用:装饰类、变量、方法、结构等。
@State 可以用数据驱动UI更新。
@Entry 入口文件
在这里插入图片描述

组件的调用

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'

  aboutToAppear() {

  }

  build() {
    Column() {
      //可以不传参
      Test()
      //也可以传参,使用{}
      Test({msg:'马超'})

    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  aboutToDisappear() {

  }
}
//自定义组件
@Component
struct Test{
  private msg:string = '赵云';
  build(){
    Column(){
      Text(this.msg)
    }
  }
}

在这里插入图片描述

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'
   msg:string = '曹操'
  aboutToAppear() {

  }

  build() {
    Column() {
      //调用的时候需要使用this.this指代当前所属组件
      //注意，这里传递的是值不是引用。如果在Button的点击方法中更改了
      //this.msg的值，MyBuilderFunction1不会修改显示内容
      this.MyBuilderFunction1(this.msg)
      this.MyBuilderFunction2()
      this.MyBuilderFunction3()
      //调用全局构建函数，不能使用this
      GlobalBuilder()
      Button('按钮').onClick((event:ClickEvent)=>{
        console.log("点击了按钮")
        this.msg = '曹丕'})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  aboutToDisappear() {

  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction0() {
    Text(this.message).fontSize(50)
  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction1(msg:string) {
    Text(msg).fontSize(50)
  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction2() {
    Text('刘备').fontSize(50)
  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction3() {
    Text('孙坚').fontSize(50)
  }

}

//全局构建函数,需要使用function
@Builder
function GlobalBuilder(){

  Text('我是全局的构建函数').fontSize(40)
}

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'
   msg:string = '曹操'
  aboutToAppear() {

  }

  build() {
    Column() {
      //MyBuilderFunction后这里不能用括号
     Child({builder:this.MyBuilderFunction})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  aboutToDisappear() {

  }
  @Builder
  MyBuilderFunction(){
    Text('我爱你爱你').fontSize(50)
  }
}
//子组件被父组件调用，
@Component
struct Child{
  //不初始化会报错
  //Property 'builder' in the custom component 'Child' is missing assignment or initialization.
 // @BuilderParam装饰器：引用@Builder函数
  //  当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。
  //  若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。
  //  为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，
  //  开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，
  //  类似slot占位符。

  @BuilderParam builder:()=>void;
  build(){
    Column(){
      this.builder()
      Text('吕玲绮').fontSize(50)
    }
  }
}

在这里插入图片描述

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'
  msg: string = '曹操'

  aboutToAppear() {

  }

  build() {
    Column() {
    //如果名字相同，都叫MyStyle，组件内的优先级高
    //@Styles不能传递参数
      Text('曹操').MyStyle1()
      Text('刘备').MyStyle2()
      Text('孙权').MyStyle1()
      Text('吕布').MyStyle2()
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
  //自定义样式，组件内不需要function,只能是通用属性和事件,
  @Styles
  MyStyle1(){
    .width('100%')
    .height(100)
    .backgroundColor('green')
  }
}
//自定义样式，组件外需要function,只能是通用样式，不能传递参数
@Styles
function MyStyle2(){
  .width('100%')
  .height(100)
  .backgroundColor('blue')
}

在这里插入图片描述

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'



  aboutToAppear() {

  }

  build() {
    Column({ space: 20 }) {
      Text('曹操').MyTextStyle(Color.White)
      Text('孙坚').MyTextStyle(Color.Blue)
      Text('刘备').MyTextStyle(Color.Green)
      Text('吕布').MyTextStyle()
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}
//扩展原生样式,可以用私有的,可以传递参数,参数可以设置默认值，有默认值的写在最后面
@Extend(Text) function MyTextStyle(color:Color = Color.Orange) {
  .fontSize(50)
  .fontColor(color)
  .backgroundColor(Color.Gray)

}

在这里插入图片描述