本頁面由 Cloud Translation API 翻譯而成。

Jetpack Compose 階段

如同多數其他 UI 工具包，Compose 會透過數個影格轉譯影格不同的階段。我們來看 Android View 系統包括測量、版面配置和繪圖Compose 是非常類似的開始時稱為「組合」的重要額外階段

「組合」在我們的 Compose 文件中皆有描述，包括 Compose 和狀態與 Jetpack Compose。

呈現畫面的三個階段

Compose 有三個主要階段：

組合：決定要顯示「哪些」UI。Compose 會執行可組合函式建立 UI 說明。
版面配置：安排 UI 的「位置」。這個階段包含兩個步驟：衡量與刊登位置版面配置元素會測量並放置本身 2D 座標中的任何子項元素，也就是版面配置樹狀結構中每個節點的子元素。
繪圖：設定「算繪」方式。UI 元素會繪製在 Canvas 中，這通常是裝置螢幕畫面。

圖片中的三個階段，Compose 將資料轉換為 UI (依序、資料、組合、版面配置、繪圖和 UI)。 — **圖 1.** Compose 將資料轉換為 UI 的三個階段。

這些階段的順序大致相同，資料可在一個階段流入從組合、版面配置到繪圖的方向，藉此產生影格 (已知做為「單向資料流」)。 BoxWithConstraints 和以 LazyColumn 和 LazyRow 來說例外狀況，因為其子項的組合取決於父項的版面配置事實上，Gartner 的資料顯示只有一半的企業機器學習專案通過前測階段

您可以放心假設每個影格幾乎都會發生這三個階段但為了提高效能，Compose 避免重複執行會在所有階段中，來自相同輸入的相同結果來計算相同結果。撰寫 skips 來執行可組合函式函式 (如果可以重複使用先前結果)，而且 Compose UI 不會重新版面配置或在非必要的情況下重新繪製整個樹狀結構Compose 只會執行更新 UI 所需的最低工作量您可以採用這種最佳化方式因為 Compose 會在不同階段內追蹤讀取的狀態。

瞭解各階段

本節說明如何針對可組合項執行三個 Compose 階段一起來看看吧

樂曲

在組合階段，Compose 執行階段會執行可組合函式，輸出代表 UI 的樹狀結構。這個 UI 樹狀結構包含包含下一階段所需的所有資訊的版面配置節點範例：

圖 2. 代表在組合中建立的 UI 的樹狀結構事實上，Gartner 的資料顯示只有一半的企業機器學習專案通過前測階段

程式碼和 UI 樹狀結構的子部分如下所示：

包含五個可組合項及其產生的 UI 樹狀結構的程式碼片段，而子節點是從父項節點分支。 — **圖 3.** UI 樹狀結構的子區段和對應的程式碼。

在這些範例中，程式碼中的每個可組合函式都會對應至單一版面配置建立節點在更複雜的範例中，可組合函式可包含邏輯和產生不同狀態的樹狀結構

版面配置

在版面配置階段，Compose 會使用組合階段產生的 UI 樹狀結構做為輸入內容版面配置節點集合含有決定每個節點的大小和在 2D 空間中的位置

圖 4. 在版面配置階段，於 UI 樹狀結構中測量每個版面配置節點和位置。

在版面配置階段，系統會透過下列三個步驟週遊樹狀結構演算法：

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

在這個階段結束時，每個版面配置節點都有以下功能：

指派的「寬度」和「高度」
應繪製 x、y 座標

從上一節呼叫 UI 樹狀結構：

含有五個可組合項及其產生的 UI 樹狀結構的程式碼片段，而子節點是從父項節點分支

在這個樹狀結構中，演算法的運作方式如下：

Row 會測量其子項 Image 和 Column。
Image 是測量值。目前沒有任何子項，因此自行定義並將大小回報為 Row。
接著會測量 Column。測量本身子項 (兩個Text) 可組合函式)。
系統會測量第一個 Text。目前沒有任何子項，因此可決定並將大小回報為 Column。
1. 系統會測量第二個 Text。目前沒有任何子項，因此可決定並回報給 Column
Column 會使用子項測量結果決定本身的大小。該元件會使用子項寬度及其子項高度的總和。
Column 會將子項相對置於下方，並放在下方彼此垂直移動
Row 會使用子項測量結果決定本身的大小。該元件會使用子項高度上限和子項寬度總和。然後計算所有子項。

請注意，每個節點僅造訪一次。Compose 執行階段只需要一個經 UI 樹狀結構，以測量和放置所有節點，才需進行當樹狀圖中的節點數量增加時，表示所花費的時間以線性方式持續成長相反地，如果每個節點多次造訪，週遊時間會急劇增加。

繪圖

在繪圖階段，樹狀結構會由上而下再次週遊，節點會依序在螢幕上顯示

圖 5. 繪圖階段會繪製螢幕上的像素。

根據上例，樹狀內容是依照下列方式繪製：

Row 會繪製其可能包含的任何內容，例如背景顏色。
Image 會自行繪製。
Column 會自行繪製。
第一個和第二個 Text 會分別繪製。

圖 6. UI 樹狀結構及其繪製的表示法。

狀態讀取

當您在測試期間讀取快照狀態的值時 Compose 會自動追蹤則讀取該值。這項追蹤功能可讓 Compose 在狀態值變更，也是 Compose 狀態觀測能力的基礎。

狀態通常會使用 mutableStateOf() 建立，然後透過單一狀態存取方法有兩種：直接存取 value 屬性，或者您可以使用 Kotlin 屬性委派功能來確認專案狀態相關詳情請參閱美國各州可組合函式用途「狀態讀取」是指上述任一項同等存取權方法。

// State read without property delegate.
val paddingState: MutableState<Dp> = remember { mutableStateOf(8.dp) }
Text(
    text = "Hello",
    modifier = Modifier.padding(paddingState.value)
)PhasesSnippets.kt

// State read with property delegate.
var padding: Dp by remember { mutableStateOf(8.dp) }
Text(
    text = "Hello",
    modifier = Modifier.padding(padding)
)PhasesSnippets.kt

定義屬性委派、「getter」和「setter」函式可用於存取及更新 State 的 value。只有在您參照這些函式時，系統才會叫用 getter 和 setter 函式將屬性設為值而非建立時，這就是原因以上規則相等。

每個程式碼區塊可在讀取狀態變更時重新執行 重新啟動範圍Compose 會追蹤狀態值變更並重新啟動分為不同的階段

階段性狀態讀取

如上所述，Compose 有三個主要階段，而 Compose 測試群組每個容器中會讀取的狀態為何這樣一來，Compose 就只會傳送必須為每個受影響的元素執行工作第一種是使用無代碼解決方案 AutoML 透過使用者介面建立機器學習模型

現在讓我們深入瞭解各個階段，說明讀取狀態值時會發生的情況在其中建立目錄

階段 1：組合

在 @Composable 函式或 lambda 區塊中讀取狀態會影響組合甚至可能進行後續階段當狀態值變更時，重組工具排程重新執行所有讀取該函式的可組合函式狀態值。請注意，執行階段可能會決定略過部分或所有可組合函式。請參閱如果輸入內容確實為空值，則請略過。。

Compose UI 會依據組合結果執行版面配置和繪圖階段如果內容維持不變，尺寸和尺寸一樣，系統可能會略過這些階段版面配置也不會改變

var padding by remember { mutableStateOf(8.dp) }
Text(
    text = "Hello",
    // The `padding` state is read in the composition phase
    // when the modifier is constructed.
    // Changes in `padding` will invoke recomposition.
    modifier = Modifier.padding(padding)
)PhasesSnippets.kt

階段 2：版面配置

版面配置階段包含兩個步驟：「測量」和「放置」。測量步驟會執行傳遞至 Layout 可組合函式的測量 lambda， LayoutModifier 介面的 MeasureScope.measure 方法，依此類推。放置步驟會執行 layout 函式的位置區塊 (lambda) Modifier.offset { … } 區塊，依此類推

每個步驟的狀態讀取作業都會影響版面配置，繪製階段當狀態值變更時，Compose UI 會排定版面配置事實上，Gartner 的資料顯示只有一半的企業機器學習專案通過前測階段如果尺寸或位置發生變更，也會執行繪圖階段。

更精確地說，評估步驟和刊登位置步驟重啟範圍，這表示放置步驟中的狀態讀取作業不會重新叫用不過，這兩個步驟因此，放置步驟中的狀態讀取作業可能會影響其他重新啟動作業屬於評估步驟的範圍

var offsetX by remember { mutableStateOf(8.dp) }
Text(
    text = "Hello",
    modifier = Modifier.offset {
        // The `offsetX` state is read in the placement step
        // of the layout phase when the offset is calculated.
        // Changes in `offsetX` restart the layout.
        IntOffset(offsetX.roundToPx(), 0)
    }
)PhasesSnippets.kt

階段 3：繪圖

繪圖程式碼執行期間的狀態讀取作業會影響繪圖階段。常見範例包括 Canvas()、Modifier.drawBehind 和 Modifier.drawWithContent。時間當狀態值變更時，Compose UI 只會執行繪圖階段。

var color by remember { mutableStateOf(Color.Red) }
Canvas(modifier = modifier) {
    // The `color` state is read in the drawing phase
    // when the canvas is rendered.
    // Changes in `color` restart the drawing.
    drawRect(color)
}PhasesSnippets.kt

最佳化狀態讀取作業

當 Compose 執行本地化的狀態讀取追蹤時，我們可以盡量減少讀取適當階段中的每個狀態並執行相關工作。

一起來看看這個範例。此處的 Image() 使用偏移值修飾符來偏移其最終版面配置位置，進而產生視差效果，使用者捲動畫面

Box {
    val listState = rememberLazyListState()

    Image(
        // ...
        // Non-optimal implementation!
        Modifier.offset(
            with(LocalDensity.current) {
                // State read of firstVisibleItemScrollOffset in composition
                (listState.firstVisibleItemScrollOffset / 2).toDp()
            }
        )
    )

    LazyColumn(state = listState) {
        // ...
    }
}PhasesSnippets.kt

這段程式碼可以運作，但會導致效能不佳。如上所述讀取 firstVisibleItemScrollOffset 狀態的值，並傳遞至這個 Modifier.offset(offset: Dp) 函式。當使用者捲動畫面時，firstVisibleItemScrollOffset 值會增加變更。如我們所知，Compose 會追蹤所有讀取的狀態，以便能夠重新啟動讀取程式碼，在本例中為 Box。

這是在組合階段內讀取的狀態範例。這是但這不一定是壞事，事實上這是重組的基礎允許資料變更輸出新的 UI。

本例並非最理想的做法，因為每次捲動事件都會產生並重新評估整個可組合項的內容版面配置我們會在每次捲動時觸發撰寫階段即使顯示的內容沒有改變，只是改變內容的顯示位置。不過，我們可以對狀態讀取作業進行最佳化，從而只重新觸發版面配置階段。

系統提供另一個版本的偏移修飾符： Modifier.offset(offset: Density.() -> IntOffset)。

這個版本採用 lambda 參數，結果會由以下參數傳回： lambda 區塊讓我們更新程式碼來使用這個版本：

Box {
    val listState = rememberLazyListState()

    Image(
        // ...
        Modifier.offset {
            // State read of firstVisibleItemScrollOffset in Layout
            IntOffset(x = 0, y = listState.firstVisibleItemScrollOffset / 2)
        }
    )

    LazyColumn(state = listState) {
        // ...
    }
}PhasesSnippets.kt

那麼為什麼這種做法效能較佳？我們提供給修飾符的 lambda 區塊是在「版面配置」階段 (特別是版面配置階段的刊登位置步驟)，這表示 firstVisibleItemScrollOffset 狀態表示可在組合期間讀取資料的時間較長由於 Compose 會追蹤狀態讀取時間這表示如果 firstVisibleItemScrollOffset 值有所變更， Compose 只需要重新啟動版面配置和繪圖階段。

