應用程式列是一種容器，可讓使用者存取主要功能，並 導覽項目。應用程式列分為兩種類型：頂端應用程式列和底部應用程式 格。兩者的外觀和用途如下：
類型 |
外觀 |
目的 |
|---|---|---|
頂端應用程式列 |
畫面頂端。 |
可讓你存取重要工作和資訊。通常代管標題、核心操作項目和特定導覽項目， |
底部應用程式列 |
在畫面底部。 |
通常包含核心導覽項目。可能還提供其他按鍵動作的存取權，例如透過內含的懸浮動作按鈕。 |
如要實作頂端應用程式列和底部應用程式列，請使用 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)
}
}
實作內容如下所示：
置中對齊
置中對齊的頂端應用程式列與小型應用程式列相同
但標題位於元件中央如要實作，請使用
專屬的 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)
}
}
實作內容如下所示：
中
中型頂端應用程式列會將標題放在其他圖示下方。如要建立
第一種是使用 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."
)
}
}
實作內容如下所示：
