Jetpack Compose基礎(chǔ)知識科普

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

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

布局模型

Jetpack Compose 可將狀態(tài)轉(zhuǎn)換為界面，這個過程分為三步:組合、布局、繪制。組合階段執(zhí)行可組合函數(shù)，這些函數(shù)可以生成界面，從而創(chuàng)建界面樹。例如，下圖中的 SearchResult 函數(shù)會生成對應(yīng)的界面樹:

其過程簡述如下:

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

Layout 可組合項(xiàng)

@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 測量和放置項(xiàng)目   }}

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

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

△Constraints

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

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

自定義布局示例

MyColumn 示例

@Composablefun MyColumn(    modifier: Modifier = Modifier,    content: @Composable () -> Unit) {    Layout(         modifier = modifier,         content = content    ) { measurables, constraints ->        // 測量每個項(xiàng)目并將其轉(zhuǎn)換為 Placeable        val placeables = measurables.map { measurable ->            measurable.measure(constraints)        }        // Column 的高度是所有項(xiàng)目所測得高度之和        val height = placeables.sumOf { it.height }        // Column 的寬度則為內(nèi)部所含最寬項(xiàng)目的寬度        val width = placeables.maxOf { it.width }        // 報告所需的尺寸        layout (width, height) {            // 通過跟蹤 y 坐標(biāo)放置每個項(xiàng)目            var y = 0            placeables.forEach { placeable ->                placeable.placeRelative(x = 0, y = y)                // 按照所放置項(xiàng)目的高度增加 y 坐標(biāo)值                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 函數(shù)保留傳遞下來的高度約束，但設(shè)置確定的寬度約束        val itemConstraints = constraints.copy (            minWidth = itemWidth,            maxWidth = itemWidth,        )                // 使用這些約束測量每個項(xiàng)目并將其轉(zhuǎn)換為 Placeable        val placeables = measurables.map { it.measure(itemConstraints) }        …    }}

△自定義 VerticalGrid

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

這種設(shè)計(jì)的優(yōu)點(diǎn)在于我們可以單遍測量整棵界面樹，并且禁止執(zhí)行多個測量循環(huán)。這是 View 系統(tǒng)中存在的問題，嵌套結(jié)構(gòu)執(zhí)行多遍測量過程可能會讓葉子視圖上的測量次數(shù)翻倍，Compose 的設(shè)計(jì)能夠防止發(fā)生這種情況。實(shí)際上，如果您對某個項(xiàng)目進(jìn)行兩次測量，Compose 會拋出異常:

△重復(fù)測量某個項(xiàng)目時 Compose 會拋出異常

布局動畫示例

△Jetsnack 應(yīng)用中的自定義底部導(dǎo)航

@Composablefun BottomNavItem(    icon: @Composable BoxScope.() -> Unit,    text: @Composable BoxScope.() -> Unit,    @FloatRange(from = 0.0, to = 1.0) animationProgress: Float) {    Layout(        content = {            // 將 icon 和 text 包裹在 Box 中            // 這種做法能讓我們?yōu)槊總€項(xiàng)目設(shè)置 layoutId            Box(                modifier = Modifier.layoutId(“icon”)                content = icon            )            Box(                modifier = Modifier.layoutId(“text”)                content = text            )        }    ) { measurables, constraints ->        // 通過 layoutId 識別對應(yīng)的 Measurable，比依賴項(xiàng)目的順序更可靠        val iconPlaceable = measurables.first {it.layoutId == “icon” }.measure(constraints)        val textPlaceable = measurables.first {it.layoutId == “text” }.measure(constraints)         // 將放置邏輯提取到另一個函數(shù)中以提高代碼可讀性        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 {     // 根據(jù)動畫進(jìn)度值放置文本和圖標(biāo)    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)        }    }}

使用自定義布局的時機(jī)

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

• 難以通過標(biāo)準(zhǔn)布局實(shí)現(xiàn)的設(shè)計(jì)。雖然可以使用足夠多的 Row 和 Column 構(gòu)建大部分界面，但這種實(shí)現(xiàn)方式有時難以維護(hù)和升級；

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

• 需要實(shí)現(xiàn)布局動畫。我們正在開發(fā)可對放置進(jìn)行動畫處理的新 API，未來可能不必自行編寫布局就能實(shí)現(xiàn)；

• 需要完全控制性能。下文會詳細(xì)介紹這一點(diǎn)。

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

以 padding 修飾符為例，該工廠函數(shù)以修飾符鏈為基礎(chǔ)，創(chuàng)建能夠捕獲所需 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 執(zhí)行偏移以放置內(nèi)容                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 實(shí)現(xiàn)布局

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

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

高級功能

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

但這么做也沒能完全解決問題，因?yàn)椴藛未翱跁U(kuò)大到其最大尺寸。有效的解決方法是使用最大固有寬度來確定尺寸:

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

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

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

ParentData

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

△在 BoxScope 中可以改用 Align 修飾符來定位內(nèi)容

Align 是一個 ParentDataModifier 而不是我們之前看到的那種布局修飾符，因?yàn)樗皇窍蚱涓腹?jié)點(diǎn)傳遞一些信息，所以如果不在 Box 中，該修飾符便不可用。它包含的信息將提供給父 Box，以供其設(shè)置子布局。

△需要實(shí)現(xiàn)設(shè)計(jì)圖中的圖標(biāo)和文本對齊

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

△有問題的對齊實(shí)現(xiàn)

我們可以通過以下代碼進(jìn)行修復(fù):

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

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

△圖標(biāo)底部與文本基線完美對齊

由于對齊功能會穿過父節(jié)點(diǎn)，因此，處理嵌套對齊時，只需設(shè)置父節(jié)點(diǎn)的對齊線，它會從子節(jié)點(diǎn)獲取相應(yīng)的值。如下例所示:

△未設(shè)置對齊的嵌套布局

△通過父節(jié)點(diǎn)設(shè)置對齊線

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

BoxWithConstraints

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

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

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

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

性能

盡量避免重組

△Jetsnack 應(yīng)用中產(chǎn)品詳情頁的協(xié)調(diào)滾動效果

這個產(chǎn)品詳情頁包含協(xié)調(diào)滾動效果，頁面上的一些元素根據(jù)滾動操作進(jìn)行移動或縮放。請注意標(biāo)題區(qū)域，這個區(qū)域會隨著頁面內(nèi)容而滾動，最后固定在屏幕的頂部。

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

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

@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)        }    ) {        …    }}

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

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

@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)        }    }}

△修正后的底部導(dǎo)航

BoxWithConstraints 可以根據(jù)布局執(zhí)行組合，是因?yàn)樗鼤诓季蛛A段啟動子組合。出于性能考慮，我們希望盡量避免在布局期間執(zhí)行組合。因此，相較于 BoxWithConstraints，我們傾向于使用會根據(jù)尺寸更改的布局。當(dāng)信息類型隨尺寸更改時才使用 BoxWithConstraints。

提高布局性能

有時候，布局不需要測量其所有子節(jié)點(diǎn)便可獲知自身大小。舉個例子，有如下構(gòu)成的卡片:

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

△放置過程測量圖標(biāo)和文本

△標(biāo)題發(fā)生變化時不必重新測量

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

對布局系統(tǒng)的理解能夠幫助您構(gòu)建滿足確切設(shè)計(jì)需求的布局，從而創(chuàng)建用戶喜愛的優(yōu)秀應(yīng)用。

原文標(biāo)題：深度解析 Jetpack Compose 布局