【HarmonyOS】ArkTS言語導入とコンポーネントアプローチ応用

本日より、ブロガーが市場で人気のテクノロジー「Hongmeng Development」について解説する新しいコラムを開設します。このテクノロジーを初めて使用する方は、Hongmeng Development を学ぶ前に、まず Hongmeng について理解する必要があります。紅蒙さん、それは何だと思いますか？その出現にはどのような意味があるのでしょうか？Honmeng は単なるモバイルオペレーティングシステムですか? その出現によって世界は Android と IOS から切り離されるのでしょうか? その将来性は携帯電話市場全体を支配できるでしょうか?

このようなHongmeng 開発に対する疑問と好奇心を持ちながら、今日から ArkTS 言語の理解とコンポーネントの習得を始めましょう!

ArkTS 言語の最初の紹介

ArcUI の基本コンポーネント

画像（画像表示部品）

Text（テキスト表示部品）

TextInput (テキスト入力ボックス)

ArkTS 言語の最初の紹介

ArkTS は、HarmonyOS の主要なアプリケーション開発言語として推奨されています。TypeScript (略して TS) に基づいており、ArkUI フレームワークに適合し、宣言型 UI や状態管理などの対応する機能を拡張し、開発者がよりシンプルかつ自然な方法で開発できるようにします。 . クロスエンドアプリケーション。ArkTS とは何かを理解するには、まず次のように、ArkTS、TypeScript、JavaScript の関係を理解する必要があります。

ArkTSを学習する前に、まずJSとTSを理解してマスターすることをお勧めします。この2つの言語をマスターしてからArkTSを見返すと、すぐに始めることができます。ArkTS は TypeScript 言語と互換性があり、宣言型 UI、状態管理、同時タスクなどの機能を拡張します。ArkTS 言語を学習する前に、開発者は ts 言語の開発能力を備えておくことをお勧めします。現在、ArkTS は主に ts に基づいて次の機能を拡張しています。

基本的な構文:

ArkTS は、宣言型 UI 記述、カスタムコンポーネント、および UI 要素を動的に拡張する機能を定義しており、ArkUI 開発フレームワークのシステムコンポーネントおよび関連するイベントメソッド、プロパティメソッドなどとともに、UI 開発の本体を形成します。

ステータス管理：

ArkTS は、多次元の状態管理メカニズムを提供します。UI 開発フレームワークでは、UI に関連付けられたデータをコンポーネント内で使用したり、親コンポーネントと子コンポーネントの間、祖父コンポーネントと孫コンポーネントの間など、異なるコンポーネントレベル間で受け渡したりすることができます。アプリケーションの範囲またはデバイス間での転送。また、データ転送形式の観点からは、読み取り専用の片方向転送と変更可能な双方向転送に分けることができます。開発者はこれらの機能を柔軟に活用して、データとUIの連携を実現できます。

レンダリングコントロール:

ArkTS はレンダリング制御機能を提供します。条件付きレンダリングでは、アプリケーションのさまざまな状態に応じて、対応する状態で UI コンテンツをレンダリングできます。ループレンダリングでは、データソースからデータを繰り返し取得し、各繰り返し中に対応するコンポーネントを作成できます。データの遅延読み込みでは、データソースからのオンデマンドでデータを反復し、各反復中に対応するコンポーネントを作成します。

今後、ArkTS はアプリケーション開発/運用のニーズに基づいて進化を続け、並列処理および同時実行機能の強化、システムタイプの強化、分散開発パラダイムなど、より多くの機能を徐々に提供していきます。

ArkTS のレイアウト構造に関しては、開発者はページ上で対応する要素を宣言する必要があります。レイアウト構造は通常、ユーザーインターフェイスの全体的なアーキテクチャを表す階層構造になっています。一般的なページ構造は次のとおりです:

ページはページのルートノードを表し、列/行などの要素はシステムコンポーネントです。ArkUI は、さまざまなページ構造に応じて、開発者が対応するレイアウト効果を実現できるようにさまざまなレイアウトコンポーネントを提供します。たとえば、Row は線形レイアウトの実装などに使用されます。

ArcUI の基本コンポーネント

次に、ArkUI の基本的な使い方をマスターするために、ArkUI の一般的に使用される基本コンポーネントの簡単なデモンストレーションとアプリケーションを実行します。

画像（画像表示部品）

次のように Image コンポーネントを宣言し、画像ソースを設定します。

Image(src: string|PixelMap|Resource)

1) 文字列形式。通常、ネットワークイメージをロードするために使用されます。ネットワークアクセス許可を申請する必要があります: ohos.permission.INTERNET

画像('https://xxx.png')

module.json5 フォルダーを開き、次の requestPermissions オプションを構成すると、画像が表示されることがわかります。

2)PixelMap 形式。ピクセル画像を読み込むことができ、画像編集でよく使用されます。

画像(ピクセルマップオブジェクト)

3) リソース形式、ローカルイメージのロード、推奨

画像($r('app.media.mate'60.png)

画像($rawfile('mate60.png'))

Text（テキスト表示部品）

Text(content?: string|Resource)

1) 文字列形式、テキストの内容を直接入力します。

Text('テキストコンテンツ')

2) リソース形式、ローカルリソースファイルの読み取り

テキスト($r('app.string.width_label'))

ここでは、動的テキスト表示を設定します。

TextInput (テキスト入力ボックス)

TextInput( {placeholder?: ResourceStr, text?: ResourceStr} )

1) placeHolder: 入力ボックスに入力がない場合のプロンプトテキスト

TextInput({プレースホルダー: 'アカウント番号または携帯電話番号を入力してください'})

2) text: 入力ボックスの現在のテキスト内容

TextInput({text: 'テキストコンテンツ'})

たとえば、次のように入力ボックスを使用して画像のサイズを動的に変更します。

以下に、さまざまなタイプの入力ボックスについて説明します。

名前	説明する
普通	基本的な入力モード。数字、文字、アンダースコア、スペース、特殊文字の入力をサポートします。
パスワード	パスワード入力モード。数字、文字、アンダースコア、スペース、特殊文字の入力をサポートします。
Eメール	メールアドレス入力モード。数字、文字、アンダースコア、@ 文字をサポートします。
番号	純粋なデジタル入力モード。
電話番号	電話番号入力モード。長さの制限なく、数字、+、-、*、# の入力をサポートします。

ボタン（ボタンコンポーネント）

Button(label?: ResourceStr)

1) テキストボタン

ボタン(「クリックしてください」)

2) ボタンをカスタマイズし、ボタン内に他のコンポーネントをネストします。

ボタン（）{

画像($r('app.media.search')).width(20).margin(10)

}

たとえば、ボタンを使用して画像のサイズを動的に変更する場合、操作は次のようになります。

以下に、さまざまな種類のボタンについて説明します。

名前	説明する
カプセル	カプセルボタン (丸い角のデフォルトは半分の高さ)。
丸	丸いボタン。
普通	通常のボタン (デフォルトでは角が丸くありません)。

スライダー（スライダーコンポーネント）

スライダーコンポーネントの関数実装は非常にシンプルで、スライダー内で関数を設定し、外部でスタイルを設定するだけです。

列、行（レイアウトコンテナ）

次の表に、列コンテナと行コンテナの対応する配置に使用されるパラメータを示します。

プロパティメソッド名	説明する	パラメータ
justifyコンテンツ	子要素の主軸方向の配置形式を設定する	FlexAlign 列挙型
アイテムを揃える	子要素の軸を横切る方向の配置形式を設定します	行コンテナーは、VerticalAlign 列挙体を使用します
アイテムを揃える	子要素の軸を横切る方向の配置形式を設定します	列コンテナは horizontalAlign 列挙を使用します

ColumnコンテナのFlexAlignを使用した主軸整列機能とその特徴は以下のとおりです。

RowコンテナのFlexAlignを使用した主軸整列機能とその特徴は以下のとおりです。

2 つは次のように交差軸上に配置されます。

列コンテナ: 垂直レイアウト、最初は上から下、次に左から右へ。

行コンテナ: 水平レイアウト、最初は左から右、次に上から下です。

列コンテナと行コンテナの使用例を以下に示します。

@Entry
@Component

struct Index {
  // 设置状态变量
  @State ImageWidth: number = 150

