鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Prop@Link@State状态装饰器(十二)

一、哪些是状态装饰器

1、@State:被装饰拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源。当其数值改变时,会引起相关组件的渲染刷新。

2、@Prop:被装饰可以和父组件建立单向同步关系,@Prop装饰的变量是可变的,但修改不会同步回父组件。

3、@Link:被装饰变量和父组件构建双向同步关系的状态变量,父组件会接受来子@Link装饰的变量的修改的同步,父组件的更新也会同步给@Link装饰的变量。

4、@Provide/@Consume:@Provide/@Consume装饰的变量用于跨组件层级(多层组件)同步状态变量,可以不需要通过参数命名机制传递,通过alias(别名)或者属性名绑定。

5、@Observed:@Observed装饰class,需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用,需要和@ObjectLink、@Prop连用。

6、@ObjectLink:@ObjectLink装饰的变量接收@Observed装饰的class的实例,应用于观察多层嵌套场景,和父组件的数据源构建双向同步。

二、@State@Prop@Link状态传递的核心规则

  • (1)单向传递:@State----->@Prop
  • (2)双向传递:@State<----->@Link
  • (3)使用build()函数进行驱动更新
  • (4)传参:@State----->@Prop( this. 变量名)
  • (5)传参:@State<----->@Link($变量名)

三、状态装饰器练习

1、提醒:练习中的注释很详细

2、练习代码

@Entry
@Component
struct Index {
   
  @State name: string = '清风'

