建立懸浮動作按鈕 (FAB)

懸浮動作按鈕 (FAB) 是一種高強調按鈕,可讓使用者在應用程式中執行主要動作。懸浮動作按鈕 (FAB) 會宣傳單一的重點動作,這是使用者最常採取的路徑,通常會固定在畫面右下角。

以下是您可能會使用 FAB 的三種情境:

  • 建立新項目:在筆記應用程式中,浮動動作按鈕可用於快速建立新記事。
  • 新增聯絡人:在即時通訊應用程式中,FAB 可開啟介面,讓使用者在對話中新增聯絡人。
  • 將位置設為中心:在地圖介面中,使用者可透過 FAB 將地圖中心設為目前位置。

在 Material Design 中,FAB 分為四種類型:

版本相容性

這項實作作業需要將專案的 minSDK 設為 API 級別 21 以上。

依附元件

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.05.00')

建立基本懸浮動作按鈕

如要建立一般用途的浮動動作按鈕,請使用基本 FloatingActionButton 可組合函式:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}

結果

標準的懸浮動作按鈕,具有圓角、陰影和「新增」圖示。
圖 1. 懸浮動作按鈕。

建立小型懸浮動作按鈕

如要建立小型懸浮動作按鈕,請使用 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.")
    }
}

結果

包含「新增」圖示的 SmallFloatingActionButton 實作方式。
圖 2. 小型懸浮動作按鈕。

建立大型懸浮動作按鈕

如要建立大型浮動動作按鈕,請使用 LargeFloatingActionButton 可組合函式。除了會產生較大的按鈕外,這個可組合函式與其他範例沒有顯著差異。

以下是大型 FAB 的簡單實作方式。

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}

結果

LargeFloatingActionButton 的實作項目,內含「新增」圖示。
圖 3. 大型懸浮動作按鈕。

建立展開的懸浮動作按鈕

您可以使用 ExtendedFloatingActionButton 可組合項建立更複雜的浮動動作按鈕。與 FloatingActionButton 的主要差異在於,這個函式有專屬的 icontext 參數。您可以使用這些按鈕建立內容較複雜的按鈕,並適當縮放按鈕大小,以配合內容。

下列程式碼片段示範如何實作 ExtendedFloatingActionButton,並傳遞 icontext 的範例值。

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

結果

實作 ExtendedFloatingActionButton,顯示「extended button」文字和編輯圖示。
圖 4. 含有文字和圖示的懸浮動作按鈕。

重點

雖然您可以使用多個可組合函式建立符合 Material Design 的懸浮動作按鈕,但這些函式的參數差異不大。請注意下列主要參數:

  • onClick:使用者按下按鈕時呼叫的函式。
  • containerColor:按鈕顏色。
  • contentColor:圖示顏色。

z## 包含本指南的集合

本指南是精選快速指南系列的一部分,涵蓋更廣泛的 Android 開發目標:

瞭解如何使用可組合函式,根據 Material Design 設計系統輕鬆建立美觀的 UI 元件。

如有任何問題或意見回饋

前往常見問題頁面,參閱快速指南或與我們聯絡,分享您的想法。