限制條件和修飾符順序

在 Compose 中，您可以將多個修飾符鏈結在一起，變更可組合項的外觀和風格。這些修飾符鏈結可能會影響傳遞至可組合項的限制，這些限制會定義寬度和高度界限。

本頁說明鏈結修飾符如何影響限制，進而影響可組合項的測量和位置。

UI 樹狀結構中的修飾符

如要瞭解修飾符如何互相影響，建議您以視覺化方式呈現修飾符在 UI 樹狀結構中的顯示方式，該樹狀結構是在組合階段產生。詳情請參閱「組合」一節。

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

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

在版面配置階段，遍歷樹狀結構的演算法維持不變，但也會造訪每個修飾符節點。這樣一來，修飾符就能變更其包裝的修飾符或版面配置節點的大小需求和位置。

如圖 2 所示，Image 和 Text 可組合項本身的實作，是由包裝單一版面配置節點的修飾符鏈結組成。

Row 和 Column 的實作是版面配置節點，說明如何配置子項。

摘要：

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

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

版面配置階段的限制

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

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

Constraints 可協助在演算法的前兩個步驟中，找出節點的合適大小。限制會定義節點寬度和高度的上下限。節點決定大小時，測量的大小應落在這個範圍內。

限制的類型

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

• 有界限：節點有最大和最小寬度與高度。

• 無限制：節點不受任何大小限制。寬度和高度上限設為無限。

• Exact：系統要求節點遵循確切的大小規定。下限和上限設為相同的值。

• 組合：節點遵循上述限制類型的組合。舉例來說，限制條件可以限制寬度，同時允許無限制的最大高度，或設定確切寬度，但提供限制高度。

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

限制如何從父項傳遞至子項

在「版面配置階段的限制」一節所述演算法的第一個步驟中，限制會從 UI 樹狀結構中的父項向下傳遞至子項。

父項節點測量子項時，會為每個子項提供這些限制，讓子項知道允許的大小。接著，當它決定自己的大小時，也會遵循其父項傳入的限制。

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

1. 為決定實際要佔用的大小，UI 樹狀結構中的根節點會測量子項，並將相同限制轉送至第一個子項。
2. 如果子項是不會影響測量的修飾符，則會將限制轉送至下一個修飾符。除非遇到會影響測量的修飾符，否則限制條件會沿著修飾符鏈結原封不動地傳遞。接著，系統會據此調整限制的大小。
3. 到達沒有任何子項的節點 (稱為「葉節點」) 後，系統會根據傳入的限制決定其大小，並將這個解析後的大小傳回父項。
4. 父項會根據這個子項的測量結果調整限制，並使用這些調整後的限制呼叫下一個子項。
5. 測量完父項的所有子項後，父項節點會決定本身的大小，並將該大小傳達給其父項。
6. 這樣一來，整個樹狀結構就會以深度優先的方式遍歷。最後，所有節點都會決定大小，測量步驟也隨之完成。

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

會影響限制的修飾符

在上一節中，您已瞭解某些修飾符可能會影響限制大小。以下各節說明會影響限制條件的特定修飾符。

size 修飾符

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

舉例來說，下列 UI 樹狀結構應在 300dp 乘以 200dp 的容器中算繪。限制條件有界限，寬度介於 100dp 和 300dp 之間，高度介於 100dp 和 200dp 之間：

size 修飾符會調整傳入的限制，以符合傳遞給它的值。在本範例中，這個值為 150dp：

如果寬度和高度小於最小限制範圍，或大於最大限制範圍，修飾符會盡可能符合傳遞的限制，同時仍遵循傳入的限制：

請注意，鏈結多個 size 修飾符並不會生效。第一個 size 修飾符會將最小值和最大值限制設為固定值。即使第二個大小修飾符要求較小或較大的大小，仍須遵守傳入的確切邊界，因此不會覆寫這些值：

requiredSize 修飾符

如果需要節點覆寫傳入的限制，請使用 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 修飾符也會輸出 300 乘以 200 的確切限制範圍，有效忽略 size 修飾符中提供的值。
• Image 遵循這些界限，並回報 300 乘以 200 的大小，這個大小會沿著樹狀結構向上傳遞。

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 修飾符具有特殊屬性。它會擷取子項，並將其置於傳遞給它的可用最小邊界中心。因此，它傳達給父項的大小等於傳入的最小邊界。

只要結合三個修飾符，即可定義可組合項的大小，並將其置中於父項。

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

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

• clip 修飾符不會變更限制。
• padding 修飾符會降低最大限制。
• size 修飾符會將所有限制設為 100dp。
• Image 遵循這些限制，並回報 100dp 乘以 100dp 的大小。
• padding 修飾符會在 Image 回報的大小四周加上 10dp，因此含有邊框間距的版面配置會回報 120dp 的寬度和高度。
• 現在，在繪圖階段，clip 修飾符會作用於 120dp 乘以 120dp 的畫布。建立該大小的圓形遮罩。
• 接著，padding 修飾符會將內容向內縮排 10dp，使 Image 的畫布大小縮減為 100dp x 100dp。
• Image 會在較小的畫布中繪製。系統會根據 120dp 的原始圓形裁剪圖片，因此輸出結果並非圓形。