【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 )

参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍

一、ArkTS 自定义组件

1、@Component 装饰器

ArkTS 语言的 @Component 组件 , 用于修饰 struct 结构 , 表示自定义组件 , 定义的自定义组件 可以用在 其它组件中 ;

@Component 自定义组件 中 , 最终的操作是将 OpenHarmony 提供的内置 的 容器组件 和 基础组件 进行封装 组合 , 形成新的复杂组件 ;

2、自定义组件语法

ArkTS 自定义组件语法如下 : 使用 @Component 装饰器 修饰 struct 结构 , 在 struct 结构体中的 build 函数 , 就是 ArkTS 的 UI 声明 ;

@Component 
struct 组件名称 {
	build(){
		// UI 声明
	}
}

• struct 关键字 表示该 结构 具有 组件化能力 , 是一个独立的组件 ;
• build 函数 的作用是 UI 声明 , 用于描述 该自定义组件 中包含了哪些子组件 , 以及子组件的布局 , 大小 , 位置 , 样式 等信息 ;

进行了上述声明后 , 该组件就 有了 UI 组件的特征 , 可以独立使用用于其它组件构建 ;

在 UI 声明 build 函数中 , 可以放置 内置组件 或 自定义组件 , 此时这些组件 就是 子组件 , 本组件就是 父组件 ;

3、将自定义组件设置为页面入口

OpenHarmony 应用的 显示的 整个页面也是一个 自定义组件 ,

如果要将该 自定义组件 设置为 显示页面 ,

则需要 使用 @Entry 装饰器 装饰 @Component 自定义组件 , 语法如下 :

@Entry
@Component 
struct 组件名称 {
	build(){
		// UI 声明
	}
}

使用 @Entry 装饰器 修饰组件 , 可以 将该组件设置为 页面默认入口 , 当加载页面时 , 首先加载 @Entry 组件 , 每个页面只能有一个 @Entry 组件 ;

二、ArkTS 使用外部自定义组

一般情况下 , 每个自定义组件 都 单独写到一个 ArkTS 代码中 , 将该组件封装成一个独立模块 ;

如果需要 在 其它自定义组件 中使用到该自定义组件 ,

使用前 , 首先导入 自定义组件 所在的代码模块 , 然后再使用导入的自定义组件 ;

1、自定义可导入组件 - export 声明模块

如果要定义一个在外部可使用的组件 ,

需要再定义组件时 , 使用 export 关键字 修饰 struct 结构体 ;

@Component 
export struct ComponentName {
	build(){
		// UI 声明
	}
}

代码示例 : 只有使用 export 修饰的 结构 , 才将该自定义组件代码声明为一个 模块 , 才能在其他的 ArkTS 组件代码中导入该模块 , 否则无法被导入 ;

@Component
export struct MyComponent {
  // 自定义子组件
  build() {
    Column({ space: 20 }) { // 设置子组件间距为10

      Text('Text1')
        .fontSize(20)
        .backgroundColor(Color.Green)

      Text('Text2')
        .fontSize(20)
        .backgroundColor(Color.Yellow)

      Text('Text3')
        .fontSize(20)
        .backgroundColor(Color.Gray)

    }
    .width('50%') // 设置 Row 的宽度
    .height('50%') // 设置 Row 的高度
    .backgroundColor(Color.Pink)
    .alignItems(HorizontalAlign.Center) // 水平居中
    .justifyContent(FlexAlign.Center) // 垂直居中
  }
}

2、导入自定义组件 - import 导入组件

导入自定义组件时 , 需要 使用 import 关键字导入组件 , 语法如下 :

import {ComponentName} from '../view/ComponentName';

在 import 关键字后的大括号中 , 跟上要导入的 自定义组件名称 ,

在 from 关键字 后面的字符串 , 是 自定义组件 代码的 相对路径 ;

在下面的代码中 ,

MyComponent 自定义组件 定义在 " entry\src\main\ets\view " 目录中 ,

展示页面 定义在 " entry\src\main\ets\pages " 目录中 ,

因此 , 导入外部组件时 , 需要使用 import {MyComponent} from '../view/MyComponent'; 指定要导入的外部组件名称 和 相对路径 ;

代码示例 :

// 导入外部自定义子组件
import {MyComponent} from '../view/MyComponent';

@Entry
@Component
struct Example {
  build() {
    // 必须使用布局组件包括子组件
    Column(){
      // 自定义子组件
      MyComponent();
    }
  }
}

展示效果如下 :