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

​