本篇文章帮你快速了解ArkUI Page页面的基本结构

1. Page结构

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .onClick(() => {
          
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

上面是ArkUI的最基本的页面组成，下面介绍每个关键词的含义

@Entry装饰的自定义组件将作为UI页面的入口，一个页面中可以有多个自定义组件，但是只能有一个用@Entry装饰的自定义组件。
@Component: 表示自定义组件
struct: ArkUI自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。
@State: 表示组件中的状态变量，被状态装饰器装饰的变量，状态变量值的改变会引起UI的渲染更新。状态变量还可以用@Prop, @Link,@Provide等装饰器表述。
build(): build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。所有在build函数中的语言，统称为UI描述。
Row/Column是ArkUI中的容器组件，ArkUI中还包含层叠布局(Stack)，弹性布局（Flex），相对布局（RelativeContainer）等
Text是ArkUI中的基础组件，ArkUI中还包含Button、Radio、Toggle、Progress、TextInput、TextArea、Divider等基本组件。
fontSize、width是ArkUI属性方法，可以通过链式调用配置多项属性。通过这些属性可以设置组件的样尺寸、颜色、边框、边距等样式。
onClick是组件被点击触发的事件方法

鸿蒙原生开发学习(二)绘制第一个ArkUI页面

1. Page结构