Compose 版面配置基本概念

Jetpack Compose 可讓您在設計及建構應用程式 UI 時更加得心應手。撰寫 透過以下方式，將狀態轉換為 UI 元素：

1. 組合元素
2. 安排元素的版面配置
3. 繪製元素

本文件將重點放在元素的版面配置，說明部分建築物 Compose 提供的區塊內容可協助您安排 UI 元素的版面配置。

Compose 的版面配置目標

Jetpack Compose 導入版面配置系統有兩個主要目標：

• 提高效能
• 輕鬆編寫自訂版面配置

，瞭解如何調查及移除這項存取權。

注意： 使用 Android View 系統時，您可能會遇到一些效能問題 建立巢狀結構的特定 View (例如 RelativeLayout) 時。自 Compose 以來 可避免進行多次測量，您可視需要建立深層巢狀結構， 對效能的影響。

可組合函式的基本概念

可組合函式是 Compose 的基本構成要素。可組合項 函式是會發出 Unit 的函式，用於描述使用者介面的部分元件。 函式會接收部分輸入內容，並產生畫面上顯示的內容。如要 如需可組合項的相關資訊，請參閱 Compose 心理 模型說明文件。

可組合函式可能會輸出多個 UI 元素。不過，如果您不 提供如何安排這些元件的指引，Compose 可能會安排 將元素調整到理想的效果舉例來說，此程式碼會產生兩組文字 元素：

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}
LayoutBasicsSnippets.kt

如果沒有提供想要的排列方式，Compose 會堆疊文字元素 以致於無法閱讀

Compose 提供一系列現成可用的版面配置，協助您安排 UI 元素，可讓您輕鬆定義專屬於自己的版面配置。

標準版面配置元件

在多數情況下，您可以直接使用 Compose 的標準版面配置 元素。

使用 Column敬上 將項目垂直排列在畫面上

@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}
LayoutBasicsSnippets.kt

同樣地，請使用 Row敬上 將項目橫向排列在畫面上Column 和 Row 都支援 設定元素所含元素的對齊設定

@Composable
fun ArtistCardRow(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}
LayoutBasicsSnippets.kt

如要將元素放在另一個元素上，請使用 Box。Box 也支援所含元素的特定對齊設定。

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}
LayoutBasicsSnippets.kt

您通常只需要使用這些建構區塊。您可以自行編寫可組合函式，將這些版面配置結合成更精巧的版面配置，以符合應用程式的需求。

注意： Compose 可有效處理具有巢狀結構的版面配置，因此是 設計複雜的 UI這與 Android View 的改進 因此，請避免使用巢狀版面配置。

如要在 Row 內設定子項的位置，請設定 horizontalArrangement 和 verticalAlignment 引數。如果是 Column，請設定 verticalArrangement 和 horizontalAlignment 引數：

