Compose では、複数の修飾子を連結して、外観と より細かく調整できます。これらの修飾子チェーンは、渡される制約に影響を与える可能性があります。 コンポーザブルに対して、幅と高さの境界を定義します。
このページでは、連結された修飾子が制約にどのように影響し、ひいては コンポーズ可能な関数の測定と配置です
UI ツリー内の修飾子
修飾子が相互にどのように影響するかを理解するには、コンポーズ フェーズ中に生成される UI ツリーにどのように表示されるかを確認すると役に立ちます。詳細については、構成のセクションをご覧ください。
UI ツリーでは、修飾子をレイアウト ノードのラッパー ノードとして可視化できます。

コンポーザブルに複数の修飾子を追加すると、修飾子のチェーンが作成されます。日時
複数の修飾子を連鎖させると、それぞれの修飾子ノードが連鎖の残りを包みます
その中のレイアウト ノードです。たとえば、clip
と
size
修飾子の場合、clip
修飾子ノードは size
修飾子ノードをラップします。
次に、Image
レイアウト ノードをラップします。
レイアウト フェーズでは、ツリーをたどるアルゴリズムは変わりませんが、 各修飾子ノードも訪問されますこれにより、修飾子は、ラップする修飾子またはレイアウトノードのサイズ要件と配置を変更できます。
図 2 に示すように、Image
コンポーザブルと Text
コンポーザブルの実装
それ自体は、単一のレイアウト ノードをラップする修飾子のチェーンで構成されています。「
Row
と Column
の実装は、単にレイアウト ノードで、
子をレイアウトします

まとめ
- 修飾子は、単一の修飾子またはレイアウト ノードをラップします。
- レイアウトノードは、複数の子ノードをレイアウトできます。
以降のセクションでは、このメンタルモデルを使用して修飾子の連鎖と、それがコンポーザブルのサイズに及ぼす影響について説明します。
レイアウト フェーズでの制約
レイアウト フェーズでは、3 段階のアルゴリズムを使用して、各レイアウト ノードの幅、高さ、x、y 座標を特定します。
- 子を測定: ノードは子(存在する場合)を測定します。
- 独自のサイズを決定する: これらの測定値に基づいて、ノードは独自にサイズを決定する 指定します。
- 子ノードを配置する: 各子ノードは、ノード自身の位置を基準として配置されます。
Constraints
は、アルゴリズムの最初の 2 つのステップでノードに適したサイズを見つけるのに役立ちます。制約は、1 つのタスクに
指定します。ノードがサイズを決定すると、その測定されたサイズは
このサイズ範囲内にする必要があります
制約の種類
制約は次のいずれかです。
- 制限付き: ノードには最大と最小の幅と高さがあります。

- 無制限: ノードにサイズの制約はありません。最大の幅と 高さの境界が無限大に設定されています。

- Exact: ノードに正確なサイズ要件が求められます。最小値と最大値は同じ値に設定されます。

- 組み合わせ: ノードは、上記の制約タイプの組み合わせに従います。たとえば、制約で幅を制限すると同時に、 高さの上限なしを指定します。または、正確な幅のみを設定して高さを指定します。

次のセクションでは、これらの制約が親から子に渡される方法について説明します。
制約が親から子に渡される仕組み
レイアウトの制約 フェーズでは、制約は親から子に受け渡されます 表示されます。
親ノードがその子ノードを測定するとき、これらの制約が各ノードに 子供が許容できる大きさと小ささを教えます。その後、 独自のサイズを決定するため、渡された制約にも準拠します。 あります。
アルゴリズムの概要は次のとおりです。
- 実際に占有するサイズを決定するために、UI ツリーのルートノードは子を測定し、同じ制約を最初の子に転送します。
- 子が測定に影響しない修飾子の場合は、制約を次の修飾子に転送します。測定に影響するモディファイアに到達しない限り、制約はそのままモディファイア チェーンに渡されます。制約は、それに応じてサイズが変更されます。
- 子を持たないノード(「リーフ」と呼ばれます)に 渡された制約に基づいてサイズを決定し、 この解決済みサイズを親に返します。
- 親は、この子の測定値に基づいて制約を調整します。 次の子を呼び出します。
- 親の子がすべて測定されると、親ノードはその子ノードを そのサイズを自身の親に伝えます。
- このようにして、ツリー全体が深さ優先で走査されます。最終的には、すべてのノードが サイズを決定し、測定ステップは完了です。
詳細な例については、制約と修飾子の順序の動画をご覧ください。
制約に影響する修飾子
前のセクションでは、一部の修飾子が制約サイズに影響する可能性があることを学びました。以降のセクションでは、影響を受ける修飾子について説明します。 必要があります。
size
修飾子
size
修飾子は、コンテンツの推奨サイズを宣言します。
たとえば、次の UI ツリーは 300dp
のコンテナでレンダリングする必要があります。
作成者: 200dp
。制約は制限ありで、幅は 100dp
から
300dp
、高さ 100dp
~200dp
:

