懸浮動作按鈕

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

請考慮使用懸浮動作按鈕 (FAB) 的三種用途:

  • 建立新項目:在記事應用程式中,FAB 可用來快速 建立新的記事
  • 新增聯絡人:在即時通訊應用程式中,FAB 可以開啟介面,進而 使用者將某人加入對話。
  • 中心位置:在地圖介面中,懸浮動作按鈕 (FAB) 可將地圖中心設在 使用者目前的位置

Material Design 中有四種 FAB:

  • FAB:一般大小的懸浮動作按鈕。
  • 小型 FAB:較小的懸浮動作按鈕。
  • 大型懸浮動作按鈕:較大的懸浮動作按鈕。
  • 展開的 FAB:包含圖示以外內容的懸浮動作按鈕。
四個懸浮動作按鈕元件的示例。
圖 1. 四種懸浮動作按鈕類型。

API 介面

雖然您可以運用多個可組合函式建立懸浮動作 按鈕與質感設計一致的按鈕時,其參數沒有顯著差異。 請注意下列關鍵參數:

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

懸浮動作按鈕

如要建立一般懸浮動作按鈕,請使用 FloatingActionButton 可組合函式。以下範例示範了 FAB 的基本實作:

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

實作內容如下所示:

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

小型按鈕

如要建立小型懸浮動作按鈕,請使用 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」圖示。
圖 3. 小型懸浮動作按鈕。

大型按鈕

如要建立大型懸浮動作按鈕,請使用 LargeFloatingActionButton 可組合函式。這個可組合函式不屬於 有顯著的差異 而是加大按鈕

以下是大型懸浮動作按鈕 (FAB) 的直接實作方式。

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

實作內容如下所示:

實作 LargeFloatingActionButton,其中包含「add」圖示。
圖 4. 大型懸浮動作按鈕。

延伸按鈕

您可以建立更複雜的懸浮動作按鈕,方法是使用 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,並顯示「延伸按鈕」的文字以及編輯圖示
圖 5. 包含文字和圖示的懸浮動作按鈕。

其他資源