@Composable
fun ArtistCardArrangement(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

版面配置模型

在版面配置模型中，UI 樹狀結構是透過單次傳遞完成配置。每個節點 首先會要求自己測量體溫，接著以遞迴方式測量任何子項 大小則限制為子項系統會設定分葉節點的大小 並將解析後的大小和刊登位置指示傳回 。

簡單來說，爸媽的測量結果是孩子掌握孩子前，但設定大小和位置的順序則是 他們的孩子。

我們來深入分析下列 SearchResult 函式。

@Composable
fun SearchResult() {
    Row {
        Image(
            // ...
        )
        Column {
            Text(
                // ...
            )
            Text(
                // ...
            )
        }
    }
}
LayoutBasicsSnippets.kt

這個函式會產生以下 UI 樹狀結構。

SearchResult
  Row
    Image
    Column
      Text
      Text

在 SearchResult 範例中，系統會按照以下順序安排 UI 樹狀結構的版面配置：

1. 系統要求根節點 Row 進行測量。
2. 根節點 Row 要求其第一個子項 Image 進行測量。
3. Image 是分葉節點 (也就是不含任何子項)，因此會回報大小 並傳回刊登位置指示
4. 根節點 Row 要求其第二個子項 Column 進行測量。
5. Column 節點要求其第一個 Text 子項進行測量。
6. 第一個 Text 節點是分葉節點，因此會回報大小並傳回 刊登位置指示
7. Column 節點要求其第二個 Text 子項進行測量。
8. 第二個 Text 節點是分葉節點，因此會回報大小並傳回 刊登位置指示
9. Column 節點完成測量並設定其子項的大小和位置後， 可以決定自己的大小和刊登位置
10. 根節點 Row 完成測量並設定其子項的大小和位置後， 可以決定自己的大小和刊登位置

成效

Compose 僅會測量子項一次，藉此提升效能。單通道 測量有助於提升效能，讓 Compose 能有效處理深度作業 UI 樹狀結構。如果元素測量其子項兩次，而該子項分別測量 其子項兩次 (以此類推)，如果一次嘗試配置整個 UI，則 必須處理大量工作 因此很難維持應用程式效能

如果版面配置基於某個原因需要多次測量，Compose 會提供 特殊系統，也就是「內建測量指標」。你可以進一步瞭解這項功能 Compose 中的內建函式測量資料 版面配置。

由於測量和位置是版面配置傳遞的不同子階段，因此任何 只影響項目刊登位置 (而非評估) 的變更可以執行 。

在版面配置中使用修飾符

如「Compose 修飾符」一文中所述，您可以使用 修飾符來裝飾或擴增可組合項。修飾符為必要項目 自訂版面配置舉例來說，我們在此透過鏈結 自訂 ArtistCard：

@Composable
fun ArtistCardModifiers(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        ) { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

請注意，以上程式碼將多個不同的修飾符函式搭配使用。

• clickable 會讓可組合項對使用者輸入內容產生回應並顯示漣漪效果。
• padding 會在元素周圍放置空格。
• fillMaxWidth 提供可組合的父項寬度上限。
• size() 會指定元素的偏好寬度和高度。

，瞭解如何調查及移除這項存取權。

注意： 除此之外，修飾符所扮演的角色類似於版面配置 參數。不過，因為有時修飾符 服務等級目標，不僅提供類型安全功能，還可協助您發掘 瞭解特定版面配置的可用情形和適用情形。使用 XML 因此有時很難確認特定版面配置屬性 指定的 ANR 事件。

可捲動版面配置

如要進一步瞭解可捲動版面配置，請前往 Compose 手勢說明文件。

如需各種清單和 Lazy 清單，請參閱 Compose 清單說明文件。

回應式版面配置

設計版面配置時應將不同螢幕方向納入考量 和板型規格大小Compose 提供一些內建機制 協助您配合各種螢幕設定調整可組合的版面配置。

限制

想知道來自父項的限制，並設計版面配置 因此，您可以使用 BoxWithConstraints。衡量標準 限制條件 都可以在內容 lambda 的範圍中取得你可以使用這些測量指標 針對不同的螢幕設定組合不同版面配置的限制：

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("My minHeight is $minHeight while my maxWidth is $maxWidth")
    }
}
LayoutBasicsSnippets.kt

以版位為基礎的版面配置

Compose 提供多種以 Material 為基礎的可組合項 使用 androidx.compose.material:material 依附元件 (在建立 Android Studio 中的 Compose 專案)，讓您輕鬆建構 UI。元素按讚數 Drawer、 FloatingActionButton, 和 TopAppBar 全都提供。

Material 元件會大量利用「Slot API」，Compose 會採用這個模式 將自訂圖層導入可組合項上方這個做法讓 因為這類元件接受可進行設定的子元素 而不必公開子項的每個設定參數 版位會在 UI 中留下空白空間，讓開發人員視需要填入項目。適用對象 這些是您可在版位中自訂的版位 TopAppBar：

可組合項通常會採用 content 可組合 lambda ( content: @Composable () -> Unit)。Slot API 會公開特定用途的多個 content 參數。 舉例來說，您可以利用 TopAppBar 提供 title 的內容， navigationIcon和actions。

例如： Scaffold敬上 可讓您使用基本的質感設計版面配置結構來實作使用者介面。 Scaffold 為最常見的頂層 Material 元件提供版位。 例如 TopAppBar BottomAppBar, FloatingActionButton、 和 Drawer。使用 Scaffold，您可以輕鬆確保這些元件的位置正確 因此

@Composable
fun HomeScreen(/*...*/) {
    ModalNavigationDrawer(drawerContent = { /* ... */ }) {
        Scaffold(
            topBar = { /*...*/ }
        ) { contentPadding ->
            // ...
        }
    }
}
LayoutBasicsSnippets.kt