  build() {
   
    Row() {
   
      Column() {
   
        Text(this.name).Index_text()
        //State切换
        Button(</
<think>好的,我现在需要帮助用户了解鸿蒙开发中常用的装饰器及其用法,并提供示例。首先,我需要回忆一下用户提供的引用内容,尤其是引用2和3,里面提到了自定义装饰器stateStyles等装饰器的用法。然后,我应该按照用户的要求,结构清晰地分步骤回答,使用中文,并且确保LaTeX格式正确。 首先,用户的问题是关于鸿蒙开发中常用装饰器的用法和示例。根据引用内容,装饰器鸿蒙中用于组件属性配置、状态管理、生命周期等。我需要整理常见的装饰器,比如@Component、@Entry、@Builder、@State、@Prop、@Link、@Watch、@Styles和@Extend等。每个装饰器需要说明用途、语法和示例代码,同时引用相关的参考资料。 接下来,我需要检查引用2和引用3中的具体内容。引用2提到了自定义装饰器的场景,包括解析文件、生成方法代码和写入原文件的过程,还提到了aboutToAppear方法的处理。引用3则重点介绍了stateStyles装饰器,用于根据UI状态设置样式,类似CSS伪类,但语法不同,有五种状态:focused、normal、pressed、disabled、selected。需要将这些信息整合到回答中。 然后,我需要确保回答结构清晰,可能分为几个部分:组件类装饰器状态管理装饰器、样式相关装饰器、其他装饰器,以及示例代码。每个部分下再细分不同的装饰器,给出用途、语法和示例。同时,要注意代码块使用正确的格式,比如使用反引号包裹,并标明语言类型,如typescript或arkts。 在编写过程中,需要注意用户提到的系统级指令,例如行内数学表达式用$...$,但这里可能不太涉及数学公式,所以可能不需要。独立公式如果有的话要用$$...$$,但同样可能不适用。另外,确保LaTeX语法正确,不过这个问题可能主要涉及代码示例,LaTeX用的不多。回答需要用中文,生成相关问题,并在引用处添加标识符,如[^2][^3]。 然后,用户提供的示例中,快速排序的部分有代码块和相关问题,我需要模仿这个结构。在回答完主要内容后,生成相关问题,可能包括装饰器的作用、状态管理装饰器的区别、自定义装饰器的方法、样式装饰器的应用场景等。 现在,开始组织内容: 1. 组件类装饰器:@Component和@Entry,用于定义组件和入口。 2. 状态管理装饰器:@State、@Prop、@Link、@Watch,分别管理组件内部状态、父子组件传值、双向绑定和监听变化。 3. 样式相关装饰器:@Styles和@Extend,用于定义复用样式和扩展组件样式。 4. 其他装饰器:@Builder用于自定义构建函数,@stateStyles根据状态设置样式(来自引用3)。 每个装饰器都需要用法说明和示例代码,例如@State用于私有状态,@Prop用于父传子单向同步,@Link用于双向绑定,@Watch监听变化触发函数。@Styles支持通用样式,@Extend扩展组件样式。@Builder构建UI部分,@stateStyles设置不同状态下的样式。 在示例代码部分,需要确保代码正确,比如在ArkTS中的语法,如struct、build()函数等。例如,@Entry和@Component的组合定义页面,@State变量的使用,@Prop和@Link的传递,@Watch的方法等。 然后,引用相关的部分,比如引用3提到的stateStyles装饰器,需要在对应的部分提到,并添加引用标识。引用2中的自定义装饰器可能涉及@Builder或其他装饰器的使用,但用户的问题可能更关注内置装饰器,所以可能只在其他部分提到,或者生成相关问题的时候提到自定义装饰器。 最后,生成相关问题,比如装饰器的作用、@State和@Link的区别、如何使用@Styles、stateStyles的应用场景等。 现在需要检查是否有遗漏,比如是否提到了所有常用装饰器,示例是否正确,引用是否正确标注,以及是否符合用户的要求。特别是用户提供的引用2和3中的内容是否被恰当引用。</think>### 鸿蒙开发中常用装饰器及用法详解 在鸿蒙应用开发中,装饰器(Decorator)是用于增强组件功能、管理状态或定义样式的核心语法。以下是常见装饰器的分类说明及示例: --- #### 一、组件类装饰器 1. **@Component** - **用途**:定义自定义组件,标识一个结构体为可复用的UI组件。 - **语法**:必须与`build()`方法配合使用。 ```typescript @Component struct MyComponent { build() { // UI结构 } } ``` 2. **@Entry** - **用途**:标记应用的主入口组件,一个应用有且仅有一个`@Entry`组件。 - **示例**: ```typescript @Entry @Component struct MainPage { build() { Column() { Text("Hello HarmonyOS") } } } ``` --- #### 二、状态管理装饰器 1. **@State** - **用途**:定义组件的**私有状态**,状态变化自动触发UI更新。 - **示例**: ```typescript @Component struct Counter { @State count: number = 0 build() { Button(`点击次数: ${this.count}`) .onClick(() => { this.count++ }) } } ``` 2. **@Prop** - **用途**:实现**父组件到子组件**的单向数据同步,子组件不能直接修改值。 - **示例**: ```typescript @Component struct Parent { @State message: string = "Hello" build() { Child({ msg: this.message }) } } @Component struct Child { @Prop msg: string build() { Text(this.msg) } } ``` 3. **@Link** - **用途**:实现父子组件间的**双向数据绑定**,修改会同步到数据源。 - **示例**: ```typescript @Component struct Parent { @State message: string = "Hello" build() { Child({ linkMsg: $message }) // 使用$传递引用 } } @Component struct Child { @Link linkMsg: string build() { TextInput({ text: this.linkMsg }) } } ``` 4. **@Watch** - **用途**:监听状态变量变化并触发回调函数。 - **示例**: ```typescript @Component struct WatchDemo { @State @Watch('onCountChange') count: number = 0 onCountChange() { console.log(`Count值变为: ${this.count}`) } build() { Button("增加").onClick(() => { this.count++ }) } } ``` --- #### 三、样式相关装饰器 1. **@Styles** - **用途**:定义可复用的样式集合,支持**通用样式**(全局或组件内)。 - **示例**: ```typescript // 全局样式 @Styles function globalStyle() { .width(100) .height(100) .backgroundColor(Color.Red) } // 组件内样式 @Component struct StyledComponent { @Styles customStyle() { .fontSize(20) .fontColor(Color.Blue) } build() { Text("样式示例").globalStyle().customStyle() } } ``` 2. **@Extend** - **用途**:扩展特定组件的样式,支持链式调用。 - **示例**: ```typescript @Extend(Text) function boldText() { .fontWeight(FontWeight.Bold) .fontSize(24) } @Component struct ExtendedStyle { build() { Text("加粗文本").boldText() } } ``` 3. **stateStyles**(引用[^3]) - **用途**:根据组件状态(如按下、禁用)动态切换样式。 - **支持状态**:`normal`, `pressed`, `focused`, `disabled`, `selected`。 - **示例**: ```typescript @Component struct StateStyleDemo { build() { Button("状态按钮") .stateStyles({ normal: { .backgroundColor(Color.Gray) }, pressed: { .backgroundColor(Color.Blue) }, disabled: { .backgroundColor(Color.Red) } }) } } ``` --- #### 四、其他装饰器 1. **@Builder** - **用途**:定义可复用的UI构建函数,支持参数传递。 - **示例**: ```typescript @Component struct BuilderDemo { @Builder customButton(text: string) { Button(text) .width(200) .height(50) } build() { Column() { this.customButton("按钮1") this.customButton("按钮2") } } } ``` --- #### 五、自定义装饰器(引用[^2]) 通过解析代码文件并动态生成方法,可实现自定义装饰器逻辑。例如,在`aboutToAppear`生命周期中注入代码: ```typescript // 示例:自动生成监听方法 @Component struct CustomDecoratorDemo { @BindId('btn') btn: Button // 自动生成的aboutToAppear方法 aboutToAppear() { this.btn.setOnClickListener(() => { /* 逻辑 */ }) } } ``` --- 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鸿蒙Next

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值