懸浮動作按鈕

懸浮動作按鈕 (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.")
    }
}
FloatingActionButton.kt

此實作方式如下所示：

圖 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.")
    }
}
FloatingActionButton.kt

注意： 各種 FAB 可組合項會共用許多參數，因此您可以使用 方法，透過其他可組合函式自訂顏色。

實作內容如下所示：

圖 3. 小型懸浮動作按鈕。

大型按鈕

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

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

注意： 這個範例會將 CircleShape 做為 shape 參數的值傳遞。 會產生圓形按鈕，而非帶有圓角的正方形。您可以傳遞任何 Shape 例項，或設定 MaterialTheme.shape.large 的值，以便在應用程式中調整。

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

實作內容如下所示：

圖 4. 大型懸浮動作按鈕。

延伸按鈕

您可以使用 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") },
    )
}
FloatingActionButton.kt

此實作方式如下所示：

圖 5. 包含文字和圖示的懸浮動作按鈕。

其他資源

• 常見按鈕
• Material UI 說明文件