鸿蒙 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 の構文では、メンバー関数と bind this を組み合わせてコンポーネントのイベントメソッドを設定することは推奨されません。

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

宣言されたアロー関数を使用すると、直接呼び出すことができ、bind 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