HarmonyOS鸿蒙Next初学者小白，不是很懂这几个语法，求大佬讲解！！

HarmonyOS鸿蒙Next初学者小白，不是很懂这几个语法，求大佬讲解！！ @State，@Builder，@Extend 。这三个是什么区别？

private，这个又是什么，感觉每次看到课堂说的时候可以明白，到自己写的时候，用法就很迷惑。。。

18 回复
装饰器 核心作用 场景举例 本质
@State 管理响应式状态，驱动 UI 刷新 计数器、开关按钮的状态变化 状态 → UI 联动
@Builder 封装复用 UI 片段 重复出现的布局（如列表项、图标组） UI 模板
@Extend 扩展组件样式 / 行为 统一按钮、文本的样式 组件增强补丁

private：访问修饰符（控制类成员的访问范围）

private 是面向对象中的访问修饰符，用于限制类中成员（属性或方法）的访问权限：

  • 被 private 修饰的成员，只能在当前类内部访问，类的外部（包括实例）、子类都不能直接访问。

  • 作用：封装类的内部实现，避免外部随意修改，保证代码的安全性和可维护性。

  • 当需要 “状态变化驱动 UI 更新” 时，用 [@State](/user/State)；

  • 当需要 “复用一段 UI 结构” 时，用 [@Builder](/user/Builder)；

  • 当需要 “统一扩展组件样式” 时，用 [@Extend](/user/Extend)；

  • 当需要 “隐藏类的内部细节，不让外部乱改” 时，用 private。

更多关于HarmonyOS鸿蒙Next初学者小白，不是很懂这几个语法，求大佬讲解！！的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢大佬解答！！，

大佬可以帮忙看看 我下面发的那个评论吗 ？感谢~

背景知识：

@State ：被装饰的变量与ui进行绑定，值变化ui同步更新。

@Builder：提供轻量的UI元素复用机制，也就是说可以将相同的ui写在一个方法里面，该方法可以传递参数来对不同ui展示进去区别。

@Extend ：是将相同的样式放入一个方法中。类比于h5的style或者andorid里面的style样式。

访问权限：private、public、protected

以上三个是控制访问权限，可以放在方法和变量上面，其区别在于：

private 修饰的只能哎类中访问，任何类外不访问不到

public 修饰的是公开的，任何类都可以访问

protected 修饰的是继承的子类是公开的，其他非继承的类无法访问

问题解决：

//Extend修饰的需要放入类外，不能放入在类内部
[@Extend](/user/Extend)(Text)
function textStyle() {
    .fontSize(18)
    .fontColor(Color.Blue)
    .fontWeight(FontWeight.Regular)
}

@Entry
@Component
struct ContinuePage {
    [@State](/user/State) message: string = '测试数据';

    //没有被 State修饰的点击无法修改
    message2: string = '测试数据';

    build() {
        Column() {
            Text(this.message)
                .fontSize(18)
                .fontColor($r("app.color.primary_color"))
                .fontWeight(FontWeight.Bold)
                .textAlign(TextAlign.Center)
                .onClick(() => {
                    this.message = "点击修改了";
                })

            //可以根据参数来显示不同的ui
            this.Text2(1)
        }
        .height('100%')
        .width('100%')
    }

    //提取相同的ui
    [@Builder](/user/Builder)
    Text2(index:number) {
        if(index==1){
            Text("index==1 "+this.message2)
                .textStyle()
                .onClick(()=>{
                    this.message2 = "没有变化";
                })
        }else{
            Text("index!=1 "+this.message2)
                .textStyle()
                .onClick(()=>{
                    this.message2 = "没有变化";
                })
        }

    }
}

动图示例： cke_67216.gif

@State（状态管理）

通过装饰器拦截变量的getter/setter，建立状态与UI的绑定关系。当变量值变化时，自动触发关联UI更新

@State count: number = 0//必须本地初始化且只能组件内部访问

@Builder（UI构造器）

相当于UI构造函数，用于生成具体的UI节点。通过参数传递可实现动态渲染

@Builder myButton(text: string) { Button(text).width(100) }

必须按引用传递单个对象字面量，内部禁止修改入参

@Extend（样式扩展）

基于原型链继承扩展组件样式属性，本质上是对组件样式的二次封装

@Extend(Text) function textStyle(size: number) { .fontColor(Color.Red) .fontSize(size) }

不支持组件内部定义，无状态管理能力

private关键字

限制变量/方法仅在当前组件内部可访问，实现封装性

private internalData: string = “secret”

纯内部逻辑变量/方法且无需响应式更新时可用

// 私有缓存数据，不涉及UI更新

private cacheList: string[] = []

禁止需要与父组件交互或装饰器时联用（@Prop、@Provide）

@State：状态变量，可以联动UI刷新数据

cke_6762.png

如果如下声明，Text的内容不会改变：

cke_10316.png

@Builder：一般用来标识自定义构建函数，该函数可以理解为UI的一个片段

cke_10784.png

@Extend：有扩展的意思，扩展系统组件

cke_11225.png

相当于css里面提取公共样式，达到复用的目的。

private：有私有的意思，声明的变量或者方法只能在一定的范围内访问，比如在class A中定义的变量就只能在A类中使用，其他的地方无法调用

以上的讲解希望对你有帮助，记得“采纳意见”

感谢大佬解答！！，

@State：状态管理装饰器

用于标记组件内部的状态变量。当状态变量变化时，触发UI自动刷新。

