懸浮動作按鈕 (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.") } }
實作內容如下所示:
![標準的懸浮動作按鈕,有圓角、陰影和「新增」圖示。](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab.png?authuser=19&hl=zh-tw)
小型按鈕
如要建立小型懸浮動作按鈕,請使用
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」圖示。](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?authuser=19&hl=zh-tw)
大型按鈕
如要建立大型懸浮動作按鈕,請使用
LargeFloatingActionButton
可組合函式。這個可組合函式不屬於
有顯著的差異
而是加大按鈕
以下是大型懸浮動作按鈕 (FAB) 的直接實作方式。
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
實作內容如下所示:
![實作包含「add」的 LargeFloatingActionButton圖示。](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?authuser=19&hl=zh-tw)
延伸按鈕
您可以建立更複雜的懸浮動作按鈕,方法是使用
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") }, ) }
實作內容如下所示:
![實作 ExtendedFloatingActionButton,並顯示「延伸按鈕」的文字以及編輯圖示](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-extended.png?authuser=19&hl=zh-tw)