限制條件和修飾符順序

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

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

UI 樹狀結構中的修飾符

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

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

可組合項和修飾符的程式碼,及其以 UI 樹狀結構的視覺化方式呈現。
圖 1. 修飾符會包裝 UI 樹狀結構中的版面配置節點。

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

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

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

之前的樹狀結構,但現在每個節點只是簡單的版面配置,有許多修飾符圍繞著節點。
圖 2. 與圖 1 中的樹狀結構相同,但包含可組合項的 以修飾符鏈結呈現的 UI 樹狀結構。

總結:

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

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

版面配置階段的限制

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

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

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

限制的類型

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

  • 有界限:節點的寬度和高度皆達到上限。
容器中不同大小的有限限制。
圖 3. 有限的限制。
  • 無限制:節點無大小限制。輸入大小上限 高度範圍設為無限大
,瞭解如何調查及移除這項存取權。
寬度和高度設為無限大的無限制限制。限制會超出容器。
圖 4.不受限制。
  • 精確:節點必須遵循確切的大小規定。最低 和最大界限設為相同的值。
,瞭解如何調查及移除這項存取權。
符合容器中確切大小規定的確切限制。
圖 5.確切限制。
  • 組合:節點採用上述限制類型的組合。 例如,限制條件可以限制寬度,但允許 不限制最大高度,或是設定確切寬度,但提供固定的高度。
,瞭解如何調查及移除這項存取權。
兩個容器顯示有界限與無限制的組合,以及確切的寬度和高度。
圖 6.受限和不受限限制以及確切寬度的組合 和高度

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

如何從父項傳遞至子項

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

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

大致來說,演算法的運作方式如下:

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

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

影響限制條件的修飾符

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

size 修飾符

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

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

UI 樹狀結構的一部分,且大小修飾符會包裝版面配置節點。
  表示容器中大小修飾符設定的受限限製表示法。
圖 7. UI 樹狀結構中的受限限制及其在 。

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

與圖 7 相同,不同之處在於大小修飾符會調整傳入限制,以便與傳遞的值相符。
圖 8.size 修飾符會將限制條件調整為 150dp

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

兩個 UI 樹狀結構及其在容器中對應的表示法。首先
  size 修飾符可接受遞增限制;第二,「Size」修飾符會配合
  限制過大,導致填滿容器的限制。
圖 9.size 修飾符會密切遵循已傳遞的限制 。

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

UI 樹狀結構中的兩個大小修飾符鏈結,及其在容器中的表示法。
  這是傳入的第一個值,而不是第二個值的結果。
圖 10.兩個 size 修飾符的鏈結,其中傳遞第二個值 (50dp) 不會覆寫第一個值 (100dp)。

requiredSize 修飾符

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

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

在 UI 樹狀結構中鏈結大小和 requiredSize 修飾符,
  物件表示法requiredSize 修飾符限制會覆寫大小修飾符
  限制。
圖 11.requiredSize 修飾符會覆寫來自 size 修飾符。

widthheight 修飾符

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

兩個 UI 樹狀結構,一個具有寬度修飾符及其容器表示法,另一個
  以及高度修飾符及其表示法
圖 12.width 修飾符和 height 修飾符設定固定寬度 和高度。

sizeIn 修飾符

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

具有 sizeIn 修飾符的 UI 樹狀結構,設有最小和最大寬度和高度。
  以及容器在容器中的表示法
圖 13.sizeIn 修飾符搭配 minWidthmaxWidthminHeight 和 已設定 maxHeight

範例

本節會使用 鏈結修飾符。

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

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

  • fillMaxSize 修飾符會變更限制條件,藉此同時設定 最小寬度和高度等於最大值 - 寬度和高度為 300dp,寬度為 200dp
  • 雖然 size 修飾符想要使用 50dp 的大小,但該修飾符仍需要 才能符合傳入的最低限制所以 size 修飾符 也會輸出 200300 確切限制範圍,有效 請忽略 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 修飾符會在 120 的畫布上執行,如下所示: 120dp。因此,這項功能會建立該尺寸的圓形遮罩
    • padding 修飾符會將其內容加上 10dp 在所有大小的插邊,讓其內容 將畫布大小調低 100dp100
    • Image 會在該畫布上繪製。圖片會根據 120dp 的原始圓形,因此輸出結果是非圓形結果。