建立懸浮動作按鈕 (FAB)

懸浮動作按鈕 (FAB) 是一種高強調按鈕,可讓使用者在應用程式中執行主要動作。這類按鈕會推廣單一專注的動作,也就是使用者最常採取的路徑,通常會固定在螢幕的右下方。

請考量下列三種可能會使用 FAB 的用途:

  • 建立新項目:在筆記應用程式中,FAB 可用於快速建立新筆記。
  • 新增聯絡人:在即時通訊應用程式中,FAB 可開啟使用者可新增對話對象的介面。
  • 置中位置:在地圖介面中,FAB 可將地圖置中,以顯示使用者目前的位置。

Material Design 提供四種 FAB:

  • FAB:一般大小的懸浮動作按鈕。
  • 小型 FAB:較小的懸浮動作按鈕。
  • 大型 FAB:較大的懸浮動作按鈕。
  • 展開的 FAB:包含圖示以外其他內容的懸浮動作按鈕。

版本相容性

這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。

依附元件

Kotlin

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

Groovy

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

建立基本懸浮動作按鈕

如要建立一般浮動動作按鈕,請使用基本 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,其中包含「add」圖示。
圖 2. 小型懸浮動作按鈕。

建立大型懸浮動作按鈕

如要建立大型浮動動作按鈕,請使用 LargeFloatingActionButton 可組合項。除了產生較大的按鈕,這個可組合項與其他範例並無太大差異。

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

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

結果

實作 LargeFloatingActionButton,其中包含「add」圖示。
圖 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 元件。

有問題或意見回饋嗎?

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