按鈕可讓使用者觸發已定義的動作。按鈕共有五種類型:
類型 |
外觀 |
目的 |
---|---|---|
已填充 | 純色背景搭配對比文字。 |
針對主要動作,例如「提交」和「儲存」。陰影效果可強調按鈕的重要性。 |
Tonal | 背景顏色會根據表面而有所不同。 |
用於主要或重大動作。填滿的按鈕可提供視覺重量,適合用於「加入購物車」和「登入」等動作。 |
偏高 | 陰影可讓圖片更醒目。 |
用於主要或重大動作。增加高度,讓按鈕更醒目。 |
外框線 | 邊框無填充。 |
用於重要但非主要的動作。外框按鈕與其他按鈕搭配使用時,可用於指出次要動作,例如「取消」或「返回」。 |
Text | 沒有背景或邊框的文字。 |
適用於較不重要的動作,例如導覽連結,或次要動作,例如「瞭解詳情」或「查看詳細資料」。 |
版本相容性
這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。
依附元件
建立填滿型按鈕
填滿的按鈕元件會使用基本 Button
可組合項。預設會以單色填滿。
結果
![紫色背景的填滿按鈕,上頭寫著「filled」。](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?hl=zh-tw)
建立填滿色調的按鈕
填滿色調的按鈕元件會使用 FilledTonalButton
可組合項。預設會填入色調顏色。
結果
![淺紫色背景的色調按鈕,上頭寫著「filled」。](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?hl=zh-tw)
建立帶有外框的按鈕
外框按鈕元件會使用 OutlinedButton
可組合函式。預設會顯示為外框。
結果
![透明帶框按鈕,帶有黑色邊框,上頭寫著「Outlined」。](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?hl=zh-tw)
建立升高按鈕
提升按鈕元件會使用 ElevatedButton
可組合函式。根據預設,它會顯示代表高度效果的陰影,並以帶有陰影的邊框按鈕顯示。
結果
![灰色背景的升起效果按鈕,上方顯示「Elevated」。](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?hl=zh-tw)
建立文字按鈕
文字按鈕元件會使用 TextButton
可組合函式。在點選之前,這項功能只會以文字形式顯示。根據預設,它沒有實心填充或外框。
結果
![文字按鈕,顯示「Text Button」](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?hl=zh-tw)
重點
onClick
:使用者按下按鈕時呼叫的函式。enabled
:如果為 false,這個參數會導致按鈕顯示為無法使用且處於停用狀態。colors
:用於決定按鈕中所用顏色的ButtonColors
例項。contentPadding
:按鈕內的邊框間距。
包含此指南的集合
本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=zh-tw)
顯示互動式元件
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。
有問題或意見回饋嗎?
請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。