Container（キャラクターディスプレイ）

Container（キャラクターディスプレイ）

Containerは、レイアウト言語としてFlexbox/Yoga（https://github.com/facebook/yoga）を使用するレイアウトです。

Containerのプロパティ

プロパティ 型 デフォルト 動的 説明
alignItems stretch | center | start | end stretch × 交差軸方向の子の配置を指定します。
data 配列 <none> × このコンテナーにバインドするデータです。
direction column | row column × 子コンポーネントを配置する方向です。
firstItem コンポーネントとレイアウトの配列 <none> × ほかのすべての項目の前に含めるコンポーネントです。
items コンポーネントとレイアウトの配列 [] × データセットを配置するために使用するコンポーネントです。
justifyContent start | end | center | spaceBetween | spaceAround start × 主軸上にスペースが余っているときの、スペースの配置方法を指定します。
lastItem コンポーネントとレイアウトの配列 <none> × ほかのすべての項目の後に含めるコンポーネントです。

APL-Tのコンテナーはスクロールしません。

コンテナーがイベントのターゲットである場合（イベントの定義を参照）、event.targetに以下の値が報告されます。

"event": {
  "target": {
    "disabled": Boolean, // コンポーネントが無効の場合はtrue
    "id": ID,            // コンポーネントのID   
    "uid": UID,          // ランタイムで生成されたコンポーネントの一意のID
    "height": Number,    // コンポーネントの文字数単位の高さ（パディングを含む）
    "width": Number      // コンポーネントの文字数単位の幅（パディングを含む）
  }
}

alignItems

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

data

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

direction

コンテナー内のレイアウト方向です。デフォルトはcolumnです。

firstItem

割り当てられている場合、1つの子のみのインフレート方法を使用して、コンテナーの先頭に単一のコンポーネント／レイアウトが追加されます。

item（items）

コンテナーに表示するコンポーネントとレイアウトの配列です。dataプロパティが割り当てられている場合、コンテナーはデータ配列のインフレート方法を使用します。dataプロパティが割り当てられていない場合、コンテナーは子コンポーネントの単純な配列のインフレート方法を使用します。

lastItem

割り当てられている場合、1つの子のみのインフレート方法を使用して、コンテナーの末尾に単一のコンポーネント／レイアウトが追加されます。

justifyContent

主軸方向にスペースが余っているときに、そのスペースの配置方法を指定するFlexboxの仕様です。コンテナーのサイズがその子よりも大きい場合にのみ効果があります。

Containerの子

コンテナーの子には、その子が親コンテナー内でどのように配置されるかを制御する追加プロパティがあります。

プロパティ 型 デフォルト 動的 説明
alignSelf auto | start | end | center | baseline | stretch auto × 交差軸方向のレイアウト位置です。
bottom ディメンション <none> × 絶対位置指定でのみ使用されます。親コンテナーの下端からの距離を指定します。
grow 数値 0 × 正の数にすると、コンテナーに余分なスペースがある場合にこのコンポーネントを拡大します。
left ディメンション <none> × 絶対位置指定でのみ使用されます。親コンテナーの左端からの距離を指定します。
position relative | absolute relative × absoluteの場合、このコンポーネントは親コンテナーを基準として配置されます。
right ディメンション <none> × 絶対位置指定でのみ使用されます。親コンテナーの右端からの距離を指定します。
shrink 数値 0 × 正の数にすると、コンテナーに十分なスペースがない場合にこのコンポーネントを縮小します。
spacing 絶対ディメンション 0 × 相対位置指定でのみ使用されます。このコンポーネントと前のコンポーネントとの間に追加するスペースです。
top ディメンション <none> × 絶対位置指定でのみ使用されます。親コンテナーの上端からの距離を指定します。

alignSelf

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

position、bottom、left、right、top

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

要素のサイズが固定されている「絶対」配置の要素では、leftとrightの両方のプロパティが設定されていると、leftプロパティがrightプロパティよりも優先され、topとbottomの両方のプロパティが設定されていると、topプロパティがbottomプロパティよりも優先されます。どちらも設定されていない場合、要素は親コンテナーの左上に配置されます。たとえば、次のコンポーネントは、親コンテナーの右上から5単位離れた位置に配置されます。

{
  "position": "absolute",
  "width": 10,
  "height": 10,
  "top": 5,
  "bottom": 5,  // 「top」が設定されたため無視される
  "right": 5
}

grow

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

shrink

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

spacing

シーケンス内でこのコンポーネントと前のコンポーネントの間に追加するスペースの大きさです。シーケンスの最初の項目では無視されます。spacingは絶対ディメンションで指定する必要があります。相対ディメンションはサポートされません。spacingプロパティは、「相対」配置の要素にのみ適用されます。

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

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