ArkTS基础——Component自定义组件——【坚果派——红目香薰】_arkts中的component作为参数

摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

ArkTS基础——Component自定义组件

这里的基础装饰器可以看到，例如State，设定在Component自定义组件中，

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State showInfo: string = '这是华为的ArkTS语言' //这里是State是自动刷新的
 
  build() {
    Row() {
      Column() {//行信息
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      Column(){//重新创建一行
        Text(this.showInfo)//使用this.即可获得自定义的变量名进行参数设置
          .fontColor(Color.Red)
          .fontSize(70)
          .fontWeight(FontWeight.Bolder)
          .textAlign(TextAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

启动项目

先需要启动虚拟机。

打开虚拟机

打开虚拟机

在虚拟机的右侧可以看到第一个就是电源按钮，点击一下后等待虚拟机启动完毕。

启动完毕

运行查看效果

在右上角能看到虚拟机的选择以及运行按钮。

效果如下：

我们将代码放在一行的两列上了，我们需要修改一下。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State showInfo: string = '这是华为的ArkTS语言' //这里是State是自动刷新的
 
  build() {
    Row() {
      Column() {//行信息
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.showInfo)//使用this.即可获得自定义的变量名进行参数设置
          .fontColor(Color.Red)
          .fontSize(70)
          .fontWeight(FontWeight.Bolder)
          .textAlign(TextAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

 都放在一个列里。

调用自定义组件

可以直接声明一个新的【Component】，这个就不用单独的写上Entry了，看好格式，需要独立的结构体，当完成后在主运行的组件中当做函数引用即可使用。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() { //行信息
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
 
        ShowInfos()// 调用自定义组件
      }
      .width('100%')
    }
    .height('50%')
  }
}
 
@Component
struct ShowInfos {
  @State showInfo: string = '这是华为的ArkTS语言' //这里是State是自动刷新的
  build() {
    Row() {
      Column() {
        Text(this.showInfo) //使用this.即可获得自定义的变量名进行参数设置
          .fontColor(Color.Red)
          .fontSize(70)
          .fontWeight(FontWeight.Bolder)
          .textAlign(TextAlign.Center)
      }.width('100%')
    }.height('50%')
  }
}

效果如图：

自定义组件——装饰器

自定义组件的内容很多，需要逐一的来讲述，我们在struct结构体中输入一个@符号即可看到所有的【装饰器】。

下面是几个常用的装饰器的解释说明，后面我们会逐一的使用测试一下。

@Watch( ' 函数 '  ) 用来监听变量，当变量发生改变时，自动执行括号内的函数（注：不要在这个函数内做任何改变该变量值得操作，否则会卡死报错）

@Styles装饰器可以将多条样式设置提炼成⼀个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

@State  装饰的变量值修改时，页面也会随之更新，不使用@State修饰符定义的变量更新后页面不会刷新，必须有初始化的值。

@Prop  与@State有相同的语义，但初始化方式不同，不允许有初始化的值。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。

@Link  装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。且在使用link时，传递的参数要使用 $ 符合，否则会报错（但不影响使用）

@Builder   装饰的自定义函数内可以写UI布局的内容，例如：装饰后可以写Row布局函数

@Extend() 用来装饰某一类标签，括号内必须写上要装饰的标签名，例如：@Extend（Text）表示要该装饰器装饰的函数内部只能写与Text有关的样式设置，不能写其他无关的内容，否则会报错

@Entry 入口文件装饰器，哪个组件使用了这个装饰器，哪个组件就可以在页面上展示出来

@Component   struct  装饰的是一个一个的组件

@Provide & @Consume  多层嵌套组件之间的传值