應用程式列是容器,可讓使用者存取主要功能和導覽項目。應用程式列分為兩種:頂端應用程式列和底部應用程式列。兩者的外觀和用途如下:
類型 |
外觀 |
目的 |
---|---|---|
頂端應用程式列 |
畫面頂端。 |
提供存取重要工作和資訊的權限。通常會顯示標題、核心動作項目和特定導覽項目。 |
底部應用程式列 |
在畫面底部。 |
通常包含核心導覽項目。可能還提供其他按鍵動作的存取權,例如透過內含的懸浮動作按鈕。 |
如要實作頂端應用程式列和底部應用程式列,請使用 TopAppBar
和
BottomAppBar
可組合函式。可讓你
用於封裝導覽和動作控制項的介面,
與 Material Design 原則相輔相成
頂端應用程式列
下表列出頂端應用程式列的四種類型:
類型 |
範例 |
---|---|
小:適用於不需要大量導覽或動作的畫面。 |
|
置中對齊:適用於含有單一主要動作的螢幕。 |
|
中型:適用於需要適度導覽和動作的螢幕。 |
|
大:適用於需要大量導覽和操作的畫面。 |
|
API 介面
可讓您實作四種不同頂端應用程式列的各種可組合項相當相似。這些指南共用幾個重要參數:
title
:顯示在應用程式列上的文字。navigationIcon
:導覽的主要圖示。會顯示在應用程式列的左側。actions
:讓使用者存取重要動作的圖示。會顯示在應用程式列的右側。scrollBehavior
:決定頂端應用程式列如何回應 Scaffold 內部內容的捲動動作。colors
:決定應用程式列的顯示方式。
捲動行為
您可以控制使用者捲動指定結構體內部內容時,應用程式列的回應方式。如要這樣做,請建立 TopAppBarScrollBehavior
的例項,並將其傳遞至頂端應用程式列的 scrollBehavior
參數。
TopAppBarScrollBehavior
分為三種類型。方法如下:
enterAlwaysScrollBehavior
:當使用者向上拉取結構區塊的內部內容時,頂端應用程式列會收合。當使用者將內部內容往下滑動時,應用程式列會展開。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." ) } }
此實作方式如下所示:
