制約と修飾子の順序

Compose では、複数の修飾子を連結して、外観と より細かく調整できます。これらの修飾子チェーンは、渡される制約に影響を与える可能性があります。 コンポーザブルに対して、幅と高さの境界を定義します。

このページでは、連結された修飾子が制約にどのように影響し、ひいては コンポーズ可能な関数の測定と配置です

UI ツリーの修飾子

修飾子が互いにどのように影響し合うかを理解するには、 コンポジション フェーズで生成される UI ツリーに表示されます。対象 詳しくは、コンポジションのセクションをご覧ください。

UI ツリーでは、修飾子をレイアウトのラッパーノードとして可視化できます。 ノード:

図 1. UI ツリー内のレイアウト ノードをラップする修飾子

コンポーザブルに複数の修飾子を追加すると、修飾子のチェーンが作成されます。日時 複数の修飾子を連鎖させると、それぞれの修飾子ノードが連鎖の残りを包みます その中のレイアウト ノードです。たとえば、clip と size 修飾子の場合、clip 修飾子ノードは size 修飾子ノードをラップします。 次に、Image レイアウト ノードをラップします。

レイアウト フェーズでは、ツリーをたどるアルゴリズムは変わりませんが、 各修飾子ノードも訪問されますこれにより、修飾子によってサイズを ラップする修飾子またはレイアウト ノードの配置。

図 2 に示すように、Image コンポーザブルと Text コンポーザブルの実装 それ自体は、単一のレイアウト ノードをラップする修飾子のチェーンで構成されています。「 Row と Column の実装は、単にレイアウト ノードで、 子をレイアウトします

図 2. 図 1 と同じツリー構造ですが、 修飾子のチェーンとして可視化された UI ツリー

まとめ

• 修飾子は、単一の修飾子またはレイアウト ノードをラップします。
• レイアウト ノードは複数の子ノードを配置できます。

以降のセクションでは、このメンタルモデルを使用して、 修飾子の連鎖とコンポーザブルのサイズへの影響

レイアウト フェーズの制約

レイアウト フェーズ: 3 ステップのアルゴリズムに従って各レイアウトを検出します。 ノードの幅、高さ、および x、y 座標:

1. 子を測定: ノードは子（存在する場合）を測定します。
2. 独自のサイズを決定する: これらの測定値に基づいて、ノードは独自にサイズを決定する 指定します。
3. 子ノードを配置する: 各子ノードは、そのノードの相対位置に配置される なります。

Constraints は、最初の 2 つの期間中にノードに適したサイズを見つけるのに役立ちます。 表示されます。制約は、特定のタスクにおいて 指定します。ノードがサイズを決定すると、その測定されたサイズは このサイズ範囲内にする必要があります

制約のタイプ

制約は次のいずれかです。

• 制限付き: ノードには最大および最小の幅と高さがあります。

図 3. 制限付き制約。

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

<ph type="x-smartling-placeholder">

</ph>

図 4.制限なしの制約。

• 完全一致: ノードは正確なサイズ要件に従うように求められます。最小 最大値が同じ値に設定されます

<ph type="x-smartling-placeholder">

</ph>

図 5.正確な制約。

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

<ph type="x-smartling-placeholder">

</ph>

図 6.制限付き制約と制限なし制約の組み合わせ、正確な幅 あります。

次のセクションでは、これらの制約が親から 表示されます。

親から子に制約を渡す方法

レイアウトの制約 適用され、制約は親から子に受け渡されます。 UI ツリー内に表示されます。

親ノードがその子ノードを測定するとき、これらの制約が各ノードに 子供が許容できる大きさと小ささを教えます。その後、 独自のサイズを決定するため、渡された制約も遵守します。 あります。

アルゴリズムの仕組みの概要は次のとおりです。

1. 実際に占有するサイズを決定するには、UI ツリーのルートノードで は子を測定し、同じ制約を最初の子に転送します。
2. 子が測定に影響しない修飾子の場合は、 適用できます。制約は修飾子に渡され、 測定に影響する修飾子に到達するまでは、そのままのチェーンが保持されます。「 それに応じてサイズが変更されます。
3. 子を持たないノード（「リーフ」と呼ばれます）に 渡された制約に基づいてサイズを決定し、 この解決済みサイズを親に返します。
4. 親は、この子の測定値に基づいて制約を調整します。 次の子を呼び出します。
5. 親の子がすべて測定されると、親ノードはその子ノードを そのサイズを自身の親に伝えます。
6. このようにして、ツリー全体が深さ優先で走査されます。最終的には、すべてのノードが サイズを決定し、測定ステップは完了です。

