APL Container

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

プロパティ

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

• すべての複数子コンポーネントのプロパティ
• すべての基本コンポーネントのプロパティ
• 次の表は、Containerプロパティの一覧です。列の意味はこちらを参照してください。

プロパティ	型	デフォルト	スタイル設定	動的	説明
alignItems	次のいずれか：stretch、center、start、end、baseline	stretch	◯	◯	交差軸における子の配置です。
direction	次のいずれか：column、row、columnReverse、rowReverse	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に以下の値が報告されます。

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

コンポーネントのlayoutDirectionプロパティは、Containerの子コンポーネントをレイアウトする方向を決定します。APL Containerは、Yoga layoutDirectionプロパティと同じルールに従います。

コンポーネントのlayoutDirectionプロパティは、Containerの子の位置を制御する次のプロパティのオーバーライド動作を決定します。

• leftとright
• startとend

alignItems

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

direction

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

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

layoutDirectionプロパティは、directionがrowの場合に項目の水平方向を決定します。たとえば、layoutDirectionがRTLで、directionがrowの場合、子項目は右から開始され、左へと表示されます。

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の子コンポーネントのプロパティ

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

プロパティ	型	デフォルト	スタイル設定	動的	説明
alignSelf	auto、start、end、center、baseline、stretch	auto	◯	◯	交差軸のレイアウト位置です。デフォルトはautoです。
bottom	ディメンション	auto	◯	◯	下端の位置オフセットを指定します。
end	ディメンション	none	◯	◯	終端の位置オフセットです。終端は、コンポーネントのlayoutDirectionに応じて、コンポーネントの左側または右側になります。
grow	数値	0	◯	◯	正の数にすると、Containerに余分なスペースがある場合、このコンポーネントを縦横比を保って拡大します。デフォルトは0です。
left	ディメンション	auto	◯	◯	左端の位置オフセットを指定します。
numbering	normal、skip、reset	normal	✕	✕	次の子の順序数の付け方を指定します。デフォルトはnormalです。
position	relative、absolute、sticky	relative	◯	◯	子コンポーネントの位置を調整します。absoluteの場合、このコンポーネントを通常のレイアウト順序から取り出し、親Containerを基準に配置します。デフォルトは「relative」です。
right	ディメンション	auto	◯	◯	右端の位置オフセットを指定します。
shrink	数値	0	◯	◯	正の数にすると、Containerに十分なスペースがない場合、このコンポーネントを縦横比を保って縮小します。デフォルトは0です。
spacing	絶対ディメンション	0	◯	◯	レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。デフォルトは0です。
start	ディメンション	none	◯	◯	開始端の位置オフセット。開始端は、コンポーネントのlayoutDirectionに応じて、コンポーネントの左側または右側になります。
top	ディメンション	auto	◯	◯	上端の位置オフセットを指定します。

alignSelf

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

position, bottom, left, right, top

positionプロパティは、bottom、left、right、topの各プロパティが子コンポーネントの位置を「標準」位置から調整する方法を決定します。

startプロパティとendプロパティは、「Container」のlayoutDirectionプロパティに基づいてleftとrightもオーバーライドします。

絶対配置

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

要素の大きさが固定されている絶対配置の要素では、両方が設定されている場合、topプロパティはbottomプロパティをオーバーライドします。leftプロパティとrightプロパティは、親ContainerのlayoutDirectionプロパティによって異なります。

• 親ContainerのlayoutDirectionが「LTR」に設定されている場合 - leftが設定されている場合、rightプロパティは無視されます。どちらのpositionプロパティも設定されていない場合、要素は親Containerの左上に配置されます。
• 親ContainerのlayoutDirectionが「RTL」に設定されている場合 - rightが設定されている場合、leftプロパティは無視されます。どちらのpositionプロパティも設定されていない場合、要素は親Containerの右上に配置されます。

次の例は、4つすべてのpositionプロパティを設定するコンポーネントを示しています。

ContainerのlayoutDirectionがLTRの場合、このコンポーネントは、親Containerの左上から5単位の位置に配置されます。topとleftが設定されているため、bottomとrightの値は無視されます。

このContainerのlayoutDirectionがRTLの場合、このコンポーネントは、親Containerの右上から5単位の位置に配置されます。topとrightが設定されているため、bottomとleftの値は無視されます。

相対配置

positionがrelativeの場合、bottom、left、right、topの各プロパティは、Container内のほかのコンポーネントを基準とした、子の「通常の」位置からの寸法オフセットです。topに値がある場合、bottomプロパティは無視されます。leftプロパティとrightプロパティは、親ContainerのlayoutDirectionプロパティによって異なります。

• 親ContainerのlayoutDirectionが「LTR」に設定されている場合 - leftが設定されている場合、rightプロパティは無視されます。
• 親ContainerのlayoutDirectionが「RTL」に設定されている場合 - rightが設定されている場合、leftプロパティは無視されます。

次の例は、top、bottom、rightを設定するコンポーネントを示しています。

ContainerのlayoutDirectionがLTRの場合、このコンポーネントは、ほかの子コンポーネントを基準にした通常の位置から5単位下、5単位左に配置されます。bottomプロパティとrightプロパティは無視されます。

ContainerのlayoutDirectionがRTLの場合、このコンポーネントは、ほかの子コンポーネントを基準にした通常の位置から5単位下、5単位右に表示されます。bottomプロパティとleftプロパティは無視されます。

追従配置

positionがrelativeの場合、bottom、left、right、topの各プロパティは、最も近いスクロール可能な祖先コンポーネントを基準に計算された寸法オフセットです。この場合、祖先コンポーネントに「追従」してコンポーネントが配置されます。

追従型コンポーネントの場合、topプロパティとbottomプロパティは、最も近い垂直スクロール可能なコンポーネントのそれぞれの端からのインセットを表します。leftプロパティとrightプロパティは、最も近い水平スクロール可能なコンポーネントの端からのインセットを表します。これらのプロパティは、コンポーネントの位置を拘束するために使用される「追従ビュー」の矩形を定義します。

任意の軸の追従ビューの矩形サイズが、その軸の追従型コンポーネントのデフォルト境界のサイズよりも小さい場合、影響を受ける軸の有効な終端のインセットが縮小され（おそらく負になる）、追従ビューの矩形のサイズがその軸のデフォルトの境界のサイズに達します。

次に例を示します。

最も近い垂直スクロール可能な項目の高さが300pxであり、追従型コンポーネントのデフォルトの境界の高さが200pxであると仮定します。topプロパティは20ピクセルです。これは、最も近い祖先の上端インセットが20pxであり、下端インセットが0pxであることを意味します。したがって、追従ビューの矩形の高さは280pxになります。

しかし、最も近い垂直スクロール可能な項目の高さが100pxである場合、有効な下端インセットは-120pxになります。これにより、追従ビューの矩形の高さは200pxになります。

コンポーネントの各辺について、対応するインセットプロパティが自動ではなく、コンポーネントの対応する境界のエッジが追従ビューの矩形の対応するエッジの外側にある場合、コンポーネントは（相対配置のように）視覚的にシフトされる必要があり、その位置コンポーネントがその包含ブロック内に含まれる間は、可能な限り、追従ビューの矩形のエッジの内側にする必要があります。追従型コンポーネントをオフセットすると、その親の境界外に配置される場合、オフセットは減少し、追従型コンポーネントは親の境界内に保持されます。

追従配置された要素のtop値が自動ではなく、bottom値が自動である場合、追従配置により下方向にのみプッシュされます。上方向にオフセットされることはありません。同様に、left、right、またはbottomプロパティが自動ではなく、対応するright、left、またはtopプロパティが自動である場合、追従型コンポーネントは、それぞれ右、左、または上方向にのみプッシュされます。

同じContainer内にある複数の追従配置コンポーネントは、独立してオフセットされるため、重なり合う可能性があります。

topプロパティまたはbottomプロパティの値がパーセンテージの場合、最も近い垂直スクロール可能な祖先のパーセンテージです。rightプロパティまたはleftプロパティの場合は、最も近い水平スクロール可能な祖先のパーセンテージです。

「position: sticky」であるContainerは、追従型ではない兄弟の後に描画されます。

次の例は、垂直スクロール可能なコンポーネントの上端から10単位下にあるコンポーネントを示しています。対応するright、bottom、またはleftプロパティが設定されていないため、ほかのどのエッジにも追従しません。

次の例では、最も近い水平スクロール可能な祖先の左側と右側の両方に追従するコンポーネントを定義します。このコンポーネントは、スクロール可能な祖先の左端に達すると、スクロール可能なコンポーネントの左端から右に10単位の位置に追従します。その結果、コンポーネントの左側10単位がビューから非表示になります。スクロール可能な祖先が左にスクロールされている場合、このコンポーネントは、スクロール可能なコンポーネントの右端から少なくとも20単位の位置に留まります。

追従型コンポーネントの親のデフォルトの境界を使用して、追従型コンポーネントのオフセットを制限できます。

下の画像は、スクロール可能なコンポーネント内の2つのコンポーネント（赤）と親（青）を示しています。2つのコンポーネントのpositionはそれぞれstickyとleftに設定され、その値はそれぞれ0pxと20pxに設定されています。

start、end

startプロパティとendプロパティを指定すると、コンポーネントの位置を指定するためのleftとrightをオーバーライドされます。オーバーライドはlayoutDirectionプロパティに依存します。

プロパティ	左から右（"LTR"）	右から左（"RTL"）
start	leftをオーバーライド	rightをオーバーライド
end	rightをオーバーライド	leftをオーバーライド

次の例は、絶対配置のコンポーネントを示しています。このContainerのlayoutDirectionがRTLの場合、このコンポーネントは、親Containerの右上から5単位の位置に表示されます。startプロパティ（5）はrightプロパティ（10）をオーバーライドします。

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（絶対的）である子コンポーネントでは無視されます。

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