懸浮動作按鈕 (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
可組合項,建立更複雜的懸浮動作按鈕。這個 API 和 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") }, ) }
實作內容如下所示: