懸浮動作按鈕 (FAB) 是一種高強調按鈕,可讓使用者在應用程式中執行主要動作。懸浮動作按鈕 (FAB) 會宣傳單一的重點動作,這是使用者最常採取的路徑,通常會固定在畫面右下角。
以下是您可能會使用 FAB 的三種情境:
- 建立新項目:在筆記應用程式中,浮動動作按鈕可用於快速建立新記事。
- 新增聯絡人:在即時通訊應用程式中,FAB 可開啟介面,讓使用者在對話中新增聯絡人。
- 將位置設為中心:在地圖介面中,使用者可透過 FAB 將地圖中心設為目前位置。
在 Material Design 中,FAB 分為四種類型:
- FAB:一般大小的懸浮動作按鈕。
- 小型 FAB:較小的懸浮動作按鈕。
- 大型懸浮動作按鈕:較大的懸浮動作按鈕。
- 展開的 FAB:包含圖示以外內容的懸浮動作按鈕。
API 介面
雖然您可以使用多個可組合函式建立符合 Material Design 的懸浮動作按鈕,但這些函式的參數差異不大。請注意下列主要參數:
onClick
:使用者按下按鈕時呼叫的函式。containerColor
:按鈕顏色。contentColor
:圖示顏色。
懸浮動作按鈕
如要建立一般用途的懸浮動作按鈕,請使用基本的 FloatingActionButton
可組合函式。以下範例示範如何基本實作 FAB:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
實作方式如下:

小型按鈕
如要建立小型懸浮動作按鈕,請使用 SmallFloatingActionButton
可組合函式。以下範例說明如何新增自訂顏色。
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
實作方式如下:

大按鈕
如要建立大型浮動動作按鈕,請使用 LargeFloatingActionButton
可組合函式。除了會產生較大的按鈕外,這個可組合函式與其他範例沒有顯著差異。
以下是大型 FAB 的簡單實作方式。
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
實作方式如下:

擴展按鈕
您可以使用 ExtendedFloatingActionButton
可組合項建立更複雜的浮動動作按鈕。與 FloatingActionButton
的主要差異在於,這個函式有專屬的 icon
和 text
參數。您可以使用這些按鈕建立內容較複雜的按鈕,並適當縮放按鈕大小,以配合內容。
下列程式碼片段示範如何實作 ExtendedFloatingActionButton
,並傳遞 icon
和 text
的範例值。
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
實作方式如下:
