按鈕是基本元件,可讓使用者觸發已定義的動作。按鈕共有五種類型。下表說明這五種按鈕類型的外觀及適用位置。
類型 |
外觀 |
目的 |
---|---|---|
實心 |
單色背景搭配對比鮮明的文字。 |
高強調按鈕。這些都代表應用程式的主要動作,例如「提交」和「儲存」。陰影效果可強調按鈕的重要性。 |
實心色調 |
背景顏色會因表面而異。 |
也適用於主要或重要動作實心按鈕可提供更多視覺重量和合適功能,例如「加入購物車」和「登入」。 |
偏高 |
看起來像陰影,代表著明顯。 |
適用於與色調按鈕類似的角色。調高高度,讓按鈕更醒目。 |
含外框 |
顯示未填滿的邊框。 |
中強調按鈕,內含重要但不是主要動作。這些按鈕可以與其他按鈕配對,用於指出次要的替代動作,例如「取消」或「返回」。 |
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") } }
實作內容如下所示: