複数子コンポーネントのプロパティ

複数子コンポーネントのプロパティ

複数子コンポーネントは、複数の子コンポーネントを配置して表示する抽象コンポーネントです。

複数子コンポーネント

次のコンポーネントは、複数子コンポーネントです。

プロパティ

すべての複数子コンポーネントには、次のプロパティがあります。

  • すべての基本コンポーネントのプロパティ。
  • 複数子コンポーネント固有のプロパティ。以下の表に一覧を示します。列の意味はこちらを参照してください。
プロパティ 型 デフォルト スタイル設定 動的 説明

data

配列

—

×

×

この複数子コンポーネントにバインドするデータです。

firstItem

コンポーネントとレイアウトの配列

—

×

×

ほかのすべての項目よりも前に表示するコンポーネントです。

item、items

コンポーネントとレイアウトの配列

[]

×

×

表示するコンポーネントまたはレイアウトです。

lastItem

コンポーネントとレイアウトの配列

—

×

×

ほかのすべての項目の後に含めるコンポーネントです。

onChildrenChanged

コマンドの配列

[]

×

×

コンポーネントの子が変更されたときに実行するコマンドです。

data

データの配列です。データ配列がバインドされている場合、その複数子コンポーネントはデータ配列のインフレート方法を使用します。つまり、items内のコンポーネントは、data内の値ごとに1回ずつインフレートされます。

firstItem

1つの子のみのインフレート方法を使用して複数子コンポーネントの先頭に追加する単一のコンポーネントまたはレイアウトです。

item、items

表示するコンポーネントとレイアウトの配列です。

dataプロパティに値がある場合、複数子コンポーネントはデータ配列のインフレート方法を使用します。

dataプロパティに値がない場合、複数子コンポーネントは、子コンポーネントの単純な配列のインフレート方法を使用します。

lastItem

1つの子のみのインフレート方法を使用して複数子コンポーネントの末尾に追加する単一のコンポーネントまたはレイアウトです。

onChildrenChanged

onChildrenChangedを使用するには、APL 2023.3以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。

onChildrenChangedハンドラーは、子コンポーネントがコンポーネントに挿入されたり、コンポーネントから削除されたりしたときに実行されます。

子コンポーネントのリストは、以下のいずれかによって変更される可能性があります。

子コンポーネントのプロパティを更新しても、onChildrenChangedイベントは発生しません。

生成されるイベントの形式は次のようになります。

{
    "event": {
      "source": {
        "type": COMPONENT_TYPE,
        "handler": "ChildrenChanged",
        ...                   // コンポーネントのsourceプロパティ
      },
      "changes": [            // 変更されたすべての子の配列
        {
          "index": NUMBER,    // 挿入操作における現在の項目のインデックス（削除操作では含まれません）
          "uid": STRING,
          "action": "insert|remove"
        }
        ...
      ],
      "length": NUMBER        // 変更後の子のリストの長さ
    }
}

event.sourceの詳細については、eventプロパティを参照してください。event.source.valueプロパティは、コンポーネントの値に設定されます。

onChildrenChangedハンドラーは、コンポーネントのデータバインディングコンテキストで高速モードで実行されます。また、子が変更されるごとに1回ずつ実行されます。

以下は、新しい項目がリストの先頭に追加されたときにonChildrenChangedを使用してリストの先頭までスクロールする方法の例です。

{
  "onChildrenChanged": {
    "type": "Select",
    "data": "${event.changes}",
    "commands": {
      "when": "${data.action == 'insert' && data.index < event.source.firstVisibleChild}",
      "type": "ScrollToIndex",
      "sequencer": "SCROLLER",
      "index": 0
    }
  }
}
このページは役に立ちましたか？

最終更新日: 2025 年 12 月 04 日