鸿蒙-自定义组件-语法

目录

语法组成

在学习自定义组件前，先看一下ArkTS的组成

装饰器

用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器

Entry

表示该自定义组件为入口组件

Component

表示自定义组件

State

表示组件中的状态变量，状态变量变化会触发UI刷新。

自定义组件

可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。

UI描述

以声明式的方式来描述UI的结构，例如build()方法中的代码块。 

系统组件

ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。可参考：组件导读

事件方法

组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。

属性方法

组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。

Ui描述语法

自定义组件的参数规定

@Component
struct MyComponent {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
  }
}

@Entry
@Component
struct ParentComponent {
  private someColor: Color = Color.Pink;

  build() {
    Column() {
      // 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColor
      MyComponent({ countDownFrom: 10, color: this.someColor })
    }
  }
}

build()函数

@Entry
@Component
struct MyComponent {
  build() {
    // 根节点唯一且必要，必须为容器组件
    Row() {
      ChildComponent() 
    }
  }
}

@Component
struct ChildComponent {
  build() 
  // 反例：不允许本地作用域
  {
    // 根节点唯一且必要，可为非容器组件
    Image('test.jpg')
    //下面为正例子和反例子
    // 反例：不允许声明本地变量
    let a: number = 1;
    // 反例：不允许console.info
     console.info('print debug log');
     Column() {
        // 反例：不能调用没有用@Builder装饰的方法
        this.doSomeCalculations();
        // 正例：可以调用
        this.doSomeRender();
        // 正例：参数可以为调用TS方法的返回值
        Text(this.calcTextValue())

      // 反例：不允许使用switch语法
      switch (expression) {
        case 1:
          Text('...')
          break;
        case 2:
          Image('...')
          break;
        default:
          Text('...')
          break;
    }  
 // 反例：不允许使用表达式
    (this.aVar > 10) ? Text('...') : Image('...')

    }
  }
}