懸浮動作按鈕 (FAB) 是高度強調的按鈕，可讓使用者 常用於執行應用程式的主要動作能鼓勵使用者採取特定的單一動作 是使用者最常採取的路徑，通常出現在 固定在畫面右下方
請考慮使用懸浮動作按鈕 (FAB) 的三種用途：
- 建立新項目：在記事應用程式中，FAB 可用來快速 建立新的記事
- 新增聯絡人：在即時通訊應用程式中，FAB 可以開啟介面，進而 使用者將某人加入對話。
- 中心位置：在地圖介面中，懸浮動作按鈕 (FAB) 可將地圖中心設在 使用者目前的位置
Material Design 中有四種 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") },
)
}
實作內容如下所示：
