應用程式列

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

類型

外觀

目的

頂端應用程式列

畫面頂端。

提供存取重要工作和資訊的權限。通常會顯示標題、核心動作項目和特定導覽項目。

底部應用程式列

橫跨螢幕底部。

通常包含核心導覽項目。也可能提供其他重要動作的存取權，例如透過內含的懸浮動作按鈕。
頂部和底部應用程式列範例。
圖 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

此實作方式如下所示：

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

置中對齊

置中對齊的頂端應用程式列與小型應用程式列大致相同，但標題會置中顯示在元件中。如要實作此功能，請使用專用的 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

此實作方式如下所示：

請在這裡輸入替代文字
圖 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. 底部應用程式列的實作範例。

其他資源