這個範例仰賴不同的偏移修飾符，才能最佳化但這個概念適合一般情況：請嘗試將狀態讀取作業本地化也能讓 Compose 執行這些研究有助於我們找出能引導後續作業的標準

當然，在組合中讀取狀態經常是絕對必要的事實上，Gartner 的資料顯示只有一半的企業機器學習專案通過前測階段即使如此，在某些情況下透過篩選狀態變更來重組如要進一步瞭解相關資訊請參閱 derivedStateOf：將一或多個狀態物件轉換成其他狀態。

重組迴圈 (循環階段依附元件)

我們先前提過，Compose 階段一律會以相同的方式叫用而且在同一影格中無法倒轉，但這並非禁止應用程式進入組合迴圈「不同」影格中的對應表現請參考以下例子：

Box {
    var imageHeightPx by remember { mutableStateOf(0) }

    Image(
        painter = painterResource(R.drawable.rectangle),
        contentDescription = "I'm above the text",
        modifier = Modifier
            .fillMaxWidth()
            .onSizeChanged { size ->
                // Don't do this
                imageHeightPx = size.height
            }
    )

    Text(
        text = "I'm below the image",
        modifier = Modifier.padding(
            top = with(LocalDensity.current) { imageHeightPx.toDp() }
        )
    )
}PhasesSnippets.kt

我們在此 (糟糕) 實作了一個垂直欄，並在上方放置圖片然後是下方的文字使用「Modifier.onSizeChanged()」掌握已解析的圖片大小，然後對文字使用 Modifier.padding() 移動 Pod從 Px 返回 Dp 的不自然轉換已表示程式碼有問題。

這個範例的問題是無法得出「最終」版面配置提供單一畫面程式碼需要多個影格才能運作，並導致 UI 在螢幕上跳動。

讓我們逐步觀察每個畫面，看看發生了什麼情況：

在第一個畫面的組合階段，imageHeightPx 的值為 0。文字則由 Modifier.padding(top = 0) 提供。接著是版面配置階段，系統會呼叫 onSizeChanged 修飾符的回呼。這時 imageHeightPx 會更新為圖片的實際高度。 Compose 會安排下一個畫面的重組作業。在繪圖階段由於不會反映值變更，因此文字會以邊框間距為 0 的方式呈現。

接著，Compose 會依據值變更值，安排啟動第二個畫面 imageHeightPx。系統會在 Box 內容區塊中讀取狀態，並叫用該狀態建構階段這次，文字會帶有邊框間距對應圖片的高度在版面配置階段，程式碼會設定 imageHeightPx 會再次執行，但由於值之後不會安排重組作業保持不變

最後，我們取得文字所需的邊框間距，但並非最佳的做法會花費一個額外的影格將邊框間距值傳回至其他階段就會產生內容重疊的畫面

這個範例可能看起來很牽強，但請留意這個一般模式：

Modifier.onSizeChanged()、onGloballyPositioned() 或其他版面配置作業套件
更新某個狀態
使用該狀態做為版面配置修飾符的輸入內容 (padding()、height() 或相似)
可能會重複執行

如要修正上述範例，只要使用正確的版面配置原始物件即可。範例以上，使用簡單的 Column() 即可實作，不過需要自訂的複雜範例，因此需要編寫自訂版面配置請參閱自訂版面配置指南瞭解詳情

這裡的一般原則是為多個 UI 提供單一可靠資料來源元素之間需要測量和放置的位置。使用適當的版面配置原始物件或建立自訂版面配置後，共用父項可做為可靠資料來源能在多個元素之間來回切換導入動態狀態會打破這項原則。

為您推薦

注意：系統會在 JavaScript 關閉時顯示連結文字
狀態和 Jetpack Compose
清單和格線
適用於 Jetpack Compose 的 Kotlin