Jetpack Compose 是用于構建原生 Android 界面的新工具包。它可簡化并加快 Android 上的界面開發，使用更少的代碼、強大的工具和直觀的 Kotlin API，快速讓應用生動而精彩。Compose 使用全新的組件——可組合項 (Composable) 來布局界面，使用修飾符 (Modifier) 來配置可組合項。

本文會為您講解由可組合項和修飾符提供支持的組合布局模型，并深入探究其背后的工作原理以及它們的功能，讓您更好地了解所用布局和修飾符的工作方式，和應如何以及在何時構建自定義布局，從而實現滿足確切應用需求的設計。

布局模型

Jetpack Compose 可將狀態轉換為界面，這個過程分為三步:組合、布局、繪制。組合階段執行可組合函數，這些函數可以生成界面，從而創建界面樹。例如，下圖中的 SearchResult 函數會生成對應的界面樹:

其過程簡述如下:

1. 測量根布局 Row；
2. Row 測量它的第一個子節點 Image；
3. 由于 Image 是一個不含子節點的葉子節點，它會測量自身尺寸并加以報告，還會返回有關如何放置其子節點的指令。Image 的葉子節點通常是空節點，但所有布局都會在設置其尺寸的同時返回這些放置指令；
4. Row 測量它的第二個子節點 Column；
5. Column 測量其子節點，首先測量第一個子節點 Text；
6. Text 測量并報告其尺寸以及放置指令；
7. Column 測量第二個子節點 Text；
8. Text 測量并報告其尺寸以及放置指令；
9. Column 測量完其子節點，可以決定其自身的尺寸和放置邏輯；
10. Row 根據其所有子節點的測量結果決定其自身尺寸和放置指令。

Layout 可組合項

@Composablefun Layout(    content: @Composable () -> Unit,    modifier: Modifier = Modifier,    measurePolicy: MeasurePolicy) {    …}

