APL FlexSequence

Note: Sign in to the developer console to build or publish your skill.

APL FlexSequence

FlexSequenceは、ContainerのプロパティのサブセットをSequenceの機能と組み合わせたコンポーネントです。

FlexSequenceは、データセットを使用して一連のコンポーネントの繰り返しをインフレートし、交差軸に沿ってスクロールするリストとして表示します。子コンポーネントは不均一にすることができ、リストではデフォルトで子項目が折り返されます。このコンポーネントは、スクロールビューに一連のコンポーネントを繰り返し表示し、データセットをインフレートします。

FlexSequenceと、項目のリストを表示できる類似コンポーネントとの違いは次のとおりです。

Container - FlexSequenceの方が長いリストでのパフォーマンスに優れていますが、レイアウトモデルの柔軟性に欠けています。FlexSequenceはContainerと異なり、絶対配置をサポートしていません。
Sequence - Sequenceは、単一の子「チェーン」を交差軸に沿って表示するように設計されています。FlexSequenceは、デフォルトで子コンポーネントを折り返します。
GridSequence - GridSequenceは、行と列のサイズが固定された子コンポーネントのグリッドを指定します。FlexSequenceでは、任意のサイズの子項目を使用できます。

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

プロパティ

FlexSequenceコンポーネントには、次のプロパティがあります。

プロパティ	型	デフォルト	スタイル設定	動的	説明
`alignItems`	次のいずれか：`center`、`start`、`end`	`start`	◯	◯	交差軸方向の子の配置を指定します。
`numbered`	ブール値	`false`	×	×	`true`の場合、データバインディングコンテキストで`FlexSequence`の子に序数を割り当てます。
`onScroll`	コマンドの配列	`[]`	×	×	スクロール時に実行するコマンドです。
`preserve`	文字列の配列	`[]`	×	×	`Reinflate`コマンドでドキュメントを再インフレートするときに保存するプロパティです。
`scrollDirection`	次のいずれか：`horizontal`、`vertical`	`vertical`	×	×	この`FlexSequence`のスクロール方向です。
`snap`	次のいずれか：`none`、`start`、`center`、`end`、`forceStart`、`forceCenter`、`forceEnd`	`none`	◯	×	スクロールの停止時に子コンポーネントをスナップする位置を指定します。

heightおよびwidthコンポーネントプロパティ

表示エラーを最小限に抑えるために、垂直方向のFlexSequenceのheightと水平方向のFlexSequenceのwidthは、指定されていない場合またはautoに指定されている場合は100dpに初期化されます。

layoutDirectionコンポーネントプロパティ

FlexSequenceのlayoutDirectionプロパティは、sequence_scroll_direction_propertyがhorizontalの場合に子コンポーネントをレイアウトする方向を決定します。

LTR：シーケンスは子を左側から配置し、右側にスクロールします。
RTL：シーケンスは子を右側から配置し、左側にスクロールします。

alignItems

子コンポーネントを交差軸方向に配置する方法を指定するFlexboxの仕様です。

numbered

trueの場合、FlexSequence内の各項目にデータバインディングの順序数が設定されます。この順序数は「1」から始まり、子コンポーネントのnumberingプロパティがskipまたはresetの場合を除き、1ずつ増加します。firstItemとlastItemは順序付けに含められません。

numberedプロパティは、画面上に自動的に数字を表示するものではありません。データバインディングコンテキストでordinal値を使用すると、Textコンポーネントに数字を表示できます。

onScroll

スクロール中に実行するコマンドです。ランタイムは、スクロール中にフレームを描画するたびにこれらのコマンドの実行を1回試行しますが、正常に実行されるとは限りません。デバイスの処理速度が遅い場合、onScrollコマンドの実行は途切れ途切れになることがあります。

コマンドで報告されるevent.source.positionは、現在のスクロール位置をシーケンスの幅または高さに対する割合で表します。たとえば、FlexSequenceの幅が200ピクセルであり、コンテンツを左方向に520ピクセル分移動した場合、event.source.positionの値は2.60になります。

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

"event": {
  "source": {
    "type": "FlexSequence",
    "handler": "Scroll",
    ...                     // コンポーネントのソースのプロパティ
  }
}

event.sourceの詳細については、eventプロパティを参照してください。

onScrollイベントハンドラーは、コンポーネントのデータバインディングコンテキストで高速モードで実行されます。

preserve

Reinflateコマンドでドキュメントを再インフレートするときに保存する、動的なコンポーネントプロパティとバインドされたプロパティの配列です。

FlexSequenceコンポーネントには、preserve配列に割り当てることができる以下の追加の名前付きプロパティがあります。

centerId - シーケンスの中央にある子のIDです。
centerIndex - シーケンスの中央にある子のインデックスです。
firstId - シーケンスの先頭にある子のIDです。
firstIndex - シーケンスの先頭にある子のインデックスです。
scrollOffset - 絶対スクロール位置（dp単位）です。
scrollPercent - 相対スクロール位置（可視領域のパーセンテージ）です。

firstIndexオプションは、現在シーケンスの先頭に表示されている子のインデックスを使用し、（再インフレート後に）同じ子（インデックスで識別）がシーケンスの先頭に配置されるようにスクロール位置を設定します。firstIdは、現在シーケンスの先頭に表示されている子のidを使用し、（再インフレート後に）同じ子（idで識別）がシーケンスの先頭に配置されるようにスクロール位置を設定します。

centerIndexオプションは、現在シーケンスの中央に表示されている子のインデックスを使用し、（再インフレート後に）同じ子（インデックスで識別）がシーケンスの中央に配置されるようにスクロール位置を設定します。centerIdは、現在シーケンスの中央に表示されている子のidを使用し、（再インフレート後に）同じ子（idで識別）がシーケンスの中央に配置されるようにスクロール位置を設定します。

idで検索する場合（centerIdとfirstIdの両方）、再インフレートの前または後にidが見つからなければ、シーケンスは先頭から表示されます。コンポーネントをindexで検索する場合（centerIndexとfirstIndexの両方）、そのインデックスに子が存在しなければ、シーケンスは先頭から表示されます。

scrollDirection

scrollDirectionには、verticalまたはhorizontalを指定します。

snap

スクロールの停止時に子コンポーネントをスナップする位置を指定します。ユーザーがコンテンツをスクロールしてスクロールを停止したときに、FlexSequenceは子項目の位置を調整して、FlexSequenceコンテナーの先頭、中央、末尾に「スナップ」することができます。FlexSequenceは、スナップ位置に最も近い子項目の位置を調整します。たとえば、snapがcenterの場合、FlexSequenceは、中央に最も近い項目がコンテナーの中央にスナップするように各項目を移動させます。

FlexSequenceは、次の2種類のスナップ動作をサポートします。

スクロールに速度がついているときにスナップする - ユーザーがコンテンツをスクロールした後でポインターを放し、シーケンスが停止するまで速度が落ちるに任せると、FlexSequenceは、リクエストされた位置またはシーケンスの先頭か末尾に子コンポーネントを揃えます。ユーザーがポインターを放したときにスクロール速度がほとんど落ちているか停止していると、スナップは発生しません。この種類のスナップを有効にするには、snapをstart、center、endのいずれかに設定します。
常にスナップする（スナップの強制）- ユーザーがポインターを放した後、FlexSequenceは常に、リクエストされた位置またはFlexSequenceの先頭か末尾に子コンポーネントを揃えます。スナップの強制の動作では、スクロール速度は関係ありません。この種類のスナップを有効にするには、snapをforceStart、forceCenter、forceEndのいずれかに設定します。

スナップでFlexSequenceコンテナーの先頭、中央、末尾を特定するときには、paddingはすべて除外されます。

snapプロパティには次の値を設定できます。

none -（デフォルト）スナップは行われません。
start - スクロールに速度がついているときに、子コンポーネントの先頭側をコンテナーの先頭に揃えます。
center - スクロールに速度がついているときに、子コンポーネントの中央をコンテナーの中央に揃えます。
end - スクロールに速度がついているときに、子コンポーネントの末尾側をコンテナーの末尾に揃えます。
forceStart - スクロール速度にかかわらず、子コンポーネントの先頭側をコンテナーの先頭に揃えます。
forceCenter - スクロール速度にかかわらず、子コンポーネントの中央をコンテナーの中央に揃えます。
forceEnd - スクロール速度にかかわらず、子コンポーネントの末尾側をコンテナーの末尾に揃えます。

snapプロパティは、ユーザーがコンテンツをスクロールしたときに適用されます。スクロールコマンドには適用されません。コマンドによるスクロール時に項目を揃えるには、ScrollToComponentコマンドまたはScrollToIndexコマンドを使用し、コマンドのalignプロパティを設定します。

複数子プロパティ

FlexSequenceは複数子コンポーネントです。FlexSequenceは、すべての複数子プロパティを継承します。詳細については複数子コンポーネントを参照してください。

アクション可能なプロパティ

FlexSequenceはアクション可能なコンポーネントです。FlexSequenceは、すべてのアクション可能なプロパティを継承します。詳細については、アクション可能なコンポーネントを参照してください。

FlexSequenceの子項目のプロパティ

FlexSequenceの子コンポーネントでは、FlexSequence内での項目の配置方法を制御する追加のプロパティがサポートされます。

プロパティ	型	デフォルト	スタイル設定	動的	説明
`grow`	数値	0	◯	◯	正の数にすると、余分なスペースがある場合にこのコンポーネントを拡大します。
`numbering`	次のいずれか：`normal`、`skip`、`reset`	`normal`	×	×	次の子の順序数の設定方法を制御します。
`shrink`	数値	0	◯	◯	正の数にすると、十分なスペースがない場合にこのコンポーネントを縮小します。
`spacing`	絶対ディメンション	0	◯	◯	レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。

grow

Flexboxのgrowプロパティです。growを正の値にすると、親FlexSequenceに余分なスペースがある場合に、コンポーネントを縦横比を保って拡大します。growが負の値の場合は無視されます。

shrink

Flexboxのshrinkプロパティです。

shrinkを正の値にすると、親FlexSequenceに十分なスペースがない場合に、コンポーネントを通常のサイズよりも縮小します。shrinkが負の値の場合は無視されます。

numbering

FlexSequenceのnumberedプロパティがtrueの場合に、ordinalの値を制御します。このプロパティは、シーケンス内の現在の子ではなく、次の子に対する順序数の値を更新する方法を制御します。

normal: 次の子のordinalは、ordinal＋1になります。
skip：次の子のordinalは、ordinalと同じになります。
reset：次の子のordinalは1になります。

spacing

シーケンス内でこのコンポーネントと前のコンポーネントの間に追加するスペースの大きさです。シーケンスの最初の項目では無視されます。絶対ディメンションで指定します。spacingプロパティでは、相対ディメンションはサポートされません。

FlexSequenceイベントオブジェクト

FlexSequenceがイベントのソースまたはターゲットである場合は、次の値がevent.sourceまたはevent.targetに報告されます。

{
  // コンポーネント固有の値
  "type": "FlexSequence",
  "position": Number,        // コンポーネントのスクロール位置（パーセンテージ）
  "allowForward": Boolean,   // trueの場合、前方にスクロールできる余地がある
  "allowBackwards": Boolean, // trueの場合、後方にスクロールできる余地がある

  // 表示されている子
  "firstVisibleChild": Integer,       // 表示されている最初の子のインデックス
  "firstFullyVisibleChild": Integer,  // 完全に表示されている最初の子のインデックス
  "lastFullyVisibleChild": Integer,   // 完全に表示されている最後の子のインデックス
  "lastVisibleChild": Integer,        // 表示されている最後の子のインデックス

  // 一般的なコンポーネントの値
  "bind": Map,         // コンポーネントのデータバインディングコンテキストへのアクセス
  "checked": Boolean,  // チェックの状態
  "disabled": Boolean, // 無効化の状態
  "focused": Boolean,  // フォーカスの状態
  "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
  "id": ID,            // コンポーネントのID
  "opacity": Number,   // コンポーネントの不透明度 [0～1]
  "pressed": Boolean,  // 押下の状態
  "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
  "width": Number      // コンポーネントのdp単位の幅（パディングを含む）
}

FlexSequenceのレイアウトの例

以下は、高さと幅が異なる子項目を含む垂直方向のFlexSequenceの例です。

{
  "type": "FlexSequence",
    "width": 500,
    "scrollDirection": "vertical",
    "data": [
      { "W": 200, "H": 100 },
      { "W": 300, "H": 100 },
      { "W": 500, "H": 150 },
      { "W": 200, "H": 100 },
      { "W": 300, "H": 100 },
      { "W": 500, "H": 150 },
      { "W": 200, "H": 100 },
    ...
    ],
    "items": [
      {
        "type": "Frame",
        "height": "${data.H}",
        "width": "${data.W}",
      ...
      }
    ]
  }

不均一な子項目を持つFlexSequenceがどのようにレンダリングされるかの例

以下は、この例のAPLドキュメント全体を示しています。このコードでは、背景色を使用して子項目を区別しています。

APLドキュメント

クリップボードにコピーされました。

{
  "type": "APL",
  "version": "2024.3",
  "theme": "dark",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "FlexSequence",
        "height": "100%",
        "width": 500,
        "bind": [
          {
            "name": "Colors",
            "value": ["red", "orange", "yellow", "green", "blue", "navy", "violet"]
          }
        ],
        "data": [
          {"W": 200, "H": 100},
          {"W": 300, "H": 100}, 
          {"W": 500, "H": 150}, 
          {"W": 200, "H": 100}, 
          {"W": 300, "H": 100}, 
          {"W": 500, "H": 150}, 
          {"W": 200, "H": 100}
        ],
        "items": [
          {
            "type": "Frame",
            "height": "${data.H}",
            "width": "${data.W}",
            "background": "${Colors[index]}",
            "item": [
              {
                "type": "Text",
                "height": "100%",
                "width": "100%",
                "text": "${index}",
                "textAlign": "center",
                "textAlignVertical": "center"
              }
            ]
          }
        ]
      }
    ]
  }
}

このページは役に立ちましたか？

フィードバックを送信

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

APL FlexSequence

プロパティ

heightおよびwidthコンポーネントプロパティ

layoutDirectionコンポーネントプロパティ

alignItems

numbered

onScroll

preserve

scrollDirection

snap

複数子プロパティ

アクション可能なプロパティ

FlexSequenceの子項目のプロパティ

grow

shrink

numbering

spacing

FlexSequenceイベントオブジェクト

FlexSequenceのレイアウトの例

関連トピック