本頁面由 Cloud Translation API 翻譯而成。

應用程式列

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

類型	外觀	目的
頂端應用程式列	螢幕頂端。	提供重要工作和資訊的存取權。一般會代管標題、核心操作項目和特定導覽項目。
底部應用程式列	螢幕底部。	通常包含核心導覽項目。也可能提供其他按鍵動作的存取權，例如透過包含的懸浮動作按鈕。

頂端和底部應用程式列範例。 — **圖 1** 頂端應用程式列 (左側) 和底部應用程式列 (右側)。

如要實作頂端應用程式列和底部應用程式列，請分別使用 TopAppBar 和 BottomAppBar 可組合項。您可以運用這些 API，建立一致的介面來封裝導覽和動作控制項，並符合質感設計原則。

頂端應用程式列

下表概略說明頂端應用程式列的四種類型：

類型	範例
小：適用於不需要進行大量導覽或動作的螢幕。
置中對齊：適用於設有單一主要動作的螢幕。
中等：適用於需要中等瀏覽和動作的螢幕。
大型：適用於需要大量導覽和動作的螢幕。

API 介面

允許實作四個不同的頂端應用程式列的各種可組合項都很類似。這些函式共用多個重要參數：

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

捲動行為

您可以控制當使用者捲動特定 Scaffold 內部內容時，應用程式列的回應方式。方法是建立 TopAppBarScrollBehavior 的執行個體，然後將其傳送至 scrollBehavior 參數的頂端應用程式列。

TopAppBarScrollBehavior 分為三種類型。如下所示：

enterAlwaysScrollBehavior：使用者啟動 Scaffold 的內部內容時，頂端應用程式列就會收合。當使用者向下捲動內部內容時，應用程式列會展開。
exitUntilCollapsedScrollBehavior：與 enterAlwaysScrollBehavior 類似，不過當使用者瀏覽到 Scaffold 內部內容時，應用程式列會另外展開。
pinnedScrollBehavior：應用程式列會保持原位，不會對捲動做出回應。

下列範例實作了這些選項中的幾種。

範例

以下各節提供四種頂端應用程式列的實作方式，包括說明如何控制捲動行為的各種範例。

小

如要建立小型的頂端應用程式列，請使用 TopAppBar 可組合函式。這是最簡單的頂端應用程式列，本範例僅包含標題。

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

@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

此實作方式如下：

置中對齊

置中對齊的頂端應用程式列基本上與小型應用程式列相同，但標題在元件中會置中。如要實作，請使用專屬的 CenterAlignedTopAppBar 可組合項。

此範例使用 enterAlwaysScrollBehavior() 來取得針對 scrollBehavior 傳遞的值。因此，當使用者捲動 Scaffold 的內部內容時，工具列就會收合。

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    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.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

此實作方式如下：

媒介

中型頂端應用程式列會將標題放在任何其他圖示下方，如要建立按鈕，請使用 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.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 傳遞的值。因此，當使用者捲動 Scaffold 的內部內容時，列會收合，但當使用者捲動至內部內容的結尾時，列就會展開。

@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.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

此實作方式如下：

底部應用程式列

如要建立底部應用程式列，請使用 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

此實作方式如下：

應用程式列

頂端應用程式列

API 介面

捲動行為

範例

小

置中對齊

媒介

大

底部應用程式列

其他資源