HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 二）

@Component
struct HelloComponent {
  @State message: string = 'Hello, World!';
  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

@Entry
@Component
struct ParentComponent {
  build() {
    Column() {
      Text('ArkUI message')
      HelloComponent({ message: 'Hello, World!' });
      Divider()
      HelloComponent({ message: '你好!' });
    }
  }
}

@Component
struct MyComponent {
}

@Component
struct MyComponent {
  build() {
  }
}

@Entry
@Component
struct MyComponent {
}

@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 })
    }
  }
}

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

build() {
  // 反例：不允许声明本地变量
  let a: number = 1;
}

build() {
  // 反例：不允许console.info
  console.info('print debug log');
}
不允许创建本地的作用域，反例如下。
build() {
  // 反例：不允许本地作用域
  {
    ...
  }
}

@Component
struct ParentComponent {
  doSomeCalculations() {
  }
  calcTextValue(): string {
    return 'Hello World';
  }
  @Builder doSomeRender() {
    Text(`Hello World`)
  }
  build() {
    Column() {
      // 反例：不能调用没有用@Builder装饰的方法
      this.doSomeCalculations();
      // 正例：可以调用
      this.doSomeRender();
      // 正例：参数可以为调用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}

build() {
  Column() {
    // 反例：不允许使用switch语法
    switch (expression) {
      case 1:
        Text('...')
        break;
      case 2:
        Image('...')
        break;
      default:
        Text('...')
        break;
    }
  }
}

build() {
  Column() {
    // 反例：不允许使用表达式
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}
@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}

// 自定义controller
export class MyComponentController {
  item: MyComponent = null;
  setItem(item: MyComponent) {
    this.item = item;
  }
  changeText(value: string) {
    this.item.value = value;
  }
}
// 自定义组件
@Component
export default struct MyComponent {
  public controller: MyComponentController = null;
  @State value: string = 'Hello World';
  build() {
    Column() {
      Text(this.value)
        .fontSize(50)
    }
  }
  aboutToAppear() {
    if (this.controller)
      this.controller.setItem(this); // 绑定controller
  }
}
// 使用处逻辑
@Entry
@Component
struct StyleExample {
  controller = new MyComponentController();
  build() {
    Column() {
      MyComponent({ controller: this.controller })
    }
    .onClick(() => {
      this.controller.changeText('Text');
    })
  }
}