@Composablefun MyCustomLayout(    modifier: Modifier = Modifier,    content: @Composable () -> Unit) {    Layout(         modifier = modifier,         content = content    ) { measurables: List,         constraints: Constraints ->        // TODO 測量和放置項目   }}

在 MyCustomLayout 可組合項中，我們調用 Layout 函數并以 Trailing Lambda 的形式提供 MeasurePolicy 作為參數，從而實現所需的 measure 函數。該函數接受一個 Constraints 對象來告知 Layout 它的尺寸限制。Constraints 是一個簡單類，用于限制 Layout 的最大和最小寬度與高度:

class Constraints {    val minWidth: Int    val maxWidth: Int    val minHeight: Int    val maxHeight: Int}

△Constraints

measure 函數還會接受 List 作為參數，這表示的是傳入的子元素。Measurable 類型會公開用于測量項目的函數。如前所述，布局每個元素需要三步:每個元素必須測量其所有子元素，并以此判斷自身尺寸，再放置其子元素。其代碼實現如下:

@Composablefun MyCustomLayout(    content: @Composable () -> Unit,    modifier: Modifier = Modifier) {    Layout(         modifier = modifier,         content = content    ) { measurables: List,         constraints: Constraints ->        // placeables 是經過測量的子元素，它擁有自身的尺寸值        val placeables = measurables.map { measurable ->            // 測量所有子元素，這里不編寫任何自定義測量邏輯，只是簡單地            // 調用 Measurable 的 measure 函數并傳入 constraints            measurable.measure(constraints)        }        val width = // 根據 placeables 計算得出        val height = // 根據 placeables 計算得出        // 報告所需的尺寸        layout (width, height) {            placeables.foreach { placeable ->                // 通過遍歷將每個項目放置到最終的預期位置                placeable.place(                    x = …                    y = …                )            }        }   }}

自定義布局示例

MyColumn 示例

@Composablefun MyColumn(    modifier: Modifier = Modifier,    content: @Composable () -> Unit) {    Layout(         modifier = modifier,         content = content    ) { measurables, constraints ->        // 測量每個項目并將其轉換為 Placeable        val placeables = measurables.map { measurable ->            measurable.measure(constraints)        }        // Column 的高度是所有項目所測得高度之和        val height = placeables.sumOf { it.height }        // Column 的寬度則為內部所含最寬項目的寬度        val width = placeables.maxOf { it.width }        // 報告所需的尺寸        layout (width, height) {            // 通過跟蹤 y 坐標放置每個項目            var y = 0            placeables.forEach { placeable ->                placeable.placeRelative(x = 0, y = y)                // 按照所放置項目的高度增加 y 坐標值                y += placeable.height            }        }    }}

△自定義 Column

△VerticalGrid

@Composablefun VerticalGrid(    modifier: Modifier = Modifier,    columns: Int = 2,    content: @Composable () -> Unit) {    Layout(        content = content,         modifier = modifier    ) { measurables, constraints ->        val itemWidth = constraints.maxWidth / columns        // 通過 copy 函數保留傳遞下來的高度約束，但設置確定的寬度約束        val itemConstraints = constraints.copy (            minWidth = itemWidth,            maxWidth = itemWidth,        )                // 使用這些約束測量每個項目并將其轉換為 Placeable        val placeables = measurables.map { it.measure(itemConstraints) }        …    }}

△自定義 VerticalGrid

在該示例中，我們通過 copy 函數創建了新的約束。這種為子節點創建新約束的概念就是實現自定義測量邏輯的方式。創建不同約束來測量子節點的能力是此模型的關鍵，父節點與子節點之間并沒有協商機制，父節點會以 Constraints 的形式傳遞其允許子節點的尺寸范圍，只要子節點從該范圍中選擇了其尺寸，父節點必須接受并處理子節點。

這種設計的優點在于我們可以單遍測量整棵界面樹，并且禁止執行多個測量循環。這是 View 系統中存在的問題，嵌套結構執行多遍測量過程可能會讓葉子視圖上的測量次數翻倍，Compose 的設計能夠防止發生這種情況。實際上，如果您對某個項目進行兩次測量，Compose 會拋出異常:

△重復測量某個項目時 Compose 會拋出異常

布局動畫示例

△Jetsnack 應用中的自定義底部導航

@Composablefun BottomNavItem(    icon: @Composable BoxScope.() -> Unit,    text: @Composable BoxScope.() -> Unit,    @FloatRange(from = 0.0, to = 1.0) animationProgress: Float) {    Layout(        content = {            // 將 icon 和 text 包裹在 Box 中            // 這種做法能讓我們為每個項目設置 layoutId            Box(                modifier = Modifier.layoutId(“icon”)                content = icon            )            Box(                modifier = Modifier.layoutId(“text”)                content = text            )        }    ) { measurables, constraints ->        // 通過 layoutId 識別對應的 Measurable，比依賴項目的順序更可靠        val iconPlaceable = measurables.first {it.layoutId == “icon” }.measure(constraints)        val textPlaceable = measurables.first {it.layoutId == “text” }.measure(constraints)         // 將放置邏輯提取到另一個函數中以提高代碼可讀性        placeTextAndIcon(            textPlaceable,            iconPlaceable,            constraints.maxWidth,            constraints.maxHeight,            animationProgress        )    }} fun MeasureScope.placeTextAndIcon(    textPlaceable: Placeable,    iconPlaceable: Placeable,    width: Int,    height: Int,    @FloatRange(from = 0.0, to = 1.0) animationProgress: Float): MeasureResult {     // 根據動畫進度值放置文本和圖標    val iconY = (height - iconPlaceable.height) / 2    val textY = (height - textPlaceable.height) / 2     val textWidth = textPlaceable.width * animationProgress    val iconX = (width - textWidth - iconPlaceable.width) / 2    val textX = iconX + iconPlaceable.width     return layout(width, height) {        iconPlaceable.placeRelative(iconX.toInt(), iconY)        if (animationProgress != 0f) {            textPlaceable.placeRelative(textX.toInt(), textY)        }    }}

使用自定義布局的時機

當您遇到以下場景時，我們推薦使用自定義布局:

• 難以通過標準布局實現的設計。雖然可以使用足夠多的 Row 和 Column 構建大部分界面，但這種實現方式有時難以維護和升級；

• 需要非常精確地控制測量和放置邏輯；

• 需要實現布局動畫。我們正在開發可對放置進行動畫處理的新 API，未來可能不必自行編寫布局就能實現；

• 需要完全控制性能。下文會詳細介紹這一點。

修飾符分很多不同的類型，可以影響不同的行為，例如繪制修飾符 (DrawModifier)、指針輸入修飾符 (PointerInputModifier) 以及焦點修飾符 (FocusModifier)。本文我們將重點介紹布局修飾符 (LayoutModifier)，該修飾符提供了一個 measure 方法，該方法的作用與 Layout 可組合項基本相同，不同之處在于，它只作用于單個 Measurable 而不是 List，這是因為修飾符的應用對象是單個項目。在 measure 方法中，修飾符可以修改約束或者實現自定義放置邏輯，就像布局一樣。這表示您并不總是需要編寫自定義布局，如果只想對單個項目執行操作，則可以改用修飾符。

以 padding 修飾符為例，該工廠函數以修飾符鏈為基礎，創建能夠捕獲所需 padding 值的 PaddingModifier 對象。

fun Modifier.padding(all: Dp) =    this.then(PaddingModifier(            start = all,            top = all,            end = all,            bottom = all        )    ) private class PaddingModifier(    val start: Dp = 0.dp,    val top: Dp = 0.dp,    val end: Dp = 0.dp,    val bottom: Dp = 0.dp) : LayoutModifier { override fun MeasureScope.measure(        measurable: Measurable,        constraints: Constraints    ): MeasureResult {        val horizontal = start.roundToPx() + end.roundToPx()        val vertical = top.roundToPx() + bottom.roundToPx()         // 按 padding 尺寸收縮外部約束來修改測量        val placeable = measurable.measure(constraints.offset(-horizontal, -vertical))         val width = constraints.constrainWidth(placeable.width + horizontal)        val height = constraints.constrainHeight(placeable.height + vertical)        return layout(width, height) {                // 按所需的 padding 執行偏移以放置內容                placeable.placeRelative(start.roundToPx(), top.roundToPx())        }    }}

Box(Modifier            .background(Color.Gray)            .layout { measurable, constraints ->                // 通過修飾符在豎直方向添加 50 像素 padding 的示例                val padding = 50                val placeable = measurable.measure(constraints.offset(vertical = -padding))                layout(placeable.width, placeable.height + padding) {                    placeable.placeRelative(0, padding)                }            }        ) {            Box(Modifier.fillMaxSize().background(Color.DarkGray))}

△使用 Modifier.layout 實現布局

假設這個 Box 要放入最大尺寸為 200*300 像素的容器內，容器會將相應的約束傳入修飾符鏈的第一個修飾符中。fillMaxSize 實際上會創建一組新約束，并設置最大和最小寬度與高度，使之等于傳入的最大寬度與高度以便填充到最大值，在本例中是 200*300 像素。這些約束沿著修飾符鏈傳遞以測量下一個元素，wrapContentSize 修飾符會接受這些參數，它會創建新的約束來放寬對傳入約束的限制，從而讓內容測量其所需尺寸，也就是寬 0-200，高 0-300。這看起來只像是對 fillMax 步驟的反操作，但請注意，我們是使用這個修飾符實現項目居中的效果，而不是重設項目的尺寸。這些約束沿著修飾符鏈傳遞到 size 修飾符，該修飾符創建具體尺寸的約束來測量項目，指定尺寸應該正好是 50*50。最后，這些約束傳遞到 Box 的布局，它執行測量并將解析得到的尺寸 (50*50) 返回到修飾符鏈，size 修飾符因此也將其尺寸解析為 50*50，并據此創建放置指令。然后 wrapContent 解析其大小并創建放置指令以居中放置內容。因為 wrapContent 修飾符知道其尺寸為 200*300，而下一個元素的尺寸為 50*50，所以使用居中對齊創建放置指令，以便將內容居中放置。最后，fillMaxSize 解析其尺寸并執行放置操作。

修飾符鏈的執行方式與布局樹的工作方式非常相像，差異在于每個修飾符只有一個子節點，也就是鏈中的下一個元素。約束會向下傳遞，以便后續元素用其測量自身尺寸，然后返回解析得到的尺寸，并創建放置指令。該示例也說明了修飾符順序的重要性。通過使用修飾符對功能進行組合，您可以很輕松地將不同的測量和布局策略組合在一起。

高級功能

接下來將介紹布局模型的一些高級功能，雖然您不一定總是需要這些功能，但它們能夠幫助您構建更高級的功能。 固有特性測量 (Intrinsic Measurement)前文提到過，Compose 使用單遍布局系統。這個說法并不完全正確，布局并不總是能通過單遍操作就得以完成，有時我們也需要了解有關子節點尺寸的信息才能最終確定約束。 以彈出式菜單為例。假設有一個包含五個菜單項的 Column，如下圖所示，它的顯示基本上是正常的，但是可以看到，每個菜單項的尺寸卻不相同。
△菜單項的尺寸不相同
我們很容易想到，讓每個菜單項都占用允許的最大尺寸即可
:
△每個菜單項都占有允許的最大尺寸

但這么做也沒能完全解決問題，因為菜單窗口會擴大到其最大尺寸。有效的解決方法是使用最大固有寬度來確定尺寸:

△使用最大固有寬度來確定尺寸

這里確定了 Column 會盡力為每個子節點提供所需的空間，對 Text 而言，其寬度是單行渲染全部文本所需的寬度。在確定固有尺寸后，將使用這些值設置 Column 的尺寸，然后，子節點就可以填充 Column 的寬度了。

如果使用最小值而非最大值，又會發生什么呢？

ParentData

到目前為止，我們看到的修飾符都是通用修飾符，也就是說，它們可以應用于任何可組合項。有時，您的布局提供的一些行為可能需要從子節點獲得一些信息，這便要用到 ParentDataModifier。

△在 BoxScope 中可以改用 Align 修飾符來定位內容

Align 是一個 ParentDataModifier 而不是我們之前看到的那種布局修飾符，因為它只是向其父節點傳遞一些信息，所以如果不在 Box 中，該修飾符便不可用。它包含的信息將提供給父 Box，以供其設置子布局。

△需要實現設計圖中的圖標和文本對齊

Row {    Icon(modifier = Modifier        .size(10. dp)        .align(Alignment.CenterVertically)    )    Text(modifier = Modifier        .padding(start = 8.dp)        .align(Alignment.CenterVertically)    )}

△有問題的對齊實現

我們可以通過以下代碼進行修復:

Row {    Icon(modifier = Modifier        .size(10. dp)        .alignBy { it.measuredHeight }    )    Text(modifier = Modifier        .padding(start = 8.dp)        .alignByBaseline()    )}

首先，對 Text 使用 alignByBaseline 修飾符。而圖標既沒有基線，也沒有其他對齊線，我們可以使用 alignBy 修飾符讓圖標對齊到我們需要的任何位置。在本例中，我們知道圖標的底部是對齊的目標位置，因此將圖標的底部進行對齊。最終便實現了期望的效果:

△圖標底部與文本基線完美對齊

由于對齊功能會穿過父節點，因此，處理嵌套對齊時，只需設置父節點的對齊線，它會從子節點獲取相應的值。如下例所示:

△未設置對齊的嵌套布局

△通過父節點設置對齊線

您甚至可以在自定義布局中創建自己的自定義對齊，從而允許其他可組合項對齊到它。

BoxWithConstraints

BoxWithConstraints 是一個功能強大且很實用的布局。在組合中，我們可以根據條件使用邏輯和控制流來選擇要顯示的內容，但是，有時候可能希望根據可用空間的大小來決定布局內容。

從前文中我們知道，尺寸信息直到布局階段才可用，也就是說，這些信息一般無法在組合階段用來決定要顯示的內容。此時 BoxWithConstraints 便派上用場了，它與 Box 類似，但它將內容的組合推遲到布局階段，此時布局信息已經可用了。BoxWithConstraints 中的內容在接收器作用域內排布，布局階段確定的約束將通過該作用域公開為像素值或 DP 值。

@Composablefun BoxWithConstraints(        ...        content: @Composable BoxWithConstraintsScope.() -> Unit) // BoxWithConstraintsScope 公開布局階段確定的約束interface BoxWithConstraintsScope : BoxScope {    val constraints: Constraints    val minWidth: Dp    val maxWidth: Dp    val minHeight: Dp    val maxHeight: Dp}

△BoxWithConstraints 和 BoxWithConstraintsScope

它內部的內容可以使用這些約束來選擇要組合的內容。例如，根據最大寬度選擇不同的呈現方式:

@Composablefun MyApp(...) {    BoxWithConstraints() { // this: BoxWithConstraintsScope        when {            maxWidth < 400.dp -> CompactLayout()            maxWidth < 800.dp -> MediumLayout()            else -> LargeLayout()        }    }}

性能

盡量避免重組

△Jetsnack 應用中產品詳情頁的協調滾動效果

這個產品詳情頁包含協調滾動效果，頁面上的一些元素根據滾動操作進行移動或縮放。請注意標題區域，這個區域會隨著頁面內容而滾動，最后固定在屏幕的頂部。

@Composablefun SnackDetail(...) {    Box {        val scroll = rememberScrollState(0)        Body(scroll)        Title(scroll = scroll.value)        ...    }} @Composablefun Body(scroll: ScrollState) {    Column(modifier = Modifier.verticalScroll(scroll)) {        …    }}

為了實現此效果，我們將不同元素作為獨立的可組合項疊放在一個 Box 中，提取滾動狀態并將其傳入 Body 組件。Body 會使用滾動狀態進行設置以使內容能夠垂直滾動。在 Title 等其他組件中可以觀察滾動位置，而我們的觀察方式會對性能產生影響。例如，使用最直接的實現，簡單地使用滾動值對內容進行偏移:

@Composablefun Title(scroll: Int) {    Column(        modifier = Modifier.offset(scroll)    ) {        …    }}

@Composablefun Title(scrollProvider: () -> Int) {    Column(        modifier = Modifier.offset {            val scroll = scrollProvider()            val offset = (maxOffset - scroll).coerceAtLeast(minOffset)            IntOffset(x = 0, y = offset)        }    ) {        …    }}

△使用提供滾動位置的函數代替原始滾動位置

這時，我們可以在不同的時間只調用此 Lambda 函數并讀取滾動狀態。這里使用了 offset 修飾符，它接受能提供偏移值的 Lambda 函數作為參數。這意味著在滾動發生變化時，不需要重新創建修飾符，只在放置階段才會讀取滾動狀態的值。所以，當滾動狀態變化時我們只需要執行放置和繪制操作，不需要重組或測量，因此能夠提高性能。

@Composablefun BottomNavItem(    icon: @Composable BoxScope.() -> Unit,    text: @Composable BoxScope.() -> Unit,    animationProgress: () -> Float) {    …     val progress = animationProgress()     val textWidth = textPlaceable.width * progress    val iconX = (width - textWidth - iconPlaceable.width) / 2    val textX = iconX + iconPlaceable.width     return layout(width, height) {        iconPlaceable.placeRelative(iconX.toInt(), iconY)        if (animationProgress != 0f) {            textPlaceable.placeRelative(textX.toInt(), textY)        }    }}

△修正后的底部導航

BoxWithConstraints 可以根據布局執行組合，是因為它會在布局階段啟動子組合。出于性能考慮，我們希望盡量避免在布局期間執行組合。因此，相較于 BoxWithConstraints，我們傾向于使用會根據尺寸更改的布局。當信息類型隨尺寸更改時才使用 BoxWithConstraints。

提高布局性能

有時候，布局不需要測量其所有子節點便可獲知自身大小。舉個例子，有如下構成的卡片:

圖標和標題構成標題欄，剩下的是正文。已知圖標大小為固定值，標題高度與圖標高度相同。測量卡片時，就只需要測量正文，它的約束就是布局高度減去 48 DP，卡片的高度則為正文的高度加上 48 DP。

△放置過程測量圖標和文本

△標題發生變化時不必重新測量

在本文中，我們介紹了自定義布局的實現過程，還使用修飾符構建和合并布局行為，進一步降低了滿足確切功能需求的難度。此外，還介紹了布局系統的一些高級功能，例如跨嵌套層次結構的自定義對齊，為自有布局創建自定義 ParentDataModifier，支持自動從右向左設置，以及將組合操作推遲到布局信息已知時，等等。我們還了解如何執行單遍布局模型，如何跳過重新測量以使其只執行重新放置操作的方法，熟練使用這些方法，您將能編寫出通過手勢進行動畫處理的高性能布局邏輯。

對布局系統的理解能夠幫助您構建滿足確切設計需求的布局，從而創建用戶喜愛的優秀應用。

原文標題：深度解析 Jetpack Compose 布局