【鸿蒙开发基础】Harmony OS Next-自定义组件

1.组件介绍

在Harmony OS Next中，UI显示的内容均为组件，由框架直接提供的称为系统组件，比如Row(),Column()等等由开发者定义的称为自定义组件。自定义组件，顾名思义，就是由开发者自己制作的用于实现特定功能的组件。

2.自定义组件书写步骤

2.1自定义组件文件存放位置设置

这里一般路径在entry/src/main/ets文件夹下新建一个components文件夹，在components文件夹中新建一个ArkTsFile，如图1

图1

2.2自定义组件语法

新建文件后，在这个文件中书写自定义组件，以下是自定义组件的语法

@component struct 组件名  {

build(){

//要书写的组件内容

}




}


export default 导出的组件名   

图2

在声明好自定义组件的组件名和成功导出后，需要在主页默认的页面中（一般默认为index.ets）导入刚刚声明好的组件，然后就可以使用该自定义组件了。

import 组件存放的文件夹名 from '组件路径'

@Entry
@Component
struct index1 {
  build() {
    Column(){
     组件名()
    }
  }
}

图3

3.实战

3.1自定义组件页面代码

@Component struct componentText{
  build() {
    Row(){
      Text('我是声明的组件文字')
        .fontSize(20)
        .fontColor(Color.White)
    }
    .width(300)
    .backgroundColor(Color.Blue)

  }
}

export default componentText

图4

3.2主页使用自定义组件

import componentText from '../components/componentText/componentText'

@Entry
@Component
struct index1 {
  build() {
    Column(){
      componentText()
    }
  }
}

图5

3.3实现效果

如果想要生成多次这种文字效果，可以多次引用组件名（）的形式来使用，可以实现的形式也不仅仅是text这一种，笔者这里仅举例使用，深入学习后可以实现多种效果，提高效率，自定义组件在Harmony OS Next中是非常实用的工具之一。