关于ArkTS语言@State、@Prop、@Link、@Builder

itomcoil 2025-01-14 14:21 10 浏览

组件状态管理装饰器用来管理组件中的状态

@State：装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。

注意：@State装饰的属性必须初始化值的设置

@State completed: boolean = false;

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

注意：@Prop装饰的属性能做初始化值的设置

例子说明：

@Prop isCompleted: boolean;
@Prop：不能初始化，只能被其父组件的@State初始化。
// 外部使用:（父组件使用：ToDoItem({content: "啦啦", isCompleted: false})）。
内部组件改变其属性，则会刷新build()，不会刷新父组件。

在小组件中定义私有属性可使用：private content?: string; ? :默认值为null

@Link：装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。

注意：@Link装饰的属性不能做初始化值的设置

@Link value: string;

组件装饰器

@Builder：装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。

例子:

// 局部抽离的组件
// @Builder装饰器，来修饰一个函数，快速生成布局内容，从而可以避免重复的UI描述内容
@Builder checkImage(icon: Resource) {
		Image(icon)
				.objectFit(ImageFit.Contain)
				.width($r("app.float.checkbox_wh"))
				.height($r("app.float.checkbox_wh"))
				.margin($r("app.float.checkbox_margin"))
}

使用：
	// 没效果的写法：this.checkImage(this.isCompleted ? $r("app.media.check") : $r("app.media.no_check"));
	if (this.isCompleted) {
			this.checkImage($r("app.media.check"));
	} else {
			this.checkImage($r("app.media.no_check"));
	}

prop()

上一篇：Excel调用Refprop10.0的方法介绍(excel制冷仿真第一步)
下一篇：Propargyl-PEG1-acid可作为纳米粒子的表面修饰剂，55683-37-9

关于ArkTS语言@State、@Prop、@Link、@Builder

组件状态管理装饰器用来管理组件中的状态

组件装饰器

相关推荐

我用 1 个 2 手计算器换了 3 台 MacBook(上)

零基础也能搞定!DeepSeek大模型本地安装全攻略

Python三目运算符(三元运算符)用法详解

PS零基础入门教程:Photoshop 2024工具详解—标尺工具

SpringBoot中使用LocalDateTime踩坑记录

最全的linux安装软件方法 linux安装软件流程

深入理解Python中的try-except语句，避免代码崩溃的噩梦

a4尺寸是多大像素多少厘米长宽，4k的纸是多大的纸是a4的吗

PS 零基础入门 040:图层样式选项

PS零基础入门教程:Photoshop 2024工具详解—直线工具