  build() {
    Column() {
      Row(){
        Image($r('app.media.icon'))
          .width(this.ImageWidth)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)
      Row(){
        Text($r('app.string.width_label'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#008c8c')
        TextInput({text: this.ImageWidth.toString()})
          .backgroundColor('#fff')
          .width(200)
          .type(InputType.Number) // 只能输入数字类型
          .onChange(value=>{
            if (!value) {
              this.ImageWidth = 0
            }else {
              this.ImageWidth = parseInt(value)
            }
          })
      }
      .width('100%')
      .padding({left: 10, right: 10})
      .justifyContent(FlexAlign.SpaceBetween)
      Divider().width('91%')
      Row(){
        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.ImageWidth >= 10){
              this.ImageWidth -= 10
            }
          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if (this.ImageWidth <= 300) {
              this.ImageWidth += 10
            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .margin({top: 30, bottom: 30})

      Slider({
        min: 100,
        max: 300,
        value: this.ImageWidth,
        step: 10, // 步长
      })
        .width('90%')
        .blockColor('#36D')
        .trackThickness(5) // 滑动条的粗细
        .showTips(true) // 显示气泡百分比
        .onChange(value => {
          this.ImageWidth = value
        })
    }
    .width('100%')
    .height('100%')
  }
}

その結果、次のような効果が得られます。

ForEach (ループ制御)

ForEach は配列をループし、配列の内容に基づいてページコンポーネントをレンダリングします。その基本的な形式は次のとおりです。

ForEach(
    arr: Array, // 要遍历的数据数组
    (item: any, index?: number) => {
        // 页面组件生成函数
    }
    keyGenerator?: (item: any, index?: number): string => {
        // 键生成函数，为数组每一项生产一个唯一标识，组件是否重新渲染的判断标准
    }
)

以下は、ForEach を通じてページを生成するコンポーネントの基本的なケースです。

class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  constructor(name: string, image: ResourceStr, price: number, discount = 0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

@Entry
@Component

struct Index {
  // 商品数据
  private items: Array<Item> = [
    new Item('华为', $r('app.media.icon'), 6999, 500),
    new Item('小米', $r('app.media.icon'), 7999),
    new Item('苹果', $r('app.media.icon'), 9999),
    new Item('三星', $r('app.media.icon'), 3999),
    new Item('oppo', $r('app.media.icon'), 1999),

  ]
  build(){
    Column({space: 4}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})

      ForEach(
        this.items,
        (item: Item) => {
          Row({space: 10}){
            Image(item.image)
              .width(100)
            Column({space: 4}){
              if (item.discount) {
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('原价：￥ '+ item.price)
                  .fontColor('#ccc')
                  .fontSize(14)
                  .decoration({type: TextDecorationType.LineThrough})
                Text('折扣价：￥ '+ (item.price - item.discount))
                  .fontColor('#F36')
                  .fontSize(18)
                Text('补贴：￥ '+ item.discount)
                  .fontColor('#F36')
                  .fontSize(18)
              }else {
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('￥ '+ item.price)
                  .fontColor('#F36')
                  .fontSize(18)
              }
            }
            .margin({left: 10})
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .height(120)
          .borderRadius(20)
          .backgroundColor('#EFEFEF')
          .padding(20)
          .margin({bottom: 10})
        }
      )
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

結果は次のように表示されます。

リスト（リストコンテナ）

List は複雑なコンテナです。ページコンテンツの量が画面を超えると、そのリスト項目 ListItem が自動的にスクロール機能を提供します。もちろん、リスト項目は縦方向または横方向に配置できます。その基本的な形式のコードは次のとおりです:

List({space: 10}){
    ForEach([1, 2, 3, 4], item => {
        ListItem(){
            // 列表项内容，只能包含一个根组件
            Text('ListItem')
        }
    })
}
.width('100%')
.listDirection(Axis.Vertical) // 列表方向，默认纵向（垂直）

ページのスクロールを実現するために、ForEarch の外側に List コンテナをネストし、ForEach の内側に ListItem をネストします。

最終的な効果は以下の通りです。

ArkTS カスタムコンポーネント

ArtTS は、複雑なコードを分離し、コードの保守性と可読性を促進し、コードの堅牢性を強化するためにコンポーネントと関数をカスタマイズするいくつかの方法を提供します。ArkTS のカスタムコンポーネントに関連するメソッドは次のとおりです。

カスタムコンポーネント: カスタムコンポーネントは非常にシンプルです。ets で記述できます。コードの一部を処理して新しい構造体コンストラクターを設定するだけです。コードを個別に抽出して新しいファイルを作成することもできます。上記の場合は次のとおりですヘッダーコンポーネントが抽出されて新しいコンポーネント Header が形成され、ヘッダーコードが最初に書き込まれた場所で Header コンポーネントを参照できます。

カスタム関数: カスタム関数は、長いコードを関数に分割し、元の場所で設定した関数を呼び出すことができます。カスタム関数は、次のようにグローバルに定義することも、コンポーネント内で定義することもできます。

コンポーネントにカスタム関数を設定したい場合は、build() 関数と同じレベルに設定して関数を削除し、関数が参照される場所を次のように指定する必要があります。

@Styles デコレータ: コンポーネントのパブリックスタイルを設定するために使用されます。これは、次のようにカスタム関数と同じ方法でグローバルまたはコンポーネント内で定義できます。

@Extend デコレータ: グローバルにのみ定義でき、コンポーネントの一意のプロパティを設定するために使用されます。使用方法は上記と同じです。

// 继承模式，只能写在全局
@Extend(Text) function priceText() {
  .fontSize(18)
  .fontColor('#F36')
}