限制條件和修飾符順序

在 Compose 中，您可以將多個修飾符鏈結在一起以變更外觀 讓您掌握可組合的情緒這些修飾符鏈結可能會影響傳遞的限制 才能定義寬度和高度邊界

本頁說明鏈結修飾符對限制條件的影響，而 測量和放置可組合項的位置

UI 樹狀結構中的修飾符

如要瞭解修飾符如何相互影響，建議您用圖表來呈現 這些物件會出現在 UI 樹狀結構中，而此樹狀結構會在組合階段產生。適用對象 詳情請參閱組成一節。

在 UI 樹狀結構中，您可以將修飾符視覺化，做為版面配置的包裝函式節點 節點：

在可組合函式中加入多個修飾符，會建立修飾符鏈結。時間 鏈結多個修飾符時，每個修飾符節點會納入鏈結的其餘部分 以及其中的版面配置節點舉例來說，當您連結 clip 和 size 修飾符，clip 修飾符節點會納入 size 修飾符節點。 然後包裝 Image 版面配置節點。

在版面配置階段，行經樹狀結構的演算法維持不變， 也會造訪各個輔助節點。如此一來，修飾符就能變更大小 以及其納入的修飾符或版面配置節點的位置和位置。

如圖 2 所示，Image 和 Text 可組合函式的實作方式 其本身是由修飾符鏈結組成，包裝單一版面配置節點。 Row 和 Column 的實作只是版面配置節點，用來描述如何 安排孩子們的學習資源

總結：

• 修飾符會納入單一修飾符或版面配置節點。
• 版面配置節點可以配置多個子節點。

以下各節說明如何使用這個心理模型推理 修飾符鏈結及其對可組合項大小的影響。

版面配置階段的限制

版面配置階段：遵循三步驟演算法，找出每個版面配置 節點的寬度、高度和 x，y 座標：

1. 測量子項：節點會測量子項 (如有)。
2. 決定大小：依據這些測量結果，節點會自行決定大小 大小
3. 放置子項：每個子節點都放置於節點本身的 位置。

Constraints 可協助在前兩個值中找出適當的節點大小 演算法的步驟限制會定義 節點的寬度和高度節點決定大小時，測量到的大小 都必須落在這個大小範圍內

限制的類型

限制可以是下列其中一項：

• 有界限：節點的寬度和高度皆達到上限。

• 無限制：節點無大小限制。輸入大小上限 高度範圍設為無限大

，瞭解如何調查及移除這項存取權。

• 精確：節點必須遵循確切的大小規定。最低 和最大界限設為相同的值。

，瞭解如何調查及移除這項存取權。

• 組合：節點採用上述限制類型的組合。 例如，限制條件可以限制寬度，但允許 不限制最大高度，或是設定確切寬度，但提供固定的高度。

，瞭解如何調查及移除這項存取權。

下一節將說明這些限制條件如何從父項傳遞至 孩子。

如何從父項傳遞至子項

執行演算法的第一個步驟時，請參閱「版面配置限制」一節 階段，限制會從父項向下傳遞至子項 。

父項節點測量子項時，父項節點會為每個節點提供這些限制 讓孩子知道可以儲存的大小以及當問題發生時 決定其大小，同時也會遵循所傳遞的 和它自己的父母

大致來說，演算法的運作方式如下：

1. 如要決定應用程式實際需要佔用的大小，請找出 UI 樹狀結構中的根節點。 測量子項，並將相同的限制轉送至其第一個子項。
2. 如果子項是不會影響評估結果的修飾符，該修飾符會將 對下一個修飾符的限制限制條件會向下傳遞修飾符 。 並據此調整大小
3. 到達不含任何子項 (稱為「分葉」) 的節點後 就會根據傳入的限制決定其大小， 會將這個已解析的大小傳回其父項。
4. 父項會根據孩子的測量結果調整限制。 會藉由調整後的限制條件，呼叫下一個子項。
5. 測量父項的所有子項後，父項節點就會決定其所屬的實體 並將該值傳給其父項
6. 這樣一來，整個樹狀結構會先經過深度掃遍。最終 決定大小，也完成了評估步驟

如需詳細說明範例，請參閱限制條件和修飾符順序。 影片。

影響限制條件的修飾符

您在上一節中學到，某些修飾符可能會影響限制 大小以下各節說明會影響哪些特定修飾符 限制。

size 修飾符

size 修飾符會宣告內容的偏好大小。

舉例來說，以下 UI 樹狀結構應在 300dp 容器中轉譯。 製作者：200dp。限制條件會受到限制，寬度必須介於 100dp 和 300dp，高度介於 100dp 到 200dp 之間：

size 修飾符會調整傳入的限制，以便比對傳遞的值。 在這個範例中，值為 150dp：

如果寬度和高度小於最小限制範圍，或是 大於上限邊界，修飾符就會與傳遞的 同時遵循傳遞的限制 於：

請注意，鏈結多個 size 修飾符無法連結。前 size 修飾符會將最小和最大限制同時設為固定值。即使 第二個大小修飾符要求的大小調整，但仍需要 會遵循傳入的確切範圍，因此不會覆寫這些值：

requiredSize 修飾符

如需使用 size，請使用 requiredSize 修飾符 (而非 size) 節點即可覆寫傳入限制requiredSize 修飾符會取代 並傳遞您指定為確切邊界的大小。

大小傳遞到樹狀結構後，子項節點會在 可用空間：

width 和 height 修飾符

size 修飾符會調整限制條件的寬度和高度。取代為 width 修飾符可以設定固定寬度，但高度則維持不變。 同樣地，使用 height 修飾符即可設定固定高度，但保留 不決定寬度：

sizeIn 修飾符

sizeIn 修飾符可讓您設定確切的下限和上限 針對寬度和高度如需精細的控制選項，請使用 sizeIn 修飾符 設下限制

範例

本節會使用 鏈結修飾符。

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

這個程式碼片段會產生下列輸出內容：

• fillMaxSize 修飾符會變更限制條件，藉此同時設定 最小寬度和高度等於最大值 - 寬度和高度為 300dp，寬度為 200dp 。
• 雖然 size 修飾符想要使用 50dp 的大小，但該修飾符仍需要 才能符合傳入的最低限制所以 size 修飾符 也會輸出 200 的 300 確切限制範圍，有效 請忽略 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 解析為 50 的大小，以及 size 修飾符 。
• wrapContentSize 修飾符具有特殊屬性。雲端 並將該物件置於可用最小邊界的中央 傳遞到這個檔案用來通知其父項的大小就等於 傳遞到這個函式的最小邊界

只要結合三個修飾符，您就可以定義可組合函式的大小 將其置於父項中央。

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 的原始圓形，因此輸出結果是非圓形結果。