size
修飾子は、渡された値と一致するように受信制約を調整します。
この例では、値は 150dp
です。

150dp
に調整する size
修飾子。幅と高さが最小の制約境界よりも小さい場合、または より大きい場合、修飾子は渡された 可能な限り厳密に制約を守りながら、 場所:

size
修飾子
必要があります複数の size
修飾子のチェーン化は機能しません。最初の size
修飾子は、最小制約と最大制約の両方を固定値に設定します。2 番目のサイズ修飾子が小さいサイズまたは大きいサイズをリクエストした場合でも、渡された正確な境界に従う必要があるため、これらの値はオーバーライドされません。

size
修飾子のチェーン(2 番目の値が渡されたもの)
内の(50dp
)は最初の値(100dp
)をオーバーライドしません。requiredSize
修飾子
必要な場合は、size
の代わりに requiredSize
修飾子を使用します。
受信制約をオーバーライドします。requiredSize
修飾子は、
指定されたサイズを正確な境界として渡します。
サイズがツリーの上方に渡されると、子ノードは 空き容量:

requiredSize
修飾子が、size
修飾子からの制約をオーバーライドしている。width
修飾子と height
修飾子
size
修飾子は、制約の幅と高さの両方を調整します。あり
width
修飾子を使用すると、幅を固定して高さは未定のままにできます。
同様に、height
修飾子では、高さを固定できますが、
幅未定:

width
修飾子と height
修飾子
sizeIn
修飾子
sizeIn
修飾子を使用すると、正確な最小制約と最大制約を設定できます
指定します。きめ細かい制御が必要な場合は sizeIn
修飾子を使用する
完全に制御できます。

sizeIn
修飾子(minWidth
、maxWidth
、minHeight
、
maxHeight
セットしました。例
このセクションでは、いくつかのコード スニペットの出力とその説明を 連鎖修飾子。
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
このスニペットは、次の出力を生成します。
fillMaxSize
修飾子は、制約を変更して、両方の制約を 最小の幅と高さから最大値(幅は300dp
、200dp
) あります。size
修飾子で50dp
のサイズを使用する場合でも、受信した最小制約に準拠する必要があります。したがって、size
修飾子は また、300
の制約境界を200
によって正確に出力します。size
修飾子で指定された値は無視されます。Image
はこれらの境界に従い、300
×200
のサイズを報告します。このサイズはツリー全体に渡されます。
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
このスニペットは、次の出力を生成します。
fillMaxSize
修飾子は、制約を適応させて、最小幅と最小高さの両方を最大値(幅は300dp
、高さは200dp
)に設定します。wrapContentSize
修飾子は、最小制約をリセットします。このようにfillMaxSize
により固定された制約が得られ、wrapContentSize
によって制約が元に戻されました おすすめします。次のノードは、スペース全体を占有することも、スペース全体よりも小さくすることもできます。size
修飾子は、制約を次の範囲の最小値と最大値に設定します。50
。Image
は50
×50
のサイズに解決され、size
修飾子はそれを転送します。wrapContentSize
修飾子には特別なプロパティがあります。子要素を取得し、渡された使用可能な最小境界の中央に配置します。したがって、親に通知するサイズは、渡された最小境界と同じになります。
3 つの修飾子を組み合わせるだけで、コンポーザブルのサイズを定義し、親内に中央揃えにできます。
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
このスニペットは、次の出力を生成します。
clip
修飾子は制約を変更しません。padding
修飾子は最大制約を下げます。size
修飾子は、すべての制約を100dp
に設定します。Image
はこれらの制約を遵守し、次の割合で100
のサイズをレポートします。100dp
。padding
修飾子はすべてのサイズに10dp
を追加するため、報告される幅と高さが20dp
増加します。- 描画フェーズでは、
clip
修飾子が120
のキャンバスに対して120dp
。そのため、そのサイズの円マスクが作成されます。 padding
修飾子は、すべてのサイズでコンテンツを10dp
分インセットするため、キャンバスのサイズは100dp
分小さくなり100
になります。Image
がそのキャンバスに描画されます。画像は120dp
の元の円に基づいてクリップされるため、出力は丸い結果ではありません。