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

應用程式列

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

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

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

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

頂端應用程式列

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

類型	範例
小型：適用於不需要太多導覽或操作的畫面。
置中對齊：適用於只有單一主要動作的畫面。
中型：適用於需要適度導覽和動作的螢幕。
大型：適用於需要大量導覽和動作的螢幕。

API 介面

可讓您實作四種不同頂端應用程式列的各種可組合項相當相似。這兩種方法共用以下幾個重要參數：

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

捲動行為

您可以控制使用者捲動指定結構體內部內容時，應用程式列的回應方式。如要這麼做，請建立 TopAppBarScrollBehavior 的例項，並將其傳遞至頂端應用程式列的 scrollBehavior 參數。

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

enterAlwaysScrollBehavior：當使用者向上拉取結構區塊的內部內容時，頂端應用程式列會收合。當使用者向下提取內部內容時，應用程式列會展開。
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 傳遞的值。因此，當使用者捲動結構體內部內容時，列會收起。

@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

此實作方式如下所示：

中

中型頂端應用程式列會將標題放在其他圖示下方。如要建立這類存放區，請使用 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

此實作方式如下所示：

底部應用程式列

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

捲動行為

範例

小

置中對齊

中

大

底部應用程式列

其他資源