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