初识鸿蒙页面结构组成

这是一个简单的hello页面

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('按钮')
          .fontSize(25)
          .width(150)
          .height(60)
          .onClick(() => {
            this.message = '111'
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

拆解页面组成

@开头的组合在HarmonyOS中被称作装饰器，可以将它理解为一个标记，用来表示后面定义内容的作用。后续会整理常用的装饰器作用。

• 装饰器@Component：表示下方是一个自定义组件，一个页面可以定义多个自定义组件，且可以被复用。
• 装饰器@Entry：表示下方组件为页面的入口组件，当然页面的入口组件只能有一个，固定搭配如下图所示
• struct + 自定义名称: 固定搭配，表示在构建一个自定义组件。
• 装饰器@State： 表示在定义一个变量，该变量为可响应式变量，修改变量值UI会响应修改。
• build(){}: 固定写法，用来包裹组件UI内容。

总结

UI组件的使用后续会统一整理。上面的例子可以看出的一些内容，组件用法都是声明式使用，样式和元素绑定的事件都是链式调用的。个人认为简单的页面可能比较方便，复杂的组件反而适得其反，后续看一下如何拆分以及抽离组件。