ETS装饰器学习之Entry、Component 原创

droidzxy

发布于 2022-10-26 17:19

浏览

0收藏

在学习声明式UI框架ArkUI的过程中，会遇到装饰器的概念，不管是简单的示例页面还是复杂的大程序，都离不开装饰器的使用，为了帮助自己对装饰器有一个基本的了解，并能够熟练的使用，所以专门针对ets装饰器系统的学习了一下，并整理成简单的笔记，以便健忘的我随时回来复习一下。

本文主要介绍@Component和@Entry，ArkTS通过这两个关键字来装饰struct声明的数据结构，这个过程我们称为自定义组件。组件内部需要提供一个build函数，我们在该函数体内按照链式调用的方式来描述整个页面的UI布局。

@Entry

装饰@Component，组件被装饰后作为页面的默认入口，页面加载时渲染显示，
一个页面有且仅有一个@Entry入口。

示例代码：

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Text('hello world')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

效果预览：

ETS装饰器学习之Entry、Component-鸿蒙开发者社区

@Component

ets页面由组件组成，组件是由Component装饰的，被entry装饰的component作为页面的主入口，页面加载时会首先渲染，其他组件会在被调用时进行渲染。

简言之，被Component装饰的struct称为UI组件。
主要特征：

一个页面可以包含一个或多个component；
每个component都必须实现build方法来更新UI；
一个component内部还可以调用另外一个component；

示例代码：

@Entry
@Component
struct MainComponent {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Black is MainComponent')
        .fontSize(26)
        .fontColor(Color.Black)
        .height(50)
      SubComponent()
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct SubComponent {
  build() {
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Red is SubComponent')
        .fontSize(26)
        .fontWeight(500)
        .fontColor(Color.Red)
    }
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.