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 多层嵌套组件之间的传值
