顯示底部應用程式列

建立底部應用程式列,協助使用者瀏覽及存取應用程式中的函式。請按照這份指南的說明,使用 BottomAppBar 可組合函式,將底部應用程式列新增至應用程式。

版本相容性

這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。

依附元件

建立底部應用程式列

使用下列程式碼建立底部應用程式列,其中包含四個圖示按鈕和一個浮動動作按鈕:

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}

程式碼的重點

  • 具有 bottomBar 集合的外部 Scaffold
  • 包含動作清單的 bottomBar 實作項目。
  • 這些動作是 IconButton 的實作項目,其中包含圖片和內容說明文字的 Icon,每個動作都含有 onClick lambda 來執行這些動作。

您可以為下列主要參數傳遞可組合項:

  • actions:一系列顯示在列左側的圖示。這些通常是特定畫面的關鍵動作,或導覽項目。
  • floatingActionButton:在列右側顯示的懸浮動作按鈕。

結果

 底部應用程式列範例
圖 1. 底部應用程式列範例。

包含此指南的集合

本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:

瞭解如何使用標準化平台建構複雜的使用者介面。這個結構體會將 UI 的不同部分結合在一起,讓應用程式呈現一致的外觀和風格。
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。

有問題或意見回饋嗎?

請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。