按鈕是基本元件,可讓使用者觸發指定動作。共有五種按鈕,下表說明這五個按鈕類型的外觀,以及這些類型應使用的位置。
類型 |
外觀 |
目的 |
---|---|---|
實心 |
使用對比文字的純色背景。 |
高強調按鈕。這些控制項適用於應用程式中的主要動作,例如「提交」和「儲存」。陰影效果會強調按鈕的重要性。 |
實心色調 |
背景顏色會因表面而異。 |
主要或重要動作也適用。填滿按鈕則提供更為視覺效果和西裝功能,例如「加入購物車」和「登入」。 |
偏高 |
加上陰影以吸引目光。 |
適合類似的色調按鈕。增加高度,讓該按鈕以更醒目的方式顯示。 |
含外框 |
呈現未填滿的邊框。 |
中強調按鈕,包含非主要動作。可與其他按鈕完美搭配,用於指出替代的次要動作,例如「取消」或「返回」。 |
Text |
顯示沒有背景或框線的文字。 |
低強調按鈕,最適合用於較不重要的動作 (例如導覽連結) 或次要函式 (例如「瞭解詳情」或「查看詳細資料」)。 |
下圖展示了 Material Design 中的五個按鈕類型。
API 介面
onClick
:使用者按下按鈕時呼叫的函式。enabled
:如果為 false,這個參數會導致按鈕無法使用且無效。colors
:ButtonColors
的執行個體,用於決定按鈕中使用的顏色。contentPadding
:按鈕中的邊框間距。
實心按鈕
填滿的按鈕元件會使用基本的 Button
可組合項。它預設會以單色填滿。下列程式碼片段說明如何實作元件:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
此實作方式如下:
實心色調按鈕
實心色調按鈕元件會使用 FilledTonalButton
可組合項。根據預設,這個欄位會填入色調顏色。
下列程式碼片段示範如何實作元件:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
此實作方式如下:
外框按鈕
外框的按鈕元件會使用 OutlinedButton
可組合項。它預設會顯示外框。
下列程式碼片段示範如何實作元件:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
此實作方式如下:
升高按鈕
提升的按鈕元件會使用 ElevatedButton
可組合項。根據預設,它的陰影預設代表高度效果。請注意,這本質上是帶有陰影的外框按鈕。
下列程式碼片段示範如何實作元件:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
此實作方式如下:
文字按鈕
文字按鈕元件會使用 TextButton
可組合項。除非按下,否則只會顯示為文字。預設不會以實心填滿或輪廓。
下列程式碼片段示範如何實作元件:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
此實作方式如下: