懸浮動作按鈕 (FAB) 是一種高強調的按鈕，可讓使用者在應用程式中執行主要動作。這種連結可宣傳使用者最常採取的單一動作，該動作通常固定在畫面右下方。
請考慮使用懸浮動作按鈕 (FAB) 的三種用途：
- 建立新項目：在筆記應用程式中，可使用 FAB 快速建立新記事。
- 新增聯絡人：在即時通訊應用程式中，FAB 可以開啟介面，讓使用者將其他人加入對話。
- 中心位置：在地圖介面中，懸浮動作按鈕 (FAB) 可將地圖中心設在使用者目前的所在位置。
在 Material Design 中，有四種 FAB：
- FAB：一般大小的懸浮動作按鈕。
- 小懸浮動作按鈕 (FAB)：較小的懸浮動作按鈕。
- 大型懸浮動作按鈕 (FAB)：較大的懸浮動作按鈕。
- 擴充 FAB：包含不只圖示的懸浮動作按鈕。
API 介面
雖然有許多可組合項可用來建立與質感設計一致的懸浮動作按鈕，但其參數的差異不大。以下是需要留意的幾個重要參數：
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") },
)
}
此實作方式如下：
