應用程式列是容器，可讓使用者存取主要功能和導覽項目。應用程式列分為兩種類型，頂端應用程式列和底部應用程式列。各自的外觀和用途如下：
類型 |
外觀 |
目的 |
|---|---|---|
頂端應用程式列 |
畫面頂端。 |
提供存取重要工作和資訊的權限。通常會顯示標題、核心動作項目和特定導覽項目。 |
底部應用程式列 |
在畫面底部。 |
通常包含核心導覽項目。也可能提供其他重要動作的存取權，例如透過內含的懸浮動作按鈕。 |
如要實作頂端應用程式列和底部應用程式列，請分別使用 TopAppBar 和 BottomAppBar 可組合函式。可讓您建立一致介面，用於封裝導覽和動作控制項，且符合質感設計原則。
頂端應用程式列
下表列出四種頂端應用程式列類型：
類型 |
範例 |
|---|---|
小型：適用於不需要太多導覽或操作的畫面。 |
|
置中對齊：適用於只有單一主要動作的畫面。 |
|
中等：適用於需要中等程度導覽和操作的畫面。 |
|
大型：適用於需要大量導覽和動作的螢幕。 |
|
API 介面
可讓您實作四種不同頂端應用程式列的各種可組合項相當相似。這些指南共用幾個重要參數：
title：應用程式列上顯示的文字。navigationIcon：導覽的主要圖示。顯示在應用程式列的左側。actions：可讓使用者存取重要動作的圖示。會顯示在應用程式列的右側。scrollBehavior：決定頂端應用程式列如何回應 Scaffold 內部內容的捲動動作。colors：決定應用程式列的顯示方式。
捲動行為
您可以控制使用者捲動特定 Scaffold 內部內容時應用程式列的回應方式。如要這麼做，請建立 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)
}
}
此實作方式如下所示：
置中對齊
置中對齊的頂端應用程式列與小型應用程式列大致相同，但標題在元件中置中。如要實作此功能，請使用專用的 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)
}
}
此實作方式如下所示：
中
中型頂端應用程式列會將標題放在其他圖示下方。如要建立這類存放區，請使用 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)
}
}
實作方式如下所示，並示範 enterAlwaysScrollBehavior() 的捲動行為如何顯示：
大
頂端應用程式列的大型版面與中型版面相似，但標題和圖示之間的邊框間距較大，整體上會佔用較多畫面空間。如要建立一個，請使用 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)
}
}
此實作方式如下所示：
底部應用程式列
如要建立底部應用程式列，請使用 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."
)
}
}
此實作方式如下所示：
