應用程式列

應用程式列是一種容器，可讓使用者存取主要功能，並 導覽項目。應用程式列分為兩種類型：頂端應用程式列和底部應用程式 格。兩者的外觀和用途如下：

類型

外觀

目的

頂端應用程式列

畫面頂端。

可讓你存取重要工作和資訊。通常代管標題、核心操作項目和特定導覽項目，

底部應用程式列

在畫面底部。

通常包含核心導覽項目。可能還提供其他按鍵動作的存取權，例如透過內含的懸浮動作按鈕。
頂端和底部應用程式列的範例。
圖 1. 頂端應用程式列 (左) 和底部應用程式列 (右圖)。

如要實作頂端應用程式列和底部應用程式列，請使用 TopAppBar 和 BottomAppBar 可組合函式。可讓你 用於封裝導覽和動作控制項的介面， 與 Material Design 原則相輔相成

頂端應用程式列

下表列出頂端應用程式列的四種類型：

類型

範例

小：適用於不需要大量導覽或動作的畫面。

 小型頂端應用程式列

置中對齊：適用於含有單一主要動作的螢幕。

 置中對齊頂端應用程式列

中型：適用於需要適度導覽和動作的螢幕。

 中型頂端應用程式列

大型：適用於需要大量導覽和動作的螢幕。

 大型頂端應用程式列

API 介面

各種可組合函式，可讓您實作四個不同的頂端應用程式 長條也都很類似這些指南共用幾個重要參數：

  • title：顯示在應用程式列上的文字。
  • navigationIcon：導覽的主要圖示。出現在 圖示。
  • actions：讓使用者存取重要動作的圖示。會顯示 在應用程式列右側
  • scrollBehavior：決定頂端應用程式列如何回應捲動畫面 顯示 Scaffold 的內部內容
  • colors：決定應用程式列的顯示方式。

捲動行為

您可以控制應用程式列在使用者捲動畫面 Sscaffold 的內部內容。方法是建立 TopAppBarScrollBehavior，並傳遞至 scrollBehavior 參數。

TopAppBarScrollBehavior 分為三種類型。方法如下：

  • enterAlwaysScrollBehavior：使用者舉起 Scaffold 內部畫面時 即可收合頂端應用程式列當使用者接著 收合內部內容
  • exitUntilCollapsedScrollBehavior：和 enterAlwaysScrollBehavior 類似， 但應用程式列會在使用者抵達底部時額外展開 Sscaffold 的內部內容。
  • pinnedScrollBehavior：應用程式列會保持原樣，且不會回應 以及使用文字。

下列範例實作這些選項。

範例

以下各節將介紹四種不同類型的實作 頂端應用程式列，包括各種範例，說明如何控制捲動行為。

小

如要建立小型頂端應用程式列，請使用 TopAppBar 可組合項。這是 最簡單的頂端應用程式列，在本例中，只有一個標題。

以下範例不會針對 TopAppBar 傳遞值 scrollBehavior，因此不會回應內部的捲動 內容。

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

實作內容如下所示：

小型頂端應用程式列範例。
圖 2. 小型頂端應用程式列。

置中對齊

置中對齊的頂端應用程式列與小型應用程式列相同 但標題位於元件中央如要實作，請使用 專屬的 CenterAlignedTopAppBar 可組合函式。

這個範例使用 enterAlwaysScrollBehavior() 來取得其傳遞的值 (scrollBehavior)。因此，當使用者捲動 Sscaffold 的內部內容。

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

實作內容如下所示：

在這裡輸入替代文字
圖 3. 置中對齊的頂端應用程式列。

中

中型頂端應用程式列會將標題放在其他圖示下方。如要建立 第一種是使用 MediumTopAppBar 可組合函式。

與上一個程式碼片段一樣，這個範例使用 enterAlwaysScrollBehavior() 來 取得本身為 scrollBehavior 傳遞的值。

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

此實作看起來會如下所示，並示範捲動方式 enterAlwaysScrollBehavior()的行為會顯示：

圖 4.置中對齊的頂端應用程式列。

大

大型頂端應用程式列與中型類似，但邊框間距 圖示和圖示會較大，而且整體畫面會佔用較多空間。目的地： 方法是使用 LargeTopAppBar 可組合函式。

與上述程式碼片段不同 exitUntilCollapsedScrollBehavior() 以取得其傳遞的值 scrollBehavior。因此，當使用者捲動 並會在使用者捲動至底部時展開 展開內部內容

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

實作內容如下所示：

應用程式畫面，底部應用程式列的左側持續顯示動作圖示，右側則有懸浮動作按鈕。
圖 5. 大型頂端應用程式列的實作範例。

底部應用程式列

如要建立底部應用程式列，請使用 BottomAppBar 可組合函式。使用此應用程式 可組合函式與頂端應用程式列的可組合函式非常相似，如 前面的章節您將針對下列鍵傳遞可組合函式 參數：

  • actions：顯示在分頁標籤列左側的一系列圖示。這些 通常是所選畫面或導覽項目的主要動作。
  • floatingActionButton：顯示在畫面上的懸浮動作按鈕 那就好。

@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."
        )
    }
}
AppBar.kt

實作內容如下所示：

應用程式畫面，底部應用程式列的左側持續顯示動作圖示，右側則有懸浮動作按鈕。
圖 6. 底部應用程式列的實作範例。
，瞭解如何調查及移除這項存取權。

其他資源