APL Container



Containerは、レイアウト言語としてFlexbox/Yogaを使用するレイアウトです。

• プロパティ
  • alignItems
  • data
  • direction
  • firstItem
  • item/items
  • lastItem
  • justifyContent
  • numbered
• 子Container
  • alignSelf
  • position、bottom、left、right、top
  • grow、shrink
  • numbering
  • spacing

プロパティ

Containerコンポーネントには、コンポーネントのプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください。

標準的なFlexboxコンテナーと違い、APL Containerは、ScrollView内に配置された場合を除き、スクロールしません。

Containerコンポーネントがイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
   "target": {
     "disabled": Boolean, // コンポーネントが無効な場合はtrue
     "id": ID,            // コンポーネントのID
     "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
     "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
     "opacity": Number,   // コンポーネントの不透明度[0～1]
     "width": Number      // コンポーネントのdp単位の幅（パディングを含む）
   }
}

alignItems

子をContainerの交差軸方向に配置する方法に関するFlexboxの仕様です。デフォルトはstretchです。

data

任意のデータ配列です。データ配列がバインドされている場合、Containerはデータ配列のインフレート方法を使用します。

direction

Containerでの配置方向です。デフォルトはcolumnです。

firstItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントがContainerの先頭に追加されます。

item/items

Containerに表示するコンポーネントの配列です。

lastItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントがContainerの後に追加されます。

justifyContent

主軸上にスペースが余っているときの、そのスペースの配置方法に関するFlexboxの仕様です。Containerが子Containerよりサイズが大きいときにのみ役立ちます。デフォルトはstartです。

numbered

trueに設定した場合、Sequence内の各項目にデータバインディングの順序数が設定されます。この順序数は「1」から始まり、子のnumberingプロパティが「skip」または「reset」に設定されている場合を除き、1ずつ増加します。firstItemとlastItemに順序数は付けられないことに注意してください。デフォルトはfalseです。

子Container

子Containerには、親Containerに子を配置する方法を制御する追加プロパティがあります。子Containerでは、次のプロパティを追加で使用できます。このプロパティはContainerが子を配置するのに使用します。

alignSelf

この子のalignItemsプロパティを上書きします。

position、bottom、left、right、top

positionが「absolute」に設定されている場合、この子はContainerの標準レイアウト順から外されて、親に対して絶対的な位置に配置されます。top、bottom、left、rightのプロパティは親Containerのそれぞれの端を基準とする補正値です。

要素のサイズが固定されている「絶対」位置要素では、leftプロパティがrightプロパティを上書きし（いずれも設定されている場合）、topプロパティがbottomプロパティを上書き（いずれも設定されている場合）します。どちらも設定されていない場合、要素は親Containerの左上に配置されます。たとえば、次のコンポーネントはその親Containerの右上から5単位離れた位置に配置されます。bottomの5の設定は無視されます。

{
  "position": "absolute",
  "width": 100,
  "height": 100,
  "top": 5,
  "bottom": 5,
  "right": 5
}

grow、shrink

Flexboxのgrowとshrinkのプロパティです。growが正の値の場合、Containerに余分なスペースがあればコンポーネントを縦横比はそのままで拡大します。shrinkが正の値の場合、Containerに余分なスペースがなければコンポーネントを標準サイズ以下に縮小します。

負のgrow値およびshrink値は無視されます。

numbering

親でnumberedが設定されている場合に、順序数の値を制御します。このプロパティは、Sequenceの現在の子ではなく、次の子について順序数の値の指定方法を制御するものです。

• normal： 次の子の順序数は、現在の順序数に1を足したものになります。
• skip： 次の子の順序数は、現在の順序数と同じになります。
• reset： 次の子の順序数は1になります。

spacing

Sequence内でこのコンポーネントと前のコンポーネントの間に追加するスペースの大きさです。Sequenceの最初の項目では無視されます。すべてのスペースは絶対値のディメンションで指定する必要があります。相対ディメンションはサポートされていません。