按鈕

keywords: AiAssisted, product:JetpackCompose

按鈕是基本元件，可讓使用者觸發定義的動作。按鈕共有五種類型。下表說明五種按鈕類型的外觀，以及適合使用的位置：

類型 外觀 目的
實心 純色背景搭配對比文字。 高強調按鈕。這些動作適用於應用程式中的主要動作，例如「提交」和「儲存」。陰影效果可突顯按鈕的重要性。
填滿色調 背景顏色會隨表面而異。 主要或重要動作也適用。填滿色調按鈕的視覺比重較高，適合「加入購物車」和「登入」等功能。
偏高 陰影效果可讓文字更顯眼。 用途與色調按鈕類似。提高高度，讓按鈕更加醒目。
含外框 邊框沒有填滿。 中強調按鈕，包含重要但非主要的動作。這類按鈕很適合與其他按鈕搭配使用，用於指出次要動作，例如「取消」或「返回」。
文字 顯示文字，不含背景或邊框。 低強調按鈕，適合用於較不重要的動作，例如導覽連結，或「瞭解詳情」或「查看詳細資料」等次要功能。

這張圖片顯示 Material Design 中的五種按鈕：

五個按鈕元件的範例，並標示出各自的特徵。
圖 1. 五個按鈕元件。

API 介面

onClick
使用者按下按鈕時，系統呼叫的函式。
enabled
當 false 時，這個參數會讓按鈕顯示為無法使用和停用。
colors
：決定按鈕所用顏色的 ButtonColors 執行個體。
contentPadding
按鈕內的邊框間距。

填滿型按鈕

填滿按鈕元件會使用基本 Button 可組合項。預設會以單色填滿。程式碼片段顯示如何實作元件：

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

實作結果如下所示：

紫色背景的填滿型按鈕，上面顯示「已填寫」。
圖 2. 填滿型按鈕。

填滿型色調按鈕

填滿色調按鈕元件會使用 FilledTonalButton 可組合函式。預設會填入色調顏色。

這個程式碼片段說明如何實作元件：

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

實作結果如下所示：

淺紫色背景的色調按鈕，上面顯示「色調」。
圖 3. 色調按鈕。

外框按鈕

外框按鈕元件使用 OutlinedButton 可組合函式。預設會顯示外框。

這個程式碼片段說明如何實作元件：

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

實作結果如下所示：

透明外框按鈕，帶有深色邊框，上面寫著「Outlined」。
圖 4. 外框型按鈕。

升起效果按鈕

凸顯按鈕元件會使用 ElevatedButton 可組合函式。根據預設，陰影代表高度效果。這是包含陰影的填滿型按鈕。

這個程式碼片段說明如何實作元件：

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

實作結果如下所示：

灰色背景的升起效果按鈕，上面寫著「升起效果」。
圖 5. 升起效果按鈕。

文字按鈕

文字按鈕元件會使用 TextButton 可組合函式。按下前只會顯示文字，根據預設，它沒有實心填滿或外框。

這個程式碼片段說明如何實作元件：

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

實作結果如下所示：

顯示「Text Button」的文字按鈕
圖 6. 文字按鈕。

其他資源