在 Compose 中,您可以將多個修飾符鏈結在一起,以變更可組合函式的外觀和風格。這些修飾符鏈結可能會影響傳遞至可組合項的限制,這些限制會定義寬度和高度邊界。
本頁說明鏈結修飾符對限制條件的影響,而 測量和顯示可組合項的位置
UI 樹狀結構中的修飾符
如要瞭解修飾符如何相互影響,建議您以視覺化方式呈現這些修飾符在 UI 樹狀結構中的顯示方式,這類樹狀結構會在組合階段產生。適用對象 詳情請參閱組成一節。
在 UI 樹狀結構中,您可以將修飾符視為版面配置節點的包裝函式節點:

在可組合項中新增多個修飾符,即可建立修飾符鏈結。時間
鏈結多個修飾符時,每個修飾符節點會納入鏈結的其餘部分
以及其中的版面配置節點舉例來說,當您鏈結 clip
和 size
修飾符時,clip
修飾符節點會包裝 size
修飾符節點,而後者則會包裝 Image
版面配置節點。
在版面配置階段,遍歷樹狀結構的演算法會維持不變,但也會造訪每個修飾符節點。這樣一來,修飾符就能變更所包裝修飾符或版面配置節點的大小需求和位置。
如圖 2 所示,Image
和 Text
可組合函式的實作方式
其本身是由修飾符鏈結組成,包裝單一版面配置節點。Row
和 Column
的實作項目只是版面配置節點,用於說明如何版面配置子項。

總結來說:
- 修飾符會納入單一修飾符或版面配置節點。
- 版面配置節點可排版多個子節點。
以下各節說明如何使用這個心理模型推理 修飾符鏈結及其對可組合項大小的影響。
版面配置階段的限制
版面配置階段會按照三步驟演算法找出每個版面配置節點的寬度、高度和 x、y 座標:
- 測量子項:節點會測量子項 (如有)。
- 決定自身大小:節點會根據這些測量值決定自身大小。
- 放置子項:每個子項節點都會相對於節點本身的位置放置。
Constraints
可協助在前兩個值中找出適當的節點大小
演算法的步驟限制會定義
節點的寬度和高度節點決定大小時,測量到的大小
都必須落在這個大小範圍內
限制條件的類型
限制條件可以是下列任一項:
- 有界限:節點的寬度和高度皆達到上限。

- 無限制:節點無大小限制。寬度和高度上限範圍設為無限。

- Exact:要求節點遵循確切大小規定。最小和最大邊界都設為相同的值。

- 組合:節點會遵循上述約束條件類型的組合。例如,限制條件可以限制寬度,但允許 不限制最大高度,或是設定確切寬度,但提供固定的高度。

下一節將說明如何將這些限制條件從父項傳遞至子項。
如何從父項傳遞至子項
執行演算法的第一個步驟時,請參閱「版面配置限制」一節 階段,限制會從父項向下傳遞至子項 。
父項節點測量子項時,父項節點會為每個節點提供這些限制 讓孩子知道可以儲存的大小以及當問題發生時 決定其大小,同時也會遵循所傳遞的 和它自己的父母
大致來說,演算法的運作方式如下:
- 如要決定應用程式實際需要佔用的大小,請找出 UI 樹狀結構中的根節點。 測量子項,並將相同的限制轉送至其第一個子項。
- 如果子項是不會影響測量值的修飾符,則會將限制轉寄至下一個修飾符。除非遇到會影響測量值的修飾符,否則限制條件會原封不動地傳遞至修飾符鏈結。然後再根據計算結果重新調整限制。
- 一旦到達沒有任何子項的節點 (稱為「葉節點」),系統就會根據傳入的限制決定其大小,並將這個已解析的大小傳回至父項。
- 父項會根據孩子的測量結果調整限制。 會藉由調整後的限制條件,呼叫下一個子項。
- 測量父項的所有子項後,父項節點就會決定其所屬的實體 並將該值傳給其父項
- 這樣一來,整個樹狀結構會先經過深度掃遍。最終 決定大小,也完成了評估步驟
如需深入瞭解範例,請觀看「限制和修飾符順序」影片。
影響限制條件的修飾符
您在上一節中學到,某些修飾符可能會影響限制 大小以下各節說明會影響哪些特定修飾符 限制。
size
修飾符
size
修飾符會宣告內容的偏好大小。
舉例來說,以下 UI 樹狀結構應在 300dp
的容器中轉譯。
製作者:200dp
。限制條件會受到限制,寬度必須介於 100dp
和
300dp
,高度介於 100dp
到 200dp
之間:

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

size
修飾符會將限制條件調整為 150dp
。如果寬度和高度小於最小限制邊界,或大於最大限制邊界,修飾符會盡可能與傳入的限制相符,同時遵循以下傳入的限制:

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

size
修飾符所組成的鏈結,其中傳入的第二個值 (50dp
) 不會覆寫第一個值 (100dp
)。requiredSize
修飾符
如果需要節點覆寫輸入的限制,請使用 requiredSize
修飾符,而非 size
。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
修飾符也會透過200
輸出300
的確切限制邊界,有效地忽略size
修飾符中提供的值。 Image
遵循這些邊界,並依200
回報300
的大小, 一路到大樹上。
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
修飾符具有特殊屬性。它會取得子項,並將其置於傳遞的可用最小邊界的中心。用來通知其父項的大小就等於 傳遞到這個函式的最小邊界
只要結合三個修飾符,您就可以定義可組合函式的大小 將其置於父項中央。
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
修飾符會透過120dp
對120
的畫布執行動作。因此,它會建立該大小的圓形遮罩。 - 接著,
padding
修飾符會在所有大小上將內容內嵌10dp
,因此會將畫布大小降低100dp
至100
。 Image
會在該畫布中繪製。圖片會根據120dp
的原始圓形,因此輸出結果是非圓形結果。