按鈕可讓使用者觸發已定義的動作。按鈕共有五種類型:
類型 |
外觀 |
目的 |
---|---|---|
已填充 | 純色背景搭配對比文字。 |
針對主要動作,例如「提交」和「儲存」。陰影效果可強調按鈕的重要性。 |
Tonal | 背景顏色會根據表面而有所不同。 |
用於主要或重大動作。填滿的按鈕可提供視覺重量,適合用於「加入購物車」和「登入」等動作。 |
偏高 | 陰影可讓圖片更醒目。 |
用於主要或重大動作。增加高度,讓按鈕更醒目。 |
外框線 | 邊框無填充。 |
用於重要但非主要的動作。外框按鈕與其他按鈕搭配使用時,可用於指出次要動作,例如「取消」或「返回」。 |
Text | 沒有背景或邊框的文字。 |
適用於較不重要的動作,例如導覽連結,或次要動作,例如「瞭解詳情」或「查看詳細資料」。 |
版本相容性
這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。
依附元件
建立填滿型按鈕
填滿的按鈕元件會使用基本 Button
可組合項。預設會以單色填滿。
結果

建立填滿色調的按鈕
填滿色調的按鈕元件會使用 FilledTonalButton
可組合項。預設會填入色調顏色。
結果

建立帶有外框的按鈕
外框按鈕元件會使用 OutlinedButton
可組合函式。預設會顯示為外框。
結果

建立升高按鈕
提升按鈕元件會使用 ElevatedButton
可組合函式。根據預設,它會顯示代表高度效果的陰影,並以帶有陰影的邊框按鈕顯示。
結果

建立文字按鈕
文字按鈕元件會使用 TextButton
可組合函式。在點選之前,這項功能只會以文字形式顯示。根據預設,它沒有實心填充或外框。
結果

重點
onClick
:使用者按下按鈕時呼叫的函式。enabled
:如果為 false,這個參數會導致按鈕顯示為無法使用且處於停用狀態。colors
:用於決定按鈕中所用顏色的ButtonColors
例項。contentPadding
:按鈕內的邊框間距。
包含此指南的集合
本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:

顯示互動式元件
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。
有問題或意見回饋嗎?
請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。