ArkTs（笔记二）

自定义组件

1. 自定义组件规则总结
2. 使用@Component自定义组件
3. @Builder实现自定义组件
4.Styles通用样式

自定义组件规则的总结

1.如果是组件，必须用@Component修饰，才能被别识别成一个组件
2.@Entry修饰了应用执行的入口的组件
build方法里面里面必须要有一个根容器，例如：Row组件，而被Component修饰的结构体必须要有build组件

build(){
    Image('')//所有的自定义组件的build 方法中，
    // 必须只能有一个根组件（只能有一个），这里出现了两个，所以报错
    Text()
  }

自定义组件@Component标签

被State修饰的变量，表量发生变化时，会引起UI的局部刷新，State是状态管理的修饰

//自定义组件
@Component
struct ItemComponent{
  //在自定义组件中的任何成员，都是私有化的(private)
  value:string ="宫爆鸡丁"//当使用端不传递的时候，启用默认的菜谱
  //@State状态机制的装饰，自动刷新build方法，支更新需要更新的内容，提升了性能。
  @State isOK : boolean = false;//数据的刷新会引起UI刷新，这也就是ArkTS的状态管理的特点。
  build(){
   Row() {
     Image(this.isOK?$r('app.media.ic_public_ok'):$r('app.media.ic_screenshot_circle'))
       .width(20)
       .width(20)
       .margin(16)
     Text(this.value)
     .decoration({type: this.isOK ? TextDecorationType.LineThrough:TextDecorationType.None,color:Color.Pink
     })//选中后的渲染，加了一条粉色线
       .margin({right:20.00,bottom:10.00,top:10})
     }
    .backgroundColor(Color.Orange)//背景颜色渲染
    .borderRadius(25)//边框大小
    .onClick(()=>{
      this.isOK=!this.isOK
    })
  }
}

下面这个组件调用自定义组件

//自定义组件
@Entry
@Component//表明下方结构体是一个组件，交给Entry
struct Index2 {

  build() {
    Row() {
      Column() {
        Text("菜谱选择")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //自定义组件的使用
        ItemComponent({})
        ItemComponent({value:"红烧狮子头"})//不传就是默认值
      }
      .width('100%')
      .margin({"top":"1.00vp","right":"0.00vp","bottom":"0.00vp","left":"0.00vp"})
    }
    .height('100%')
  }
}

Builder实现自定义组件

Builder可以在结构体中实现自定义，但只能内部用this调用，如果在外部定义，则用

@Builder function

// @ts-nocheck
@Entry
@Component
struct Index3 {
  build() {
    Row() {
      Column() {
        Text("菜谱选择")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //自定义组件的使用
        this.Item()
        this.Item("煎蛋") //不传就是默认值
      }
      .width('100%')
      .margin({ "top": "1.00vp", "right": "0.00vp", "bottom": "0.00vp", "left": "0.00vp" })
    }
    .height('100%')
  }

  @State isOK: boolean = false;
  value: string = "宫爆鸡丁"
  @Builder Item(value?:string){
    Row() {
      Image(this.isOK?$r('app.media.ic_public_ok'):$r('app.media.ic_screenshot_circle'))
        .width(20)
        .width(20)
        .margin(16)
      Text(this.value)
        .decoration({type: this.isOK ? TextDecorationType.LineThrough:TextDecorationType.None,color:Color.Pink
        })//选中后的渲染，加了一条粉色线
        .margin({right:20.00,bottom:10.00,top:10})
    }
    .backgroundColor(Color.Orange)//背景颜色渲染
    .borderRadius(25)//边框大小
    .onClick(()=>{
      this.isOK=!this.isOK
    })

}
}

Styles通用样式

什么叫通用样式，每个组件都有长宽高，颜色等等属性，对于统一的大小或格式，可以用Styles来编写方法给组件使用，外部方法要加上function，就像变量在外面要加let一样

注意：如果内部外部都写了同一方法名，则遵循就近原则，优先调用内部方法
并且，@Styles方法不能使用参数！

// @ts-nocheck
@Entry
@Component
struct Index4 {
  //Styles通用样式
  @State msg: string =  "Styles学习"
  //内部的任何方法都不需要function
  @Styles myStyles(){
    //这里面只能点出 通用的属性，不能点出组件特有的，因为只考虑通用性的属性
    .width(300)
    .height(300)
    .backgroundColor(Color.Red)
  }
  build() {
    Row() {
      Column() {
        Text(this.msg).myStyles()
        Button(this.msg).myStyles()


      }
      .width('100%')
      .margin({ "top": "1.00vp", "right": "0.00vp", "bottom": "0.00vp", "left": "0.00vp" })
    }
    .height('100%')
  }


}
//外部的任何方法都需要function
@Styles function myStyles(){
  //这里面只能点出 通用的属性，不能点出组件特有的，因为只考虑通用性的属性
  .width(300)
    .height(300)
    .backgroundColor(Color.Red)
}

@Extend（）修饰器

上面提到Styles不能有参数，所以Extend对这个做了优化
功能一致，但是可以传参数

注意：Extend对Text修饰的方法，在另外一个修饰Text的Extend方法中可以调用
例如：

@Extend(Text) function textStyles(fs: number,fc:Color | string){
  .sizeColor(fs,fc)
  .fontStyle(FontStyle.Italic)
}
调用的是下面的方法，增加了对字体的修饰

//()里面要传参数，这里传的Text说明了是对文本的修饰
@Extend(Text) function sizeColor(fs: number,fc:Color | string){
  .fontSize(fs)
  .fontColor(fc)
}
@Entry
@Component
struct ExtendStudy {
  @State message: string = 'Hello World'

  build() {
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()

        Text('HELLO TOM').sizeColor(30,Color.Red)//调用方法
      }
    }
  }
  }

效果图：