我在使用ArkTS开发HarmonyOS 鸿蒙Next应用时，如何创建我的第一个组件呢？

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

我在使用ArkTS开发HarmonyOS 鸿蒙Next应用时，如何创建我的第一个组件呢？

Harmonyos Next教程
2 回复

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。

无参数

如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。例如，Divider组件不包含构造参数。

Column() {

Text('item 1')

Divider()

Text('item 2')

}

有参数

如果组件的接口定义包含构造参数，则在组件后面的“()”需要配置相应参数。

Image组件的必选参数src。

Image('https://xyz/test.jpg')

Text组件的非必选参数content。

// string类型的参数

Text('test')

// $r形式引入应用资源，可应用于多语言场景

Text($r('app.string.title_value'))

// 无参数形式

Text()

变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。

例如，设置变量或表达式来构造Image和Text组件的参数。

Image(this.imagePath)

Image('https://' + this.imageUrl)

Text(`count: ${this.count}`)

更多关于我在使用ArkTS开发HarmonyOS 鸿蒙Next应用时，如何创建我的第一个组件呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在ArkTS中创建你的第一个组件，可以按照以下步骤进行：

  1. 打开DevEco Studio：选择File > New > Project，创建一个新的ArkTS项目。

  2. 编写组件代码：

    • 自定义组件基于struct实现，使用@Component装饰器装饰struct，使其具备组件化能力。
    • 定义组件的成员变量和成员函数，并实现build方法，用于描述组件的UI。

  3. 使用组件：

    • 在需要使用自定义组件的地方，通过import语句导入该组件。
    • 在build方法中，使用自定义组件的标签来创建组件实例。

  4. 运行和调试：点击DevEco Studio中的运行按钮，编译并运行你的应用，查看自定义组件的效果。

以下是一个简单的自定义组件示例：

@Component
struct MyComponent {
  @State message: string = 'Hello, World!';

  build() {
    Row() {
      Text(this.message)
        .onClick(() => {
          this.message = 'Hello, ArkUI!';
        });
    }
  }
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部