@Component
struct MyComponent {
  [@State](/user/State) count: number = 0; // 状态变量
  build() {
    Column() {
      Text(`Count: ${this.count}`)
      Button('+1').onClick(() => { this.count++ })
    }
  }
}

@Builder：UI结构复用装饰器

用于封装可复用的UI描述片段，支持参数传递和动态内容构建。

[@Builder](/user/Builder)
function CustomButton(text: string) {
  Button(text)
    .width(100)
    .backgroundColor(Color.Blue)
}

@Component
struct Parent {
  build() {
    Column() {
      CustomButton("Submit") // 复用UI片段
    }
  }
}

@Extend：组件样式扩展装饰器

扩展系统组件（如Text、Button）的样式和事件，支持参数传递。

[@Extend](/user/Extend)(Text)
function FancyText(size: number) {
  .fontSize(size)
  .fontColor(Color.Red)
}

@Component
struct MyComponent {
  build() {
    Text("Hello").FancyText(20) // 应用扩展样式
  }
}

private 表示成员变量只能在当前组件内部访问和修改，外部组件（包括父组件）无法直接访问

感谢大佬解答！！，

装饰器说明

  • @State
    给变量添加数据监听功能，当变量值发生变化时，会自动触发 UI 刷新。
    主要用于实现数据驱动的界面更新。

  • @Builder
    自定义组件装饰器。
    常用于页面中存在多个样式、结构、字段完全相同的模块时，将其抽取成可复用的组件。
    也可用于模块化页面功能，使结构更清晰、易维护。

  • @Extend
    公共样式装饰器。
    可将页面中相同的字体、颜色、宽度、高度等样式统一抽取成一个公共定义，方便复用与维护。

访问修饰符

  • private
    表示私有属性，只能在类或结构体内部访问，外部无法直接访问或修改。
    用于保护内部数据，避免被外部随意更改。

装饰器是 arkui 的 访问修饰符是 arts 建议你先学学 ts 再学 arkui，

感谢大佬解答！！，

第一课里面这个部分的讲解，这边说的@builder 是不是也是有个什么没写，上面是不是应该也有一个struct 包裹着才对？ 待大佬解答！！

cke_1714.png

想问问 @Builder 有时候为什么打不出来，它是需要再什么结构内吗？还是这个就是需要手动输入的？

cke_197.png

比如我们新建了一个页面 页面内的结构是包含@Entry 那这个时候 我们写@Builder 是写在什么位置？

简单说，上面那个Builder是 “对外暴露的页面入口构建器”，负责整体页面的构建；下面那个Builder是 “组件内部的按钮复用构建器”，负责局部 UI 元素的构建，两者在粒度、可见性和依赖关系上有本质区别。

你现在用的一般是下边那个@Builder 这里用的是 莫逍遥 大哥的解析 他那里写了，

在HarmonyOS鸿蒙Next中，常见语法包括ArkTS的声明式UI和状态管理。使用@Entry装饰器标记应用入口组件，@Component定义可复用UI组件。通过@State装饰变量实现数据驱动UI更新，例如@State count: number = 0。事件处理使用箭头函数，如onClick(() => { this.count++ })。布局采用Flex、Column、Row等容器组件。这些语法基于TypeScript，但强化了响应式和组件化特性。

在HarmonyOS应用开发中，[@State](/user/State)、[@Builder](/user/Builder)和[@Extend](/user/Extend)是ArkUI框架中用于声明式UI开发的核心装饰器，而private是TypeScript/ArkTS的访问控制修饰符。以下是它们的区别和用法：

1. @State

[@State](/user/State)是状态装饰器，用于标记组件内部的状态变量。当[@State](/user/State)修饰的变量值发生变化时，会触发UI重新渲染。它通常用于管理组件的内部状态，例如用户输入、按钮点击等。

示例：

[@State](/user/State) count: number = 0; // 当count变化时，UI会自动更新

2. @Builder

[@Builder](/user/Builder)是构建器装饰器，用于定义可复用的UI片段。通过[@Builder](/user/Builder)可以将UI逻辑封装为一个方法，在多个地方调用，避免代码重复。

示例：

[@Builder](/user/Builder)
myButton(text: string) {
  Button(text)
    .onClick(() => {
      // 点击事件
    })
}

// 调用
this.myButton('点击我')

3. @Extend

[@Extend](/user/Extend)是扩展装饰器，用于扩展现有组件的样式或行为。通过[@Extend](/user/Extend)可以为组件添加自定义的样式方法，实现样式的复用。

示例：

[@Extend](/user/Extend)(Text)
function fancyText() {
  .fontSize(20)
  .fontColor(Color.Red)
}

// 使用
Text('Hello').fancyText()

4. private

private是TypeScript/ArkTS中的访问修饰符，用于限制类成员的访问范围。private修饰的成员只能在当前类内部访问，外部无法直接访问。

示例：

class MyClass {
  private secret: string = '隐藏数据'; // 只能在MyClass内部使用
  public publicData: string = '公开数据'; // 可以在外部访问
}

总结：

  • [@State](/user/State)：管理状态，驱动UI更新。
  • [@Builder](/user/Builder)：封装UI逻辑，实现复用。
  • [@Extend](/user/Extend)：扩展组件样式，增强灵活性。
  • private：控制类成员的访问权限，增强封装性。

在实际开发中，根据需求选择合适的装饰器和修饰符，可以提升代码的可维护性和复用性。多练习和参考官方文档会有助于掌握它们的用法。

回到顶部