鸿蒙 ArkTs 基础

ArkTS は高性能アプリケーションを構築するために設計されたプログラミング言語です。ArkTS は TypeScript の構文を継承し、より高いパフォーマンスと開発効率を提供するために最適化されています。

基本構文の概要#

デコレーター：クラス、構造体、メソッド、変数を装飾し、特別な意味を与えます。上記の例の @Entry、@Component、@State はすべてデコレーターであり、@Component はカスタムコンポーネントを示し、@Entry はそのカスタムコンポーネントがエントリコンポーネントであることを示し、@State はコンポーネント内の状態変数を示し、状態変数の変化が UI の更新を引き起こします。
UI の記述：宣言的な方法で UI の構造を記述します。例えば、build () メソッド内のコードブロックです。
カスタムコンポーネント：再利用可能な UI ユニットで、他のコンポーネントを組み合わせることができます。上記の @Component で装飾された struct Hello のように。
システムコンポーネント： ArkUI フレームワークにデフォルトで内蔵されている基本およびコンテナコンポーネントで、開発者が直接呼び出すことができます。例えば、例にある Column、Text、Divider、Button などです。
プロパティメソッド：コンポーネントは、fontSize ()、width ()、height ()、backgroundColor () などの複数のプロパティをチェーン呼び出しで設定できます。
イベントメソッド：コンポーネントは、Button の後に続く onClick () のように、複数のイベントの応答ロジックをチェーン呼び出しで設定できます。
システムコンポーネント、プロパティメソッド、イベントメソッドの具体的な使用法は、ArkTS に基づく宣言的開発のパラダイムを参照してください。

さらに、ArkTS は開発をより便利にするためにさまざまな構文パラダイムを拡張しました：

@Builder/@BuilderParam： UI の記述を特別にカプセル化する方法で、細かい粒度で UI の記述をカプセル化および再利用します。
@Extend/@Styles：内蔵コンポーネントを拡張し、プロパティスタイルをカプセル化し、内蔵コンポーネントをより柔軟に組み合わせます。
stateStyles：多態スタイルで、コンポーネントの内部状態に応じて異なるスタイルを設定できます。

宣言的 UI 記述#

ArkTS は宣言的にコンポーネントを組み合わせて拡張し、アプリケーションの UI を記述します。また、基本的なプロパティ、イベント、およびサブコンポーネントの設定方法を提供し、開発者がアプリケーションのインタラクションロジックを実現するのを助けます。

コンポーネントの作成#

コンポーネントの構造メソッドに応じて、コンポーネントの作成にはパラメータありとなしの 2 つの方法があります。

パラメータなし#

コンポーネントのインターフェース定義に必須の構造パラメータが含まれていない場合、コンポーネントの後の “()” には何も設定する必要はありません。例えば、Divider コンポーネントには構造パラメータが含まれていません。

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

パラメータあり#

コンポーネントのインターフェース定義に構造パラメータが含まれている場合、コンポーネントの後の “()” に適切なパラメータを設定する必要があります。

// string 型のパラメータ
Text("test");
// $r 形式でアプリリソースを引き入れ、多言語シーンに適用可能
Text($r("app.string.title_value"));
// パラメータなしの形式
Text();

プロパティの設定#

プロパティメソッドは “.” チェーン呼び出しの方法でシステムコンポーネントのスタイルやその他のプロパティを設定し、各プロパティメソッドを別々の行に書くことをお勧めします。

Text コンポーネントのフォントサイズを設定します。

Text("test").fontSize(12);

コンポーネントの複数のプロパティを設定します。

Image("test.jpg").alt("error.jpg").width(100).height(100);

定数パラメータを直接渡すだけでなく、変数や式を渡すこともできます。

Text("hello").fontSize(this.size);
Image("test.jpg")
  .width(this.count % 2 === 0 ? 100 : 200)
  .height(this.offset + 100);

イベントの設定#

イベントメソッドは “.” チェーン呼び出しの方法でシステムコンポーネントがサポートするイベントを設定し、各イベントメソッドを別々の行に書くことをお勧めします。

アロー関数式を使用してコンポーネントのイベントメソッドを設定します。“() => {...}” を使用して、関数とコンポーネントをバインドし、ArkTS の構文規則に従う必要があります。

Button("add counter").onClick(() => {
  this.counter += 2;
});

コンポーネントのメンバー関数を使用してコンポーネントのイベントメソッドを設定する場合、this をバインドする必要があります。ArkTS の構文では、メンバー関数を使用して this をバインドしてコンポーネントのイベントメソッドを設定することは推奨されていません。

myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

宣言されたアロー関数を使用すると、直接呼び出すことができ、this をバインドする必要はありません。
アロー関数内の this はレキシカルスコープであり、コンテキストによって決まります。匿名関数は this の指向が不明確になる可能性があり、ArkTS では使用が許可されていません。

サブコンポーネントの設定#

コンポーネントがサブコンポーネントの設定をサポートしている場合、尾随するクロージャ "{...}" 内でコンポーネントにサブコンポーネントの UI 記述を追加する必要があります。Column、Row、Stack、Grid、List などのコンポーネントはすべてコンテナコンポーネントです。

Column() {
  Row() {
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}

この記事は Mix Space によって xLog に同期更新されました
元のリンクは http://www.sroxck.top/posts/harmony/arkts-base