詳細な例については、制約と修飾子の順序をご覧ください。 動画をご覧ください。

制約に影響する修飾子

前のセクションでは、一部の修飾子が制約に影響を与える可能性があることを学びました。 指定します。以降のセクションでは、影響を受ける修飾子について説明します。 必要があります。

size 修飾子

size 修飾子は、コンテンツの推奨サイズを宣言します。

たとえば、次の UI ツリーは 300dp のコンテナでレンダリングする必要があります。 作成者: 200dp。制約は制限付きで、幅は 100dp～100dp の範囲で指定してください 300dp、高さ 100dp～200dp:

図 7. UI ツリーの制限付き制約と、

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

図 8. 制約を 150dp に調整する size 修飾子。

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

図 9. 渡された制約に厳密に従う size 修飾子 必要があります

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

図 10. 2 つの size 修飾子のチェーン（2 番目の値が渡されたもの） 内の（50dp）は最初の値（100dp）をオーバーライドしません。

requiredSize 修飾子

必要な場合は、size の代わりに requiredSize 修飾子を使用します。 受信制約をオーバーライドします。requiredSize 修飾子は、 指定されたサイズを正確な境界として渡します。

サイズがツリーの上方に渡されると、子ノードは 空き容量:

図 11. 指定された制約をオーバーライドする requiredSize 修飾子 size 修飾子。

width 修飾子と height 修飾子

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

図 12. 固定幅を設定する width 修飾子と height 修飾子

sizeIn 修飾子

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

図 13. sizeIn 修飾子（minWidth、maxWidth、minHeight、 maxHeight セットしました。

例

このセクションでは、いくつかのコード スニペットの出力とその説明を 連鎖修飾子。

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

このスニペットは、次の出力を生成します。

• fillMaxSize 修飾子は、制約を変更して、両方の制約を 最小の幅と高さから最大値（幅は 300dp、200dp） あります。
• size 修飾子は 50dp のサイズを使用しようとしますが、 所定の最小制約を満たすようにする必要があります。したがって、size 修飾子は また、300 の制約境界を 200 によって正確に出力します。 size 修飾子で指定された値は無視されます。
• Image はこれらの境界に従い、200 の 300 のサイズを報告します。 ツリーの一番上まで渡されます。

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

このスニペットは、次の出力を生成します。

• fillMaxSize 修飾子は、制約を調整して、最小値と最大値の両方を設定します。 幅と高さを最大値（幅 300dp、200dp インチ）まで拡張します。 あります。
• wrapContentSize 修飾子は、最小制約をリセットします。このように fillMaxSize では固定された制約が適用され、wrapContentSize は制約をリセットします おすすめします。次のノードがスペース全体を占有できるようになりました スペース全体より小さくすることもできます。
• size 修飾子は、制約を次の範囲の最小値と最大値に設定します。 50。
• Image は、50 x 50 のサイズと size 修飾子に解決されます。 転送します
• wrapContentSize 修飾子には特別なプロパティがあります。まず その子を、使用可能な最小境界の中央に配置します。 渡されます。したがって、このオブジェクトが親と通信するサイズは、 渡された最小境界です。

3 つの修飾子を組み合わせるだけで、コンポーザブルのサイズを定義し、 親の中央に置く必要があります

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

このスニペットは、次の出力を生成します。

• clip 修飾子は制約を変更しません。
  • padding 修飾子は、最大制約を下げます。
  • size 修飾子は、すべての制約を 100dp に設定します。
  • Image はこれらの制約を遵守し、次の割合で 100 のサイズをレポートします。 100dp。
  • padding 修飾子はすべてのサイズで 10dp を追加するため、レポートされる 幅と高さを 20dp ずつ表示します。
  • 描画フェーズでは、clip 修飾子が 120 のキャンバスに作用します。 120dp。そのサイズの円マスクを作成します。
  • padding 修飾子は、すべてのサイズで 10dp でコンテンツを挿入するため、 キャンバスのサイズを 100dp の 100 に縮小します。
  • Image がそのキャンバスに描画されます。画像は、 120dp の元の円のため、出力は丸みを帯びません。