APL Container（1.4）



APL Container

Containerコンポーネントは、複数の子項目を表示します。Containerは、レイアウト言語としてFlexbox/Yogaを使用します。

プロパティ

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

プロパティ 型／値 デフォルト スタイル設定 動的 説明  
alignItems stretch、center、start、end、baseline stretch ✕ ✕ 交差軸における子の配置です。  
direction column、row column ✕ ✕ 子コンポーネントを表示する方向です。  
justifyContent start、end、center、spaceBetween、spaceAround start ✕ ✕ 主軸上にスペースが余っているときの、そのスペースの配置方法です。デフォルトはstartです。  
numbered ブール値 false ✕ ✕ trueを指定した場合、子に番号が順番に割り当てられます。デフォルトはfalseです。  
wrap noWrap | wrap wrapReverse noWrap ✕ ✕ 子コンポーネントを複数の行にラップする方法。

標準のFlexboxコンテナとは異なり、APLContainerコンポーネントはスクロールしません。スクロールコンポーネントを作成するには、ScrollView内にContainerを配置します。

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

{
  // Container固有の値 
  "type": "Container",

  // 一般的なコンポーネントの値  
  "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単位の幅（パディングを含む）        
}

alignItems

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

direction

Containerでの配置方向です。デフォルトはcolumnです。directionプロパティは、次の値を取ることができます。

型 説明
column 子コンポーネントを垂直方向にレイアウトします（デフォルト）。
row 子コンポーネントを水平方向にレイアウトします。
columnReverse 子コンポーネントを垂直方向にレイアウトしますが、反対側から開始します。
rowReverse 子コンポーネントを水平方向にレイアウトしますが、反対側から開始します。

justifyContent

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

numbered

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

wrap

子のFlexboxラッピングの動作。wrapプロパティは、次の値を取ります。

型 説明
noWrap Containerは、主軸上の1行に子をレイアウトします。Containerはオーバーフローする可能性があります。（デフォルト）
wrap 子コンポーネントは複数の行に分割できます。
wrapReverse 子コンポーネントは複数の行に分割できますが、反対側から開始します。

多子プロパティ

Containerは多子コンポーネントです。Containerは、すべての多子プロパティを継承します。

コンテナの子コンポーネント

コンテナの子コンポーネントには、親Container内での位置を制御するための追加のプロパティがあります。

プロパティ 型 デフォルト スタイル設定 動的 説明
alignSelf auto、start、end、center、baseline、stretch auto ✕ ✕ 交差軸のレイアウト位置です。デフォルトはautoです。
bottom ディメンション none ✕ ✕ 親Containerの下端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトはautoです。
grow 数値 0 ✕ ✕ 正の数にすると、Containerに余分なスペースがある場合はこのコンポーネントは拡大します。デフォルトは0です。
left ディメンション none ✕ ✕ 親Containerの左端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトは0です。
numbering normal、skip、reset normal ✕ ✕ 次の子の順序数の付け方を指定します。デフォルトはnormalです。
position relative、absolute relative ✕ ✕ absoluteの場合、このコンポーネントは親Containerの位置だけを考慮して配置が決められます。デフォルトは「relative」です。
right ディメンション none ✕ ✕ 親Containerの右端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトはautoです。
shrink 数値 0 ✕ ✕ 正の数にすると、Containerに十分なスペースがない場合はこのコンポーネントは縮小します。デフォルトは0です。
spacing 絶対ディメンション 0 ✕ ✕ レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。デフォルトは0です。現時点では、spacingプロパティはサポートされていません。
top ディメンション none ✕ ✕ 親Containerの上端からの距離を指定します。絶対位置を指定する場合にのみ使用します。デフォルトは0です。

alignSelf

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

position, bottom, left, right, top

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

要素の大きさが固定されている絶対配置の要素では、両方に値がある場合、leftプロパティはrightプロパティをオーバーライドします。両方の値がある場合、topプロパティはbottomプロパティを上書きします。どちらのプロパティにも値がない場合、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

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

spacingプロパティは、positionがrelative（相対的）な子コンポーネントに適用されます。このプロパティは、 position が absolute（絶対的）である子コンポーネントでは無視されます。