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コンテナーとは異なり、APL Containerコンポーネントはスクロールしません。スクロールするコンポーネントを作成するには、ScrollView内にContainerを配置します。

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

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

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

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

• leftとright
• startとend

alignItems

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

direction

コンテナー内のレイアウト方向です。デフォルトはcolumnです。directionプロパティには次の値を設定できます。

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

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

justifyContent

主軸上にスペースが余っているときの、スペースの配置方法を指定するFlexboxの仕様です。このプロパティは、コンテナーが子のサイズよりも大きい場合に適用されます。デフォルトはstartです。

numbered

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

wrap

子のFlexboxラッピングの動作です。wrapプロパティには次の値を指定できます。

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

次の例は、5個の子コンポーネントを表示するContainerを示しています。各子コンポーネントは、ボックスを定義するFrameです。Containerの幅は、5個のボックスをすべて表示できるほど大きくありません。wrapプロパティがwrapに設定されているため、子コンポーネントは次の行に折り返されます。wrapをnoWrapに設定すると、子コンポーネントは1行に表示され、収まらない部分は切り詰められます。

directionプロパティをcolumnに変更すると、子コンポーネントは次の列に折り返されます。

---

複数子プロパティ

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の場合、このコンポーネントを通常のレイアウト順序から外し、親コンテナーを基準として配置します。デフォルトは「relative」です。
right	ディメンション	auto	◯	◯	右端の位置オフセットを指定します。
shrink	数値	0	◯	◯	正の数にすると、Containerに十分なスペースがない場合、このコンポーネントを縦横比を保って縮小します。デフォルトは0です。
spacing	絶対ディメンション	0	◯	◯	レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。デフォルトは0です。
start	ディメンション	none	◯	◯	開始端の位置オフセットです。開始端は、コンポーネントのlayoutDirectionに応じて、コンポーネントの左側または右側になります。
top	ディメンション	auto	◯	◯	上端の位置オフセットを指定します。

次の例は、alignSelfプロパティとpositionプロパティの効果を示しています。この例では、Container内に6個の子コンポーネントを表示します。各子コンポーネントは、Frameを使用して色付きの正方形を表示します。ContainerのalignItemsはstartに設定されているため、各項目はViewportの左側に列として表示されます。次の2つの子コンポーネントでは、独自のプロパティを使用して表示方法を変更します。

• 2番目の正方形では、alignSelfをcenterに設定してalignItemsをオーバーライドします。このため、オレンジ色の四角形はViewportの左右中央に表示されます。
• 4番目の正方形では、positionをabsoluteに設定し、rightを50に設定します。positionプロパティにより、このコンポーネントは通常のリストから削除され、Viewportの右側から50ピクセルの位置に表示されます。topのデフォルトは0であるため、正方形はViewportの最上部に表示されます。その次のコンポーネントである青い「5」の正方形は上に移動し、3番目のコンポーネントの直後に表示されます。

---

alignSelf

子のalignItemsプロパティをオーバーライドします。

position、bottom、left、right、top

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

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

絶対配置

positionがabsoluteの場合、子コンポーネントはコンテナーの通常のレイアウト順序から外され、親を基準とした絶対位置で配置されます。top、bottom、left、rightの各プロパティは、親コンテナーの端からの寸法オフセットを表します。絶対配置の子コンポーネントでは、親コンテナーのパディングは無視されます。

要素の大きさが固定されている絶対配置の要素では、topプロパティが設定されていると、bottomプロパティは設定されていてもオーバーライドされます。leftとrightの各プロパティの扱いは、親コンテナーのlayoutDirectionプロパティによって異なります。

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

次の例は、4つの位置プロパティがすべて設定されたコンポーネントを示しています。

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

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

相対配置

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

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

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

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

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

追従配置

positionがstickyの場合、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プロパティが自動である場合、追従型コンポーネントは、それぞれ右、左、上方向にのみプッシュされます。

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

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

「position: sticky」のコンテナーは、非追従型の兄弟がすべて描画された後に描画されます。

次の例は、垂直スクロール可能なコンポーネントの上端から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の場合、このコンポーネントは、親コンテナーの右上から5単位の位置に表示されます。startプロパティ（5）はrightプロパティ（10）をオーバーライドします。

grow、shrink

Flexboxのgrowプロパティとshrinkプロパティです。growを正の数にすると、コンテナーに余分なスペースがある場合、コンポーネントを縦横比を保って拡大します。shrinkを正の数にすると、コンテナーに十分なスペースがない場合、コンポーネントを通常のサイズよりも縮小します。

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

次の例は、alignSelfプロパティとpositionプロパティの効果を示しています。この例では、Container内に3つの子コンポーネントが表示されます。各子コンポーネントは、Frameを使用して色付きの正方形を表示します。最初の子コンポーネントはgrowが1に設定されています。縦長のViewportでは、赤いボックスの高さがContainerの高さに合わせて拡大されます。より小さいViewportでは、赤いボックスが縮小され、Frameに定義されたサイズに近づきます。

---

numbering

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

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

spacing

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

spacingプロパティは、positionがrelativeの子コンポーネントに適用されます。このプロパティは、positionがabsoluteの子コンポーネントでは無視されます。